LollypopがFigmaでクライアントをブリーフから実装まで導く方法

Lollypop Design Studioは、インド、アメリカ、UAE、ベトナムに180人以上のデザイナーとエンジニアが在籍する、グローバルなUI/UXデザインエージェンシーです。10年以上にわたり、同社は1,000以上のクライアントにサービスを提供し、50以上のグローバルデザイン賞を受賞し、ヘルスケア、フィンテック、e-コマースのスタートアップやフォーチュン500企業と協力して、複雑なビジネス要件をスケーラブルなデジタル製品に変換することで、20億人以上の生活を変化させてきました。

Lollypopのクライアント数が増え、エンゲージメントが複雑化するにつれ、精度と勢いを損なうことなく、デザイナー、開発者、そしてクライアントが同じ方向に向かって進むよう調整するという課題も、ますます大きくなってきました。

あるクライアント向けに、オンラインの複数地域に展開する小売業務プラットフォームのデザインに着手した際、同社は方向性を失うことなく、ブリーフから実装段階へ迅速に進行する方法が必要でした。Lollypopは、FigJam、Figma Design、Dev Tools、Figma Makeを含むFigma内でワークフローを統合することにより、プロトタイプ作成の工数を3〜4分の1に削減し、フィードバックサイクルを数日から1日に短縮し、フロントエンド開発のタイムラインを数か月から数週間に短縮しました。

課題: チームとクライアント間での複雑な製品ワークフローの管理

Figma導入以前は、デザイナー、開発者、クライアントのステークホルダーがさまざまなツールや文書を介して作業をレビューしていたため、意思決定の調整が難しく、重要な段階でフィードバックが遅れる原因となっていました。

複数の地域で事業を展開するクライアント向けにオンライン小売業務プラットフォームの設計を開始した際、課題は一層複雑になりました。このプラットフォームは、ビジネスマネージャーが各店舗の小売実績を把握できるようにすると同時に、現場の活動データが製品のロジックやワークフローに継続的に反映されるようにする必要がありました。

共有ワークスペースがなかったため、進捗状況はスプレッドシートやプレゼン資料、メールのやり取りを通じて管理されることが多く、その結果、設計内容、実装内容、そしてビジネスのニーズとの間に齟齬が生じていました。

解決策: デザイン、検証、納品を単一のつながったワークフローで行う

Lollypopは、単一の連携された環境を中心にプロジェクト全体のワークフローを再構築しました。チームはすべてをFigmaに移行しました。FigJamを使って発見と整合を行い、Figma Designでプロトタイプ作成と検証を行い、Dev Toolsでよりスムーズなハンドオフを実施し、Figma Makeでフロントエンドデリバリーを加速させました。

その結果、発見の段階で下された意思決定が直接デザインに反映され、デザイナーも開発者もアセットやコンテキストが失われることなく実装に進めるプロセスが誕生しました。

FigJamで構造化された発見プロセスを構築する

チームはすべての業務をFigJam内のワークショップで始めました。デザイナーとステークホルダーは協力して、小売業者のジャーニーをマッピングし、パフォーマンスのトリガーを定義し、介入シナリオをモデル化し、エッジケースを洗い出しました。これらすべては、1つの画面が設計される前に実施されたものです。

ネイティブのFigmaプロトタイプでワークフローを検証する

「以前は、100枚の画面すべてをJPEG形式にエクスポートし、そのJPEGをすべて別のツールに入力し、ハードコーディングしてプロトタイプを作成しなければなりませんでした」と、Lollypopのデザイン担当シニアマネージャーを務めるNaseer Ahmedは述べています。

Figmaにプロトタイプ作成をネイティブに移行することで、そのフェーズは完全に排除されました。

また、スマートアニメーションにより、プロトタイプは完成品の感触により近いものとなり、ステークホルダーからのフィードバックが明確になり、現場での誤解が減少しました。

Dev Mode、Code Connect、FigmaのMCPサーバーを活用してデザインとコードを同じキャンバスに保持する

