Figma MCPでデザインとコード開発を統合する完全ガイド - AI時代の新しいワークフロー

要約

Figma MCPは、FigmaのデザインデータをAI開発ツールに直接提供し、デザインに忠実なコードを自動生成できる革新的な統合機能です。本記事では、Claude CodeやCursorなどのAIツールでFigma MCPを設定し、デザインからコードへの変換プロセスを効率化する完全手順を解説します。

読者が得られる知識:

• Figma MCPの仕組みと利点の理解
• Claude CodeやCursorでの設定手順
• デザインシステムとコード生成の最適化方法
• 実践的な活用例とベストプラクティス

想定読者レベル: 中級 所要時間: 12分

目次

1. Figma MCPとは何か
2. MCPアーキテクチャの理解
3. 環境準備と前提条件
4. Figma MCPの設定手順
5. 実践的な使用方法
6. デザインのベストプラクティス
7. トラブルシューティング
8. まとめ

Figma MCPとは何か

Figma MCPは、Model Context Protocol（MCP）を使用してFigmaのデザインデータをAI開発ツールに提供する統合機能です。2024年12月にベータ版として発表され、デザインと開発の間のギャップを埋める画期的なソリューションとして注目を集めています。

主な特徴

1. デザインコンテキストの直接アクセス

   • Figmaのデザインデータをリアルタイムで取得
   • レイヤー構造、スタイル情報、コンポーネント定義を完全に理解

2. AI支援によるコード生成

   • デザインに基づいたReactやTailwind CSSコードを自動生成
   • デザイントークンやコンポーネント構造を正確に反映

3. 開発ワークフローの統合

   • VS Code、Cursor、Windsurf、Claude Codeなどの主要ツールに対応
   • デザインの選択やURLから直接コード生成を開始

MCPアーキテクチャの理解

MCPは「AIのUSB-C」とも呼ばれ、AI システムと外部ツールを接続する標準プロトコルです。

graph TB
    subgraph "開発環境"
        A[Claude Code/Cursor] --> B[MCP Client]
    end
    
    subgraph "MCP Layer"
        B --> C[MCP Host]
        C --> D[MCP Server]
    end
    
    subgraph "外部システム"
        D --> E[Figma API]
        E --> F[デザインデータ]
    end
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#9f9,stroke:#333,stroke-width:2px

3つの主要コンポーネント

1. MCP Host

   • クライアントとサーバー間の通信を管理
   • パーミッションとセキュリティを制御
   • Claude DesktopやVS Codeなどがホストとして機能

2. MCP Client

   • サーバーとの接続を確立・維持
   • LLMとサーバー間のリクエスト/レスポンスを仲介
   • 1つのクライアントが1つのサーバーに対応

3. MCP Server

   • 外部システム（Figma）に直接接続
   • デザインデータをLLMが理解できる形式に変換
   • SSE（Server-Sent Events）プロトコルで通信

環境準備と前提条件

必要な環境

1. Figmaデスクトップアプリ

   • Web版では使用不可
   • 最新バージョンにアップデート

2. 対応する開発ツール

   • Claude Code
   • VS Code（Copilot拡張機能）
   • Cursor
   • Windsurf

3. Node.js環境

   • Node.js 18以上
   • npm または pnpm

インストール確認

# Node.jsバージョン確認
node --version
# v18.0.0以上であることを確認

# Figmaデスクトップアプリの確認
# アプリケーションフォルダでFigma.appを確認

Figma MCPの設定手順

Claude Codeでの設定

1. 設定ファイルの作成

# Claude Code設定ディレクトリに移動
cd ~/Library/Application\ Support/Claude

# claude_desktop_config.jsonを編集

2. MCP設定の追加

{
  "mcpServers": {
    "figma": {
      "command": "sse",
      "args": ["http://localhost:3845/sse"],
      "env": {},
      "disabled": false
    }
  }
}

Cursorでの設定

1. Cursor設定を開く

   • Cmd+Shift+P → “Cursor: Settings”

2. MCP設定を追加

{
  "mcp": {
    "servers": {
      "figma": {
        "type": "sse",
        "url": "http://localhost:3845/sse"
      }
    }
  }
}

Figmaデスクトップアプリの設定

1. Dev Modeを有効化

   • Figmaでデザインファイルを開く
   • 右上の”Dev Mode”トグルをON

2. MCPサーバーの起動確認

   • Figmaアプリが自動的にローカルサーバーを起動
   • ポート3845でSSE接続を待機

実践的な使用方法

方法1: Figma内での選択から生成

