Figmaを活用し、7億人以上のユーザーにスピードと信頼性を届けるPhonePeの取り組み

概要

PhonePeは、7億人以上のユーザーと5,000万人以上の加盟店に利用されている、インド最大級のフィンテックプラットフォームです。

事業の拡大に伴い、少数精鋭のデザインチームには、より迅速な制作体制の構築、プロダクト横断での連携強化、一貫したユーザーエクスペリエンスの維持が求められていました。PhonePeは、Figmaをデザインと開発のための「中央ハブ」として導入することで、クロスファンクショナルなワークフローを効率化し、ハンドオフを迅速化。さらに、Figma Design、Dev Mode、Figma MCPを活用しながら、デザインシステムを継続的に進化させています。

現在では、チームはコンセプト段階からわずか数時間で方向性の50%程度まで具体化できるようになりました。3つのデザインシステムを構築し、AIを活用したツールでも初期段階から成果を上げているPhonePeは、スピードや品質を損なうことなく、よりスマートな形でスケールを続けています。

課題: スピードと一貫性を保ちながらのスケール

PhonePe GroupがShare.MarketやIndus Appstoreといった新規事業を立ち上げる中で、コラボレーションはより複雑になっていきました。チーム数の増加に加え、7億人以上のユーザーを抱える中で、デザイン、戦略、開発の足並みを揃え続けることは、ますます難しくなっていました。

チームには、スピードを損なうことなく、一貫性を維持できる、よりつながりのあるスケーラブルな仕組みが求められていました。デザインやドキュメンテーションを一元化することは、チームがより効率的に連携し、情報を探す時間を減らすうえで不可欠となっていました。

コラボレーションと一貫性の向上は、デザインチームにとって長年取り組んできたテーマでした。組織の成熟に伴い、より明確なプロセスや標準化されたワークフローが整備され、チームはプロダクト横断で一貫性を維持しやすくなっていきました。

解決策: 3つのデザインシステムによる共通言語の構築

拡大を続けるエコシステムを支えるため、PhonePeでは3つのデザインシステムを運用しています。最も成熟したシステムは主力のコンシューマー向けアプリを支えており、さらに2つの新しいシステムは、Share.Marketをはじめとする事業を支援。進化を続けるアプリにおいて、より柔軟な実験や検証を可能にしています。

Figmaは、PhonePeのデザインシステムを集約する単一の共有基盤となり、コンポーネント、トークン、アイコンライブラリ、ドキュメンテーションを一か所に統合しました。すべてが一元化されたことで、デザインとエンジニアリングのチームは足並みを揃えながら、より迅速に開発を進め、高い品質を維持できるようになりました。

それぞれ異なる特徴を持ちながらも、3つのデザインシステムはすべて、構造化されたプロセス、共有デザイントークン、スケーラブルなドキュメンテーションといった、Figma上の共通基盤の上に構築されています。この一貫性によって、チーム間で共通言語が生まれ、ハンドオフの迅速化、認識のズレの削減、そして高品質なプロダクト開発につながっています。

フィードバックやレビューの大半は、Figma上のコメント機能や共有リンクを通じて行われており、スピーディーかつコンテキストを保ったコミュニケーションを実現しています。また、SSO、アクセス管理、バージョン履歴といったFigmaエンタープライズの機能により、システムの安全性と最新性を維持。チーム全体が明確な情報をもとに、自信を持って作業を進められる環境を支えています。

FigJamをコラボレーション用の「スクラッチパッド」とドキュメンテーションツールとして活用

PhonePeのチームは、FigJamを積極的に活用しています。FigJamは、デザイン、エンジニアリング、プロダクト、ビジネス、マーケティング、クリエイティブチームにおける初期検討の中心的な場となっています。これまで付箋やオフィスでの会話の中に留まっていたアイデアも、現在ではFigJam上で管理されており、社内全体でアイデアを記録・共有し、発展させやすくなっています。

FigJamは、機能の初期コンセプトから最終的な実装まで、プロセス全体を追跡するうえで役立っています。時間をかけて、FigJamはPhonePeにおけるドキュメンテーション運用の重要な基盤の一つとなりました。「デザインオペレーションの観点から見ると、これは大きな成果でした」と語るのは、PhonePeのコンテンツデザイン&デザインコミュニケーションリードであるSindhu Shivaprasadです。「私たちはチーム全体で、ドキュメンテーション文化をできる限り大きく改善しようと取り組んできました。」

FigJamは、「バーチャルなスクラッチパッド」としての役割も果たしています。誰でも簡単に使える一方で、大きなアイデアを形にするだけの柔軟性も備えています。プロダクトマネージャーのような非デザイナーでも、ユーザーフローの整理や初期コンセプトのスケッチに参加できるほか、デザイナーや開発者は情報設計の作成、サイトマップの構築、素早いイテレーションの共有に活用しています。こうした利用のしやすさによって、チームはよりスピーディーにアイデアを探求し、共創しながらブラッシュアップできるようになっています。