以前は、Lollypopではさまざまなツールが併用されていたため、デザイナーは個別のファイルを管理する必要があり、開発者は仕様書、アセット、アノテーションにアクセスするために複数のプラットフォームを行き来しなければなりませんでした。

Figma に統合することによって、チームはそのワークフローを単一の接続された環境に置き換え、開発者はデザインファイル内で正確な仕様、コンポーネントの詳細、アセットに直接アクセスできるようになりました。そして、構築されたものをFigmaに戻し、レビューを行うことで、曖昧さが減り、プロジェクト全体を通してデザインとコードの同期を常に保つことができました。

「Figmaは、構築プロセス全体を通じてデザインと開発の調整方法を一変させました。デザインのコンテキストが開発ワークフローに直接反映され、完成したものはFigmaに戻してレビューすることができます。これにより、曖昧さが軽減され、確認のためのやり取りが最小限に抑えられ、デザインと実装の連携がより緊密になりました。結果として、時間の節約と納品効率の向上につながっています」と、Lollypopのソフトウェアサービス部門ディレクター、Sri Chandra Dronavalliは言います。

チームはまた、FigmaのMCPサーバーをIDEに接続し、AIエージェントがデザインファイルを直接照会し、スクリーンショットや手動の仕様から推測するのではなく、実際のデザインシステムのコンテキストに基づいたコードを生成できるようにしました。Code Connectを使用してFigmaコンポーネントを同社の本番コードにリンクすることにより、AIツールは新しいものを近似するのではなく、正確なコードベースの要素を再利用できます。それにより、1、2回の試みで90％のコンポーネント精度が達成されました。その結果、手直しが減り、トークンの不一致によるバグが少なくなり、ユーザーフィードバックに基づく反復が加速しました。

Figma Makeでフロントエンドの提供を加速する

既にバックエンドシステムが整っているモジュールに対しては、Figma Makeを活用することで、フロントエンドレイヤーをゼロから構築する必要性を減らし、次の段階への移行を円滑に進めることができました。

Figma Makeを使用して、チームは承認されたデザインから最初のフロントエンドの骨組みを生成しました。エンジニアはこれを出発点として使用し、インターフェース層をゼロから構築せずに、バックエンドシステムとの統合を改良しました。

共有ファイルでフィードバックサイクルを短縮する

フィードバックの処理は常に大きなボトルネックとなっていました。画面をPDFにエクスポートして、返答を何日も待たなければならないため、反復作業は常にクライアントのスケジュールに追いつくのに精一杯でした。

「以前は、プレゼンテーションを送って、すべての画面をJPEGにエクスポートしてPDFに変換して、それから数日間、フィードバックとレビューを待ちました」とNaseerは言います。

ステークホルダーとFigmaファイルをライブで共有することで、チームはデザインワークスペースそのものにレビューを移すことができました。ディスカッションと決定はファイル内に直接記録され、追加のドキュメント作成の手間をかけずに追跡可能な記録を作成しました。

今後の展望: コラボレーションの拡大とワークフローの改善

Lollypopがより複雑で、複数の地域にまたがるクライアント案件を手掛けるにつれ、Figmaはチーム間のコラボレーション、プレゼンテーション、成果物の納品において、共通のレイヤーとなりつつあります。ワークフローの統合により築かれた基盤を、同社は現在、事業の新たな分野へと拡大しています。

「より迅速かつ高品質な成果物を提供することは、市場における当社の存在感に直結します。Figmaで構築したワークフローとプロセスは、迅速な開発とリリースを実現し、常に最高の成果を生み出すのに役立っています。それこそがブランドを築く原動力なのです」と、Lollypopのグローバルマーケティング及びパートナーシップ担当シニアマネージャーを務めるCharan Babu N.は述べています。

Figma Slidesを活用することで、チームはステークホルダー向けのプレゼンテーションをデザインプロセスに密接に連携させ、ツールを切り替えることなく地域をまたいだチーム間の連携を促進しています。また、Figma Buzzを利用してテンプレートやコンテンツの配信を管理することで、アセットを一から作り直すことなく、キャンペーン、フォーマット、地域を問わず、ブランドのトーンや一貫性を維持しています。