GrabがFigmaとAIを使って、どのように東南アジア全域でハイパーローカルな体験をスケールしているか
Grabは、交通、フード、デジタル決済サービスを提供し、5,000万人以上の人々に利用されている東南アジアを代表するスーパーアプリです。事業が多様な市場へと拡大する中で、各チームには、スピードと一貫性の両立を図りながら、それぞれの地域ニーズにも柔軟に対応できる共通の仕組みが求められていました。

Figmaを共通のワークスペースとして活用することで、Grabはデザインシステム「Duxton」を構築し、現在ではGrabの乗客向けアプリの基盤として活用されています。デザイナーとエンジニアは単一の信頼できる情報源をもとに作業を進めており、Dev Modeによってエンジニアは複数のファイルを横断して仕様を探すことなく、実装に必要な情報へアクセスできます。
Grabでは継続的な実験と改善を進める中で、Figma MakeやMCPベースの連携機能を活用したAI対応ワークフローの検証も進めており、プロトタイピングや既存体験の刷新、ローカライズをこれまで以上に迅速に行える環境づくりに取り組んでいます。
課題: 多様な市場において、ハイパーローカルなユーザー体験をスケールすること
Grabは、それぞれの市場が異なる特性を持つ地域に向けてサービス設計を行っています。シンガポールで直感的に使える体験が、フィリピンでも同様に機能するとは限りません。また、タイ向けに最適化されたレイアウトが、インドネシアのユーザーには全面的な見直しを必要とする場合もあります。

しかし、当時チームが使用していたツールでは、その複雑さに対応しきれませんでした。デザイナーは共通の仕組みがないまま個別のファイルで作業していたため、コンポーネントを都度作り直す必要があり、仕様の不一致も頻発していました。また、フォントサイズや角の半径といった基本的な要素でさえ、チーム間で統一されていませんでした。
統一されたプラットフォームがなかったことで、迅速に開発を進めたり、成功した取り組みを横展開したりすることが次第に難しくなっていました。Grabには、各地域で得られたインサイトを迅速に実際のプロダクトへ反映しながらも、チーム間および市場間での一貫性を維持できる仕組みが必要でした。

解決策: Figmaを活用した、より迅速で連携の取れた業務を実現する共通プラットフォームの構築
Grabのデザイン組織には約170名のデザイナーと380名のエンジニアが所属しており、消費者、ドライバー、加盟店向けの課題に取り組むクロスファンクショナルな「ポッド」と、システムやローカライゼーションを担当する横断的なチームで構成されています。
チームがFigmaへ移行したことで、働き方は大きく変わりました。共有コンポーネント、組み込みのバージョン管理機能、組織全体での可視性を備えたFigmaは、Grabにとっての単一の信頼できる情報源となり、デザイナーの作業スピード向上と、エンジニアによる必要な情報への早期アクセスを実現しました。

「Figmaのバージョン管理機能や視覚的な表現機能によって、エンジニアはデザインを理解し、それをコードへ落とし込む作業をより容易に行えるようになりました」と、Grabのエンジニアリングおよびコアエクスペリエンス部門責任者であるSuraj Swamyは語ります。
導入から数か月のうちに、チームは再利用可能なコンポーネントを構築し、ワークフローの改善をすぐに実感しました。一度変更を加えれば、その内容はシステム全体に反映されるため、改善や更新を迅速かつ一貫性を保ちながら、容易に展開できるようになりました。

「メンバー同士がお互いの成果物をより簡単に参照できるようになりました。Figmaを使うことで、既存の要素やソリューションを再利用できるようになったのです」と、Grabのデザイン責任者であるPatrick Jeanは語ります。これは、実験を重視するGrabの企業文化にとって大きな変革となりました。デザイナーとエンジニアは、より迅速に意思決定を行い、より高い確信を持ってプロダクトをリリースできるようになっています。
Duxtonへの道のり: スケールを前提に構築されたデザインシステム
Duxtonは、シンガポールの歴史ある通りの名にちなんで名付けられたGrabのデザインシステムです。このデザインシステムは、Grabが東南アジア全域で一貫性を保ちながら、各地域に最適化された体験を提供するための基盤となっています。Figma上で構築されたDuxtonは、デザイナーとエンジニアに再利用可能なコンポーネントによる共通基盤を提供し、品質を損なうことなく迅速な開発を可能にしています。

