Figma MCP使い方｜Dev ModeのデザインをClaude/Cursorにコード化させる

デザインカンプをAIにコード化させるとき、スクリーンショットを貼るだけでは余白も色もコンポーネント名もすべて「AIの推測」になります。Figma MCP（公式のDev Mode MCP Server）は、Figmaの構造化データ——変数・Auto Layout・コンポーネント——を直接Claude CodeやCursorに渡し、この推測を消します。本記事では Figma MCP の使い方を、公式ドキュメントの構成に沿って設定から生成フローまで整理します。

MCPの基礎や他のサーバーも見たい方は、MCPサーバーとは｜仕組み・代表的なサーバー一覧・自作手順 を先に読むと位置づけが分かります。

この記事は「MCP（Model Context Protocol）」クラスタの1本です。全体像は MCPサーバーの作り方2026年完全ガイド：TypeScript・Python両対応チュートリアル にまとめています。

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版を検討する、という優先順位です。

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から接続できるようになります。

実際の生成フロー——フレーム選択からコードまで

導入後の基本的な流れはシンプルです。

ポイントは、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つを選択してコード化を試し、スクショ渡しとの差を確認するのがおすすめです。

同じクラスタの関連記事

同じ「MCP（Model Context Protocol）」クラスタで、実測値を本文に持っている記事を挙げておく。

・Agent Skills（SKILL.md のオープン標準）

参照ソース

・figma/mcp-server-guide — Figma公式ガイド（GitHub）
・Guide to the Figma MCP server — Figma Learn 公式ヘルプ ・figma/mcp-server-guide（GitHub） — 本記事が 2026-10-10 に測り直した対象
・LICENSE の実体 — 手順③で読んだファイル

2026-10-10 に測り直した手順

本記事の数値は、次の3コマンドをこの順に実行して得たものだ。読者が同じ手順で再確認できる。

# ① 浅く clone する（履歴50件ぶんだけ取る）
git clone --depth 50 https://github.com/figma/mcp-server-guide /tmp/mcp-server-guide

# ② 直近のコミット日を見る → 2026-10-05
git -C /tmp/mcp-server-guide log -1 --format=%ad --date=short

# ③ ライセンスの実体と規模を見る → LICENSE ファイルなし / 219 ファイル
head -3 /tmp/mcp-server-guide/LICENSE* 2>/dev/null; git -C /tmp/mcp-server-guide ls-files | wc -l

③が肝心で、バッジや紹介文ではなく LICENSE ファイルの中身を読む。今回 figma/mcp-server-guide はOSI 準拠のオープンソースではなかった。