Google Antigravity × Figma MCP — AIデザインワークフロー革命ガイド

デザインとコーディングの間には、長年にわたって大きなギャップが存在してきましました。デザイナーがFigmaで丁寧に仕上げたUIを、エンジニアが手作業でコードに落とし込む。このプロセスでは、微妙なズレや認識の食い違いが必ずと言っていいほど発生します。

Google AntigravityとFigma MCPの連携は、このギャップを根本から埋める可能性を秘めています。AIがデザインの意図を正確に読み取り、コード生成まで一気通貫で行えるワークフローが、いま現実のものになりつつあります。

ここではGoogle AntigravityとFigma MCPを組み合わせたAIデザインワークフローの構築方法を、実践的なステップで解説していきます。

Google AntigravityとFigma MCPの基本を理解する

Google Antigravityは、Googleが提供するAIアシスタントツールで、コード生成、分析、クリエイティブ作業を幅広くサポートします。特にデザイン領域では、UIコンポーネントの理解と生成に優れた能力を発揮します。

一方、Figma MCPはModel Context Protocolを通じてFigmaのデザインデータにプログラマティックにアクセスする仕組みです。MCPを介することで、AIモデルがFigma上のレイヤー構造、カラー情報、タイポグラフィ、スペーシングなどの詳細なデザインデータを直接参照できるようになります。

この2つを組み合わせると、以下のようなワークフローが実現します。

Figma上のデザインデータをMCPがAIに提供する
Google Antigravityがデザインの意図を解析する
解析結果に基づいてReactやHTML/CSSのコードを自動生成する
生成コードをレビューし、フィードバックを反映する

従来のデザイン→コーディングのフローが「手作業の翻訳」だったのに対し、この連携では「AIによる自動変換」が中心になります。

連携環境のセットアップ手順

Figma MCP Serverの準備

まず、Figma MCPサーバーをローカル環境にセットアップします。

# Figma MCP Serverのインストール
npm install -g @anthropic/figma-mcp-server
 
# 環境変数の設定
export FIGMA_ACCESS_TOKEN="YOUR_FIGMA_ACCESS_TOKEN"

Figmaの個人アクセストークンは、Figmaの設定画面から生成できます。セキュリティのため、必要最小限のスコープ（ファイル読み取り権限）のみを付与することをお勧めします。

Google Antigravityとの接続設定

Google Antigravity側では、MCPサーバーとの接続設定を行います。

{
  "mcpServers": {
    "figma": {
      "command": "figma-mcp-server",
      "args": ["--token", "YOUR_FIGMA_ACCESS_TOKEN"],
      "env": {
        "FIGMA_FILE_KEY": "YOUR_FILE_KEY"
      }
    }
  }
}

この設定により、Antigravityのセッション内でFigmaのデザインデータに直接アクセスできるようになります。

動作確認

セットアップ完了後、簡単なテストでデータの取得を確認します。

Antigravityへのプロンプト例:
「Figmaファイル内の"Header"コンポーネントの構造を教えてください」

正しく接続されていれば、Antigravityがコンポーネントのレイヤー構造、使用フォント、カラーコードなどを正確に返してくれます。

デザインからコードへの自動変換パイプライン

連携環境が整ったら、実際のデザイン→コード変換パイプラインを構築していきましょう。

Step 1: デザイントークンの抽出

最初のステップは、Figmaからデザイントークンを抽出することです。デザイントークンとは、カラーパレット、タイポグラフィスケール、スペーシングルールなど、デザインシステムの基盤となる値のことです。

プロンプト例:
「Figmaファイルからカラーパレット、フォントスタイル、スペーシングの
デザイントークンを抽出し、CSS変数として出力してください」

Antigravityは、MCPを通じて取得したFigmaデータからデザイントークンを自動抽出し、以下のようなCSS変数を生成します。

:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-background: #fafafa;
  --color-text: #1a1a2e;
 
  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-h1: 2.25rem;
  --font-size-body: 1rem;
 
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
}

Step 2: コンポーネント単位での変換

デザイントークンが準備できたら、個々のUIコンポーネントをコードに変換していきます。

プロンプト例:
「Figmaの"ProductCard"コンポーネントを分析し、
デザイントークンを使用したReactコンポーネントとして生成してください。
レスポンシブ対応も含めてください」

Antigravityは、Figma上のコンポーネント構造を正確に読み取り、Auto Layoutの設定からFlexboxやGridへの適切なマッピングを行います。

Step 3: ページ全体の組み立て

コンポーネントが揃ったら、ページ全体のレイアウトを組み立てます。Figmaのフレーム階層構造をそのまま反映し、コンポーネントの配置関係を維持したコードを生成できます。

実践的なワークフロー事例

事例1: ECサイトの商品一覧ページ

あるECサイトのリニューアルプロジェクトでは、デザイナーがFigmaで商品一覧ページを設計しました。従来であれば、エンジニアがデザインを見ながら数日かけてコーディングする工程が必要でしました。

Antigravity × Figma MCPの連携により、以下のプロセスが実現しました。

デザイナーがFigmaで商品カード、フィルター、ページネーションを設計（2日）
AntigravityがFigma MCPを通じてデザインを分析し、Reactコンポーネントを生成（30分）
エンジニアが生成コードをレビューし、ビジネスロジックを追加（1日）
合計：3.5日（従来の5日から約30%短縮）