Duxtonを採用するチームが増えるにつれ、その焦点はアプリ全体におけるデザインの一貫性をスケールさせることへと移っていきました。デザイン部門とプラットフォームエンジニアリング部門は連携し、DuxtonのFigmaライブラリを実際のプロダクトへ反映するためのコードライブラリである「Duxton SDK」を構築しました。また、デザインシステムの導入や運用をより容易にし、一貫性を維持できるようにするAI活用ツールの検討も進めています。これにより各チームは、それぞれが独立して進める局所的な最適化から脱却し、共通の構成要素を再利用しながらともに改善していく共有モデルへと移行しました。そして、その共通基盤を活用することで、より迅速に開発を進められるようになりました。

Duxtonは2023年後半に、Grabの標準デザインシステムとして正式に導入されました。2025年後半までに、Duxtonの導入率はアプリ全体のおよそ50%に達しました。そこに至るまでには、デザインシステムやSDK自体が進化を続ける中で、複数のチームが利用するコンポーネントに影響を与えることなく、大規模な既存環境を慎重に移行していく必要がありました。技術的な対応と並行して、各チームには働き方そのものの変革も求められました。地域ごとの市場に対応する柔軟性を確保しながら、組織全体としての一貫性を維持するバランスを取る必要があったのです。
現在、Grabのコンシューマー向けアプリ全体の約50%が、SDKによって実装されたDuxtonのデザインコンポーネントを用いて構築されています。これは、アプリのコードベースが500万行を超える規模であることを踏まえると、非常に大きな成果と言えます。
— Suraj Swamy、エンジニアリング・コアエクスペリエンス部門責任者、Grab
Figmaを基盤とするDuxtonは、Grabが一貫性のある高品質なユーザー体験を、迅速に提供することを支えています。こうした一貫性は複数のプロダクトにわたって展開されており、配車の予約やフードの注文といった日常的な操作を、直感的でシームレスな体験へとつなげています。

「私たちは、構築・設計するあらゆるものが、ユーザーのニーズに応えられる十分な柔軟性を備えていることを確保しなければなりません」と、Patrickは語ります。
デザインシステムやSDKの構築は複雑な取り組みですが、十分に実現可能なものだと言えるでしょう。それを組織全体へスケールさせ、現在のように約50%の導入率にまで広げることはどうでしょうか。それこそが、本当に多くの啓蒙活動を必要とする仕事なのです。
— Patrick Jean、デザイン責任者、Grab
勢いを維持するため、チームは現在、画面単位およびチーム単位での導入状況を追跡できるダッシュボードを活用しています。こうした可視化により、課題や未対応領域を特定し、改善の優先順位を適切に判断できるようになっています。また、チームはAIをこうしたワークフローに組み込み、改善への貢献を支援するとともに、導入のさらなる加速につなげる方法についても検討を進めています。
Dev Modeによるデザインから開発へのプロセスの効率化
Grabでは、Dev Modeが各チームにおいて自然発生的かつ強い勢いで導入されています。現在ではデザインを確認し実装詳細にアクセスするためのデフォルトの方法となっており、アクティブユーザー数は昨年の244人から現在の353人へと増加し、前年比で約45%の成長となっています。カラー、角の半径、アイコンなどのプロパティは設定可能であり、コンポーネントはシステムを壊すことなく、地域ごとのニーズや機能要件に合わせて柔軟に調整できるようになっています。

