デザインカンプをAIにコード化させるとき、スクリーンショットを貼るだけでは余白も色もコンポーネント名もすべて「AIの推測」になります。Figma MCP（公式のDev Mode MCP Server）は、Figmaの構造化データ——変数・Auto Layout・コンポーネント——を直接Claude CodeやCursorに渡し、この推測を消します。本記事では Figma MCP の使い方を、公式ドキュメントの構成に沿って設定から生成フローまで整理します。
MCPの基礎や他のサーバーも見たい方は、MCPサーバーとは｜仕組み・代表的なサーバー一覧・自作手順 を先に読むと位置づけが分かります。
Figma MCPとは——何ができるMCPサーバーか
Figma MCP（Dev Mode MCP Server）は、Figmaが公式提供するMCPサーバーです。AIコーディングツールに対して、デザインファイルの中身を「見た目」でなく「データ」として渡します。読み取れる主な情報は次の通りです。
・コンポーネント：ボタンやカードなど、再利用単位の構造
・デザイン変数（Variables）：色・スペーシング・タイポグラフィのトークン
・レイアウトデータ：Auto Layoutの方向・間隔・制約
・FigJam / Makeリソース：付随するボードや生成物
これらを踏まえて、選択したフレームからコードを生成したり、Code Connectで実際のコードベースのコンポーネントと対応づけたりできます。単なる画像認識ではなく、デザインの意図をそのままコードに落とすのが狙いです。
remote版とdesktop版——2つのサーバーの違い
Figma MCPには2つの提供形態があります。まずどちらを使うかを決めます。
| 項目 | remote（リモート）版 | desktop（デスクトップ）版 |
|---|---|---|
| 位置づけ | 推奨・標準構成 | ローカル完結したい場合の代替 |
| 機能の広さ | 最も広い | 一部に限定 |
| 接続方法 | ブラウザ経由でFigmaへ | Figmaデスクトップアプリがローカルにサーバーを起動 |
| 準備 | プラグイン導入 | Dev Mode切替＋右サイドバーでMCP有効化 |
特別な理由がなければremote版を選びます。オフラインやローカル完結の要件があるときにdesktop版を検討する、という優先順位です。
Claude Code / Cursorでの設定——Figma MCPの使い方
Claude Codeでは、公式プラグインの導入が最も簡単です。MCP設定とAgent Skillsがまとめて入ります。
# Claude Code に Figma 公式プラグインを導入（MCP設定＋Skillsを同梱）
claude plugin install figma@claude-plugins-official
Cursorでも同様に、FigmaプラグインをインストールするとMCPサーバー設定と定型ワークフロー用のスキルが入ります。desktop版を使う場合の手順は次の通りです。
・Figmaデスクトップアプリをインストールして開く
・Figma Designファイルを開き、キャンバスで何も選択していない状態にする
・ツールバーのトグルでDev Modeに切り替える
・右サイドバーでMCPサーバーを有効化する
有効化するとローカルにMCPエンドポイントが立ち、Claude Code / Cursorから接続できるようになります。
実際の生成フロー——フレーム選択からコードまで
導入後の基本的な流れはシンプルです。
コンポーネントを選択] --> B[Claude Code/Cursorに
コード化を依頼] B --> C[Figma MCPが変数・
レイアウトを構造データで供給] C --> D[デザイントークンに
沿ったコードを生成] D --> E[Code Connectで
実コンポーネントと整合]
ポイントは、AIに渡るのが「画像」ではなく「変数とレイアウトのデータ」である点です。これにより、ハードコードされた#3B82F6ではなくcolor.primaryのようなトークン参照のコードが出やすくなります。
注意点
・公式と非公式を区別する：本記事は公式Dev Mode MCP Serverが対象。コミュニティ製のFramelink（GLips/Figma-Context-MCP）など別実装もあり、機能や対応範囲が異なる
・生成は下書き：MCPは精度を上げるが、命名規則や状態管理はレビューが必要。そのまま本番投入はしない
・プランと権限：Dev Mode利用にはFigma側の権限・プラン条件がある。チーム設定を事前に確認する
まとめ
Figma MCPは、デザインとコードの間にある「推測」を消すためのMCPサーバーです。
・Figmaの変数・Auto Layout・コンポーネントを構造データとしてAIに渡す
・remote版が標準、desktop版はローカル完結用の代替
・Claude Code / Cursorとも公式プラグイン導入が最短ルート
・Code Connectで実コンポーネントと整合を取り、トークン参照のコードを引き出す
まずは小さなコンポーネント1つを選択してコード化を試し、スクショ渡しとの差を確認するのがおすすめです。
参照ソース
・figma/mcp-server-guide — Figma公式ガイド（GitHub）
・Guide to the Figma MCP server — Figma Learn 公式ヘルプ