特に効果が大きかったのは、レスポンシブ対応のコード生成です。FigmaのAuto Layout設定をFlexboxに自動マッピングすることで、手作業での調整がほぼ不要になりましました。

事例2: ダッシュボードUIの高速プロトタイピング

社内ツールのダッシュボード開発では、デザインの方向性が定まる前に、複数のレイアウトパターンを素早く試す必要がありましました。

デザイナーがFigma上で3種類のレイアウトを作成し、それぞれをAntigravityで即座にReactコードに変換。実動するプロトタイプとしてチーム内で共有し、操作感を確認しながら最適なレイアウトを選定できましました。

事例3: デザインシステムのコード化

15人規模のチームで共有するデザインシステムの構築プロジェクトでは、Figma上のコンポーネントライブラリ（50以上のコンポーネント）をReactコンポーネントに変換する作業が求められましました。

Antigravity × Figma MCPにより、ベースとなるコンポーネントコードの生成を自動化。エンジニアはアクセシビリティ対応やインタラクションの実装に集中でき、全体の工期を約40%短縮できましました。

AIデザインパイプラインの品質を高めるコツ

自動生成されたコードの品質をさらに高めるための実践的なテクニックをご紹介します。

コンテキストの充実

Antigravityに渡す情報が多いほど、生成コードの精度が上がります。

デザイントークンファイルを事前に共有する
プロジェクトのコーディング規約（ESLint設定など）を伝える
使用しているUIフレームワーク（Tailwind CSS、Material UIなど）を明示する
アクセシビリティ要件を指定する

段階的なアプローチ

いきなり完璧なコードを求めるのではなく、段階的に精度を上げていくアプローチが効果的です。

最初にHTML構造とレイアウトの骨格を生成する
次にスタイリングとレスポンシブ対応を追加する
最後にインタラクションやアニメーションを組み込む

各段階でデザインとの整合性を確認しながら進めることで、最終的な修正工数を大幅に削減できます。

フィードバックループの構築

生成コードにズレがあった場合、その修正内容をAntigravityにフィードバックとして伝える点が肝心です。

フィードバック例:
「先ほど生成したProductCardで、画像とテキスト間のスペーシングが
Figmaでは24pxですが、生成コードでは16pxになっていました。
今後のコンポーネント生成では、Figmaのスペーシング値を
正確に反映してください」

このようなフィードバックを蓄積することで、セッション内での生成品質が着実に向上します。

チーム導入のベストプラクティス

Phase 1: 個人での試験運用（1〜2週間）

まずはチーム内の1〜2名が、小規模なコンポーネント変換で試験運用を行います。この段階で、チームのコーディング規約に合わせたプロンプトテンプレートを整備しておくと、後の展開がスムーズです。

対象: UIコンポーネント3〜5個の変換
目標: ワークフローの基本パターンの確立
成果物: プロンプトテンプレート集、品質チェックリスト

Phase 2: チーム内展開（2〜4週間）

試験運用の成果をもとに、チーム全体への展開を進めます。

デザイナーとエンジニアが共同でワークフローを最適化する
生成コードのレビュー基準を策定する
よくある修正パターンをドキュメント化する

Phase 3: 本格運用と改善（継続）

安定した運用に入ったら、以下の指標でワークフローの改善を続けます。

デザイン→コード変換にかかる時間の推移
生成コードの修正率（少ないほど品質が高い）
チームメンバーの満足度アンケート

よくある課題と解決策

レスポンシブ対応のズレ

Figmaのブレイクポイント設定とCSSのメディアクエリの対応関係が曖昧な場合があります。事前にブレイクポイントの対応表を作成し、Antigravityへのプロンプトに含めることで解決できます。

ブレイクポイント対応例:
- Figma Mobile (375px) → @media (max-width: 640px)
- Figma Tablet (768px) → @media (max-width: 1024px)
- Figma Desktop (1440px) → デフォルト

複雑なインタラクションの処理

ホバーエフェクトやスクロールアニメーションなど、Figmaのプロトタイプ機能で表現されたインタラクションは、自動変換の精度が下がる場合があります。これらは生成後に手動で調整するか、インタラクション仕様を別途テキストで記述してAntigravityに伝える方法が効果的です。

デザインの変更への追従

デザインが頻繁に更新される場合、コードとの同期をどう維持するかが課題になります。差分検出の仕組みを活用し、変更があったコンポーネントのみを再生成するアプローチが推奨されます。

今後の展望

AIデザインワークフローはまだ発展途上にあります。現時点では「AIが生成→人間がレビュー・修正」というフローが主流ですが、今後はAI自身がデザインの意図を深く理解し、より高品質なコードを初回から生成できるようになるでしょう。

Google AntigravityとFigma MCPの連携は、その未来への確かな一歩です。まずは小さなコンポーネントの変換から始めて、チームに合ったワークフローを見つけていただければと思います。

この記事を気に入っていただけましたか？

Antigravity Lab では、このようなプレミアム品質の記事を毎日公開しています。メンバーシップに参加すると、すべてのプレミアム記事に無制限でアクセスできます。

メンバーシップの詳細はこちら →