デザインとエンジニアリングの連携が向上し、マイクロコピーの調整やレイアウトの変更といった小さな変更を迅速にテスト・検証しながら、優れたプロダクトをより簡単に構築できるようになりました。Grabは、コントロールグループに対してローカルなA/Bテストを実施しビジネスインパクトを測定しながら、市場ごとに異なるバリエーションを展開することで、ハイパーローカルな体験を継続的に改善しています。
それは、私たちが「消費者志向であること」について述べた点に立ち返るものです。それは実際には、ドライバー、加盟店パートナー、あるいは消費者といったあらゆるユーザーの課題やペインポイントを理解するということを意味しています。Dev Modeによって、Grabのエンジニアはコンポーネントを容易にインスペクトし、デザインを実装へと変換できるようになり、私たちが構築するものが常に顧客のニーズに忠実であり続けることを担保しています。
— Patrick Jean、デザイン責任者、Grab
エンジニアはもはや、仕様を探すためにデザインファイルを掘り下げる必要はありません。必要な情報はすべて、コンポーネントの詳細、構造、スペーシングに至るまで、作業しているその場で直接確認できるようになっています。
当時は、あれこれ試しながら探し回るような作業が多く発生していました。その点において、それは一段階の摩擦を取り除くことになりました。エンジニアが必要なものや自分に関連する情報を探すのが、はるかに容易になったからです。
— Patrick Jean、デザイン責任者、Grab
AIによる次なるフロンティアの探索
実験は、Grabの開発の中核を成すものです。AIツールが進化する中で、チームはデザインとエンジニアリングの間に存在する摩擦、特にデザインからコードへのワークフローにおける反復的な作業を削減できる可能性を見出しました。彼らは、自然言語のプロンプトからコードを生成する外部のAI搭載コードエディタであるCursorを活用し始め、定型的なタスクの自動化と、より迅速なイテレーションの実現を支援しました。
この基盤が、Talk to Figma MCPと呼ばれる社内インテグレーションの開発につながりました。Grabによって構築されたこのツールは、Model Context Protocol (MCP)を用いてFigmaとCursorを接続し、チームが構造化されたデザインデータを抽出し、AIコマンドを活用してデザイン作業を高速化できるようにしています。このプラグインは強い採用を見せており、週あたり約1,700人のユーザーが21万件以上のイベントを生成していることから、チームがAI駆動のワークフローをいかに迅速に受け入れているかがうかがえます。「私たちは常に、AIモデルの能力においてどこまでが限界なのか、そのフロンティアがどこにあるのかを探るために挑戦を続けています」と、Surajは語ります。

これは、Figmaプラットフォームがいかに拡張性とカスタマイズ性に優れているかを示す好例です。Dev ModeやFigmaのMCPサーバーといったファーストパーティのツールから、GrabのTalk to Figma MCPのような連携機能まで、チームはそれぞれのニーズに合ったワークフローを自由に構築することができます。まだ初期段階ではあるものの、このツールはレガシーなインターフェースのモダナイズ、ローカライゼーションの加速、アクセシビリティの向上といったユースケースへの応用可能性をすでに示しており、これらすべてをFigma内で実現できることを示唆しています。

これからの道のり: 共有されたツールと共通の推進力
デザインとエンジニアリングの融合が進む中で、Grabはチーム間の協働のあり方をさらに効率化できる機会が拡大していると捉えています。Figmaはその進化の中心にあり、Duxtonのスケール展開からAIを活用したツールの実験に至るまで、その役割を担い続けています。
現在チームは、Figma Makeを活用してアイデアの迅速なプロトタイピングと検証を行い、フィードバックをより早い段階でプロセスに取り込むことを進めています。「人々が実際に隣り合って座り、共通の言語で会話できるときにこそ、マジックは起こるのです」とPatrickは語ります。
単一のプラットフォームによって、Grabは引き続き、意図を持って設計され、スケールで提供される、ハイパーローカルで高品質な体験を構築し続けています。
Figmaを活用してデザインの規模を拡大するには
企業がFigmaを活用してデザインの規模を拡大する方法の詳細については、当社までお問合せください。
Figmaを活用してデザインの規模を拡大するには
優れたデザインは、製品やブランドを差別化する可能性を秘めています。しかし、偉大なものは一人では作れません。Figmaは、製品チームを迅速かつ包括的なデザインワークフローで結びつけます。
企業がFigmaを活用してデザインの規模を拡大する方法の詳細については、当社までお問合せください。
Figmaの主な特長:
- デザインのアイデア出しから、作成、構築までデザインプロセスにおけるすべてのステップを1カ所に集約
- 全社共有のデザインシステムでデザインワークフローを加速
- Webベースでアクセスしやすく、使い勝手に優れた製品で、製品チームのプロセスにおける包括性を促進