Dev Modeによる明確性・可視性・生産性

FigmaのDev Modeは、PhonePeにおけるデザインから開発までのワークフローを効率化するうえで、中核となる存在になりました。これまでコンポーネントに関する詳細なコンテキストは主にデザイナー側にありましたが、Dev Modeによって、開発者も同じレベルの可視性を得られるようになりました。さらに、コンポーネントをリアルタイムで確認・検証・理解するためのツールも利用可能になっています。これにより、エンジニアはデザインチームと何度もやり取りをすることなく、挙動を実際に確認しながら理解を深められる実践的な環境を得ることができました。

繰り返しのハンドオフや確認ミーティングに頼る代わりに、チームはファイル上で直接やり取りしながら、バリエーションを検証し、自信を持って開発を進められるようになりました。さらに、プラグイン対応によってハンドオフも一層効率化されています。現在、開発者はチームが独自に構築したデザインシステム用プラグインを活用しており、仕様の理解や一貫性の向上につなげています。

「Dev Mode以前は、デザインチームがコンポーネントをどのように表示しているか、そのバリエーションを見ることしかできませんでした。私たちにとって、これは大きな進化でした」と語るのは、PhonePeのソフトウェアエンジニア兼アプリエクセレンスチームのSachin Kumarです。

Dev Modeは、ミーティングの削減や、よりスムーズなコラボレーションにも貢献しています。「以前は、コンポーネントの機能を理解するために、ハンドオフ前後で何度もミーティングを行う必要がありましたが、今では必要な情報を自分で確認できます。それが、Dev Modeの最も強力な機能の一つだと思います」と語るのは、PhonePeのデザイン責任者であるRahul Gonsalves です。

開発者は、AndroidやiOS向けのプラットフォーム別コードスニペットにアクセスできるため、デザインをより効率的に本番環境向けのコードへ落とし込めるようになっています。また、プラグイン対応やデタッチされたコンポーネントを検知できる機能によって、さらなる管理性が加わり、チーム横断でのデザインシステムの整合性維持にも役立っています。

Figma MCPによるワークフローへのAIの統合

PhonePeがスケールする中で、チームは品質や一貫性を損なうことなく、より迅速なデリバリーを実現するためにAIの活用方法を模索しています。スピードとコードの安定性を最優先に据えながら、デザインのコンテキストをいかに開発へスムーズに連携させるかの改善に取り組んでいます。

PhonePeにおける重要なステップとして、Figma MCPの導入があります。これにより、AIコーディングエージェントをFigmaに安全に接続し、デザインファイル、コンポーネント、システムメタデータへ構造化されたアクセスを提供できるようになりました。標準化されたプロンプトやインストラクションファイルを活用することで、正確なデザインコンテキストをAIワークフローに受け渡すことができ、既存の標準に沿ったコード生成を実現しつつ、開発時間の大幅な短縮にもつながっています。

コード生成にとどまらず、Figma MCPはコンポーネントの作成や更新の効率化にも役立っています。チームはこれを活用してデザインシステムへの新しいコンポーネント追加を支援しており、初期のパイロットチームでは、シンプルな画面においてすでに成果が見られています。このアプローチは、今後さらに成熟していく段階にあります。

ハンドオフ時の品質をさらに担保するために、PhonePeはハンドオフ前に問題を検知できるカスタムリンティングプラグインを構築しました。このプラグインは、適用されているトークンやコンポーネントのメタデータといった詳細情報を可視化し、開発者がファイルが実装可能な状態かどうかをより簡単に確認できるようにしています。

「私たちはそれを活用し、プラグインをさらに改善していきたいと考えています」と語るのはSachinです。「Figmaからすでに提供されている機能に加えて、独自の機能も追加し、デザインシステムをさらに堅牢なものにしていきます。」

Figmaによるプロダクト提供の高速化

Figmaを活用することで、共有された可視性が摩擦を減らし、ハンドオフは従来の約2倍のスピードで進むようになっています。チームは、わずか数時間でコンセプトから約50%の具体化まで到達することが多くなっています。さらに、コラボレーションはデザイン領域にとどまらず、ビジネスサイドのパートナーや非デザインチームも、プロトタイプを素早く確認し、フィードバックを行えるようになっています。特に初期の低精度な段階から早期に関与してもらうことで、誤った方向での開発によるサンクコストのリスクを減らすことができています。

「必要に応じて他のチームがFigma上で画面を掘り下げたり、整理されたクリーンなデザインを視覚的に確認できることで、全員の認識をより早く揃えることができます」とSindhuは語ります。

今後に向けて、チームはFigma Makeを活用し、初期アイデアをテスト可能なプロトタイプへと素早く変換することを計画しています。特に、時間的制約によって本来なら探索が止まってしまうような場面でも活用する想定です。Makeを通じて、より多くのアイデアを検証し、より多くの選択肢を探索しながら、より良いプロダクトをより速くリリースすることを目指しています。