Juspayは主要な多国籍決済技術企業のひとつで、複雑な商業エコシステムや消費者エコシステム全体で数百万件の取引を処理するため、迅速な行動とエンジニアリングファーストを原則としています。ダッシュボード、モジュラープラットフォーム、広範なカスタマイズ要件が多数存在するため、それまで手作業でしていたデザインを、スケーラブルで開発者に適したシステムへと進化させる必要がありました。

以前は、Juspayではデザインのワークフローがサイロ化されていましたが、Figmaを採用することで、システムが開発者向けに統合されました。分岐、Dev Mode、Code Connectなどの機能により、Juspayではコラボレーションが進み、製品投入までの時間が短縮され、チームやリセラー全体で一貫した規模の拡大縮小ができるようになり、デザインの速度が5倍に向上しました。

デザインと開発のギャップを埋める

Figmaを使用する前は、JuspayのデザインワークフローはSketch、Flinto、対面フィードバックに依存していました。デザイナーたちは、一人で作業したり、画面の周りに集まったりして、ファイルをやり取りしていました。コラボレーションは成立していましたが、場所に依存するプロセスでした。開発者たちもデザインの意図を十分に把握できず、実装が遅くなり、エラーが増え、締め切りを守れなくなる原因となっていました。

「一日に9～10時間も電話に費やしていました。また、Sketchでの画面共有でデバイスが遅くなっていました。このような問題が生じたことで、よりよいコラボレーション方法が必要だとはっきりしたので、すぐにFigmaに移行しました」と、JuspayのデザインディレクターであるSamit Barai氏は振り返ります。

デザインシステムの詳細で制御可能なスケーリング

Juspayの最初のデザインシステムは、Figmaを採用した後に誕生しました。最初はスタイルを使用して構築されていましたが、チームは色、タイポグラフィ、サイズ指定、テーマ設定にバリアブルを使用する方式に移行し、エンジニアリングコードの構文との整合性を高めました。

この変化は、Juspayのマルチブランドのマルチダッシュボード環境には不可欠でした。この環境では、基盤が異なるチームやパートナー全体でシームレスに適応する必要がありました。現在では、バリアブルベースのテーマ設定により、デザイナーは加盟店やリセラーパートナーのダッシュボードのテーマを数クリックで設定できます。

広範囲での精度の確保

Juspayの製品の範囲が拡大する中で、チームはFigmaのAPIを使用してプライベートプラグインと内部ツールを構築し、デザインと開発をつなぐワークフローを構築し、実装を検証しました。デザインシステムカバレッジプラグインは、ハンドオフの前にファイルをスキャンし、コンポーネントから構築されていない要素にフラグを設定します。「このプラグインは、どの要素がデザインシステムを使用していないか、何をコンポーネントに変えるべきかを見つけるのに役立ちます。これはQAツールであると同時に機会創出エンジンです」とDeepanshuは説明します。

生成されたデータは内部ダッシュボードに取り込まれます。内部ダッシュボードでは、コンポーネントの再利用、デザインシステム以外のオーバーライド、デザインシステムの採用傾向などのユーザーレベルのメトリクスやファイルを追跡します。

エンジニアリングの視覚的な整合性を強化するために、Juspayでは、検証済みのデザインに一致しないプルリクエストをフラグするChrome拡張機能も構築しました。これらのツールをFigmaのライブラリアナリティクスと組み合わせると、不整合を防ぎ、開発者間で情報を共有し、デザインの健全性を確保することができます。

これらの改善は、測定可能な効果をもたらしました。

• デザインの速度が5倍向上
• 90日間でコンポーネント再利用率が173％増加
• コンポーネントのデタッチメントが17％減少
• スキャンされたファイルのデザインシステムカバレッジが平均71％
• 12の内部チームが共有ライブラリを積極的に使用

柔軟性の高いガバナンス

Juspayは事業を大規模に進めていますが、創造性を止めるつもりはありません。デザイナーは、SlackからJiraへのワークフローを通じて新しいパターンやバリアントを提案することを奨励されています。このパターンやバリアントはデザインシステムチームによってレビューされます。承認された変更は、Figmaでのブランチ、ピアレビューを経て、明瞭な変更履歴とともにマスターファイルに反映されます。

ダッシュボード以外に、Juspayのデザインシステムはコードのコンポーネントアーキテクチャも反映しています。テーブルセルやラッパーのようなモジュールコンポーネントは、使用例に応じてさまざまな方法で組み立てることができます。「各インスタンスを再設計する代わりに、今はインターフェースをブロックのように組み立てることで、デザイン速度が5倍向上しました」とDeepanshu氏は説明します。

批評、アイデア出し、インクルージョンのためのFigJam

Figmaの影響はコンポーネントやコードだけにとどまらず、Juspayのデザイン文化も再構築しました。各プロジェクトには発表セッションがあり、チームメンバーがデザインを4つの次元（気に入っている点、うまくいかない点、改善できる点、欠けている可能性がある点）で評価する構造化されたピア批評があります。これらはすべてFigJam内で行われます。

プロダクトマネージャーとエンジニアは、早期のアイデア出しに参加し、付箋やワイヤーフレームを使用してアイデアの共有やフィードバックを行います。このオープンで部門横断的なアプローチにより、デザインはまさに組織全体で行う作業となりました。

今後の展望: Dev Mode MCP サーバー、Code Connect、および自動化

成熟したデザインシステムが整った今、Juspayはデザインからコーディングへのワークフローを自動化する新しい方法をテストしています。

Code Connectは現在Juspayのデザインシステムリポジトリに統合されており、開発者はDev Modeでリアルタイムの、実稼働環境に合わせたコードスニペットを直接見ることができます。現在までに、34のコンポーネントがCode Connectを使用して接続されています。

Juspayは、FigmaのDev Mode MCPサーバーを活用して、使用可能なHTML/CCSおよびTypeScriptコードを生成しています。このプロセスでは、コンセプトから実稼働対応のコードへ最小限の手動ステップで進行することを目標にしています。

初期の実験段階ではありますが、JuspayはFigmaのMCPサーバーとCode Connectが主要な効率向上をもたらすと予測しています。

• 4～5倍速い開発時間: 画面ごとの実装時間を45～60分から8～12分に短縮
• 必要なステップ数の削減: ワークフローを15ステップから4ステップに削減
• 一貫性の向上: 視覚的不整合を15～20％から3～5％に削減

開発者がすべての変更を常に把握するために、デザインシステムのバージョン間での更新をスキャンし、GitHubのプルリクエストを自動的に立ち上げ、デザインの更新とコードの可視性をつなげるプラグインを、チームが試験運用中です。

スケールに対応したデザイン、未来に向けた構築

必要性から革新にいたるまでのJuspayとFigmaの連携は、コラボレーションをデザインプラットフォームがUIの一貫性だけでなく、文化やワークフローの変革をもたらす方法を示しています。JuspayはFigmaを基盤として、より速い構築、より賢明なコラボレーション、より確実なスケーリングを、一つずつのバリアブル、ブランチ、プラグインごとに進めています。