Figma Dev Mode MCP × AIコード生成 — デザインデータから実装を自動化する方法

デザインシステムの品質がAI出力に直結する時代。Figma Dev Mode MCPを活用すれば、デザイナーが作成したデザインデータから直接、高品質な実装コードを自動生成できます。その仕組みと具体的な実装パターンを順を追って整理していきます。

Figma Dev Mode MCPの概要

Figma Dev Mode MCPは、AI（Claude・Gemini等）がFigmaのデザインデータをプログラムとして読み取り、実装コードを生成するためのMCP（Model Context Protocol）インターフェースです。従来の「デザイナーがFigmaで作成→エンジニアが手動で実装」というワークフローを、デザインデータそのものをコード化する形で自動化します。

MCPを経由することで、Figmaのデザインツリー・コンポーネント構造・レイアウト設定がAIに正確に認識され、翻訳精度が格段に向上します。

なぜデザインデータの品質がAI出力に直結するのか

AIがFigmaデータから実装コードを生成する際、以下の情報を活用します：

フレーム・グループ構造（ネストの深さ、階層の論理性）
コンポーネント・バリアント定義（リユーザビリティ）
AutoLayout設定（CSSのFlexbox、SwiftUIのVStack/HStackに相当）
Variables・トークン（カラー、フォントサイズ、スペーシング）
コンストレイント・レスポンシブ設定（モバイル対応）
アノテーション・コメント（仕様記録）

これらが丁寧に整理されていると、AIは正確な実装仕様を推測でき、修正が少なくなります。逆に、デザインが雑だと、AIも雑なコードを生成してしまいます。

AutoLayout が CSS Flexbox / SwiftUI に対応する理由

Figma の AutoLayout は、CSS Flexbox や SwiftUI の VStack/HStack と同じ宣言的レイアウト体系に基づいています：

AutoLayout設定
├─ Direction: horizontal / vertical (flex-direction)
├─ Padding: 内側の余白 (padding)
├─ Gap: 要素間の間隔 (gap)
└─ Alignment: 配置 (align-items, justify-content)

AI は Figma の AutoLayout を検出すると、対応する CSS/SwiftUI の記述に直接翻訳できます。AutoLayout が丁寧に組まれているフレームは、AI が生成するコードも構造的で保守性の高い状態になります。

Figma Variables のバインド: デザイン定数が実装定数に変換される

Figma Variables を使用すると、デザイン上で定義した値（カラー、寸法、アニメーション等）が、Dev Mode を経由して AI に伝達されます。

例えば、Figma で以下のように定義した場合：

Variables
├─ Semantic/Primary: #2563EB
├─ Semantic/Destructive: #EF4444
├─ Action/Button/Padding: 12px
└─ Action/Border/Radius: 8px

AI が Dev Mode MCP で読み込むと、これらの変数名・値が実装コードに反映され、CSS 変数やTypeScriptのdefault exportとして自動生成されます。デザイン更新時は、Figma の Variables を修正するだけで、実装コード側も一貫性が保たれます。

Code to Canvas: AIが生成したUIをFigmaに取り込む

最近のワークフロー拡張として、Code to Canvas 機能があります。これは逆方向のフロー：Claude Code（またはAntigravity IDE）で生成したReact/SwiftUIコードを、Figmaの編集可能なフレームとして自動取り込みする仕組みです。

実装からデザインへのフィードバックループが確立でき、デザイン・実装の乖離が減ります。

Antigravity IDE から Figma MCP を利用する設定手順

Antigravity IDE（または Claude Code）で Figma MCP を使用する場合、MCP設定JSONを .cursorrules または IDE の設定ファイルに記述します：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["node_modules/@figma/sdk/dist/mcp.js"],
      "env": {
        "FIGMA_TOKEN": "YOUR_FIGMA_API_TOKEN"
      }
    }
  }
}

YOUR_FIGMA_API_TOKEN は Figma の Settings → API keys から取得します。環境変数として安全に管理し、決してコード内にハードコードしないでください。

設定後、IDE 内チャットで以下のように指示できます：

Figma ファイルから Dev Mode を読み込み、
このレイアウトに対応する React コンポーネントを生成してください。
Variables は CSS カスタムプロパティとして実装してください。

Stitch（Antigravityの統合機能）との連携可能性

Antigravity IDE には、Figma・実装・テスト・デプロイを統合する Stitch 機能があります。将来的には、以下のような統合フローが可能になる見通しです：

デザイン入力: Figma ファイルを指定
自動実装: Dev Mode MCP で読み込み、React/SwiftUI コードを生成
自動テスト: VRT（Visual Regression Testing）で UI 品質を検証
自動デプロイ: テスト合格後、CI/CD でプロダクション反映

自作プラグインや Check Design 機能による品質検証

Figma には、プラグインシステムや Check Design 機能があり、デザイン品質を事前にチェックできます：

コンポーネント未設定チェック: 繰り返し使用される要素がコンポーネント化されているか
マージン・パディング一貫性: 全フレームで AutoLayout が正しく設定されているか
色・フォント規格外: Semantic Variables に従わない直接指定がないか
命名規則: フレーム・グループが適切に命名されているか

これらのチェックを Dev Mode MCP 前に実施することで、AI 出力品質がさらに向上します。

コード例: React コンポーネント生成

以下は、Figma の Dev Mode データから AI が生成した React コンポーネントの簡略例です：

// Card.tsx
import React from 'react';
 
interface CardProps {
  title: string;
  description: string;
  variant?: 'primary' | 'secondary';
}
 
export const Card: React.FC<CardProps> = ({
  title,
  description,
  variant = 'primary',
}) => {
  const bgColor = variant === 'primary' ? '#2563EB' : '#F3F4F6';
  const textColor = variant === 'primary' ? '#FFFFFF' : '#1F2937';
 
  return (
    <div
      style={{
        padding: '12px',
        borderRadius: '8px',
        backgroundColor: bgColor,
        color: textColor,
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
      }}
    >
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
};

上記は Figma 内の Variables と AutoLayout から自動生成される典型例です。

全体を振り返って

Figma Dev Mode MCP × AI コード生成は、デザイン品質をそのまま実装品質に反映させる強力なツールです。デザイナーとエンジニアの協働が密になり、修正ループが短縮され、製品のリリース速度が加速します。

AutoLayout・Variables・アノテーションを丁寧に整理するデザイン運用が、そのまま AI 出力品質につながる時代。デザインシステムを「作品」として磨くことの重要性がかつてなく高まっています。

参考資料

Figma Dev Mode MCP 公式ドキュメント
Claude Code × Figma 統合ガイド
Qiita「レコチョク・デザインシステム運用 Tips」シリーズ