sequenceDiagram
    participant User
    participant Figma
    participant MCP
    participant Claude
    
    User->>Figma: フレームを選択
    User->>Claude: "選択したデザインを実装して"
    Claude->>MCP: デザイン情報をリクエスト
    MCP->>Figma: 選択されたフレームのデータ取得
    Figma-->>MCP: デザインデータ（JSON）
    MCP-->>Claude: 構造化されたデザイン情報
    Claude-->>User: 生成されたコード

実行例:

// Claudeへのプロンプト例
"選択したカードコンポーネントをReactとTailwind CSSで実装してください"

// 生成されるコード例
export function ProductCard({ title, price, image }) {
  return (
    <div className="rounded-lg shadow-md bg-white p-4 hover:shadow-lg transition-shadow">
      <img 
        src={image} 
        alt={title}
        className="w-full h-48 object-cover rounded-md mb-4"
      />
      <h3 className="text-lg font-semibold text-gray-900 mb-2">
        {title}
      </h3>
      <p className="text-xl font-bold text-blue-600">
        ¥{price.toLocaleString()}
      </p>
    </div>
  );
}

方法2: FigmaリンクからのURL指定

# FigmaでフレームのURLをコピー
# 例: https://www.figma.com/file/xxxxx/Design-System?node-id=123:456

# Claudeへのプロンプト
"このFigmaデザインを実装してください: [URL]"

MCPが提供するデザイン情報

MCPサーバーは以下の情報をAIツールに提供します：

1. 視覚的情報

   • レイヤー構造とネスト関係
   • 位置、サイズ、余白の情報
   • 色、フォント、影などのスタイル

2. セマンティック情報

   • レイヤー名とテキストコンテンツ
   • コンポーネント定義と変数
   • Auto Layoutの設定

3. コード生成ヒント

   • Code Connect情報（設定されている場合）
   • デザイントークンとの関連付け
   • レスポンシブ設定の意図

デザインのベストプラクティス

1. コンポーネントの活用

✅ 良い例:
- ButtonPrimary (コンポーネント)
- CardContainer (コンポーネント)
- InputField (コンポーネント)

❌ 悪い例:
- Rectangle 12
- Group 5
- Frame 123

2. セマンティックな命名

✅ 推奨される命名:
- NavigationHeader
- ProductCardGrid
- UserProfileSection

❌ 避けるべき命名:
- Frame 1
- Group Copy 2
- Rectangle

3. 変数とトークンの使用

// Figmaの変数設定例
--color-primary: #3B82F6;
--spacing-base: 8px;
--radius-medium: 8px;
--font-size-body: 16px;

4. Auto Layoutの活用

graph TD
    A[Container - Auto Layout] --> B[Header - Fixed Height]
    A --> C[Content - Fill Container]
    A --> D[Footer - Hug Contents]
    
    style A fill:#e1f5fe,stroke:#01579b,stroke-width:2px

5. アノテーションの追加

Dev Resourcesを使用して、デザインの意図を明確に伝える：

• インタラクションの詳細
• 状態遷移の説明
• レスポンシブ時の挙動
• アクセシビリティ要件

トラブルシューティング

よくある問題と解決法

1. MCPサーバーに接続できない

# ポートが使用されているか確認
lsof -i :3845

# Figmaデスクトップアプリを再起動
# Dev Modeを一度OFFにしてからONに戻す

2. デザイン情報が正しく取得できない

チェックリスト：

• Figmaデスクトップアプリを使用している
• Dev Modeが有効になっている
• フレームまたはレイヤーが選択されている
• MCPサーバーが起動している（localhost:3845）

3. 生成されたコードがデザインと異なる

改善方法：

1. レイヤー名を具体的に設定
2. Auto Layoutを適切に使用
3. 変数とトークンを定義
4. Code Connectを設定（可能な場合）

パフォーマンス最適化

1. 大規模ファイルの処理

   • 必要な部分のみを選択
   • コンポーネントを分割して管理

2. キャッシュの活用

   • 頻繁に使用するデザインはコンポーネント化
   • 生成されたコードをテンプレートとして保存

まとめ

Figma MCPは、デザインと開発の間の溝を埋める革新的なツールです。主なメリットとして：

1. 開発時間の削減: デザインからコードへの変換時間を60-70%短縮
2. 一貫性の向上: デザインシステムに忠実なコード生成
3. コラボレーション強化: デザイナーと開発者の共通言語

今後の展望

• より多くのフレームワークへの対応
• デザインシステムとの深い統合
• リアルタイムコラボレーション機能

Figma MCPを活用することで、AIアシスタントがデザインの意図を正確に理解し、品質の高いコードを生成できるようになります。これにより、開発者はより創造的な作業に集中でき、プロダクトの品質向上につながります。

参考リンク

• Figma Dev Mode MCP Server公式ドキュメント
• Model Context Protocol仕様
• Claude Code設定ガイド