FigmaとClaude Codeを連携する方法｜MCP設定と使い方

FigmaとClaude Codeは、Figma公式の「Dev Mode MCPサーバー」を使って連携できます。連携すると、Claude CodeがFigma上のデザインを直接読み取り、レイアウト・色・タイポグラフィを反映したReact＋Tailwindなどの実装コードを生成できるようになります。

ただし、この連携方法はここ1年で仕様が大きく変わりました。「デスクトップアプリ必須」「get_codeツールを使う」と書かれた解説記事は旧仕様のままで、2026年現在の推奨はリモートMCPサーバー（デスクトップアプリ不要）です。古い手順のまま設定すると、接続できずにつまずきます。

この記事では、Figma公式ドキュメントとAnthropic公式ドキュメント（いずれも2026年7月確認）だけを根拠に、接続コマンド・必要なプラン・実践ワークフロー・旧仕様との違いまでを整理します。読み終える頃には、自分の環境でFigmaデザインをClaude Codeに読ませてコード化できる状態になります。

Figma Dev Mode MCPサーバーとは

Figma Dev Mode MCPサーバーとは、FigmaのデザインデータをMCP（Model Context Protocol）経由でAIコーディングツールに渡すための公式サーバーです。Figma公式ブログ（2025年6月4日）で公開ベータとして発表され、Claude Codeのほか、VS Code（Copilot）・Cursor・Windsurfなどのエージェント型コーディングツールに対応しています。

2026年7月時点でもベータ扱いは続いており、Figma開発者ドキュメントには「ベータ期間中は無料。将来的に従量課金の有料機能になる予定」と明記されています。正式GA（一般提供）の宣言はまだ出ていないため、料金体系は今後変わる可能性があります。

なお、開発者側の需要は公式データにも表れています。Figma公式のConfig 2025プレスリリース（2025年5月7日）によると、2024年第4四半期時点で月間アクティブユーザーの約3分の2がデザイナー以外の職種で、そのうち約30%が開発者を自認しています。デザインツールであるFigmaに「実装者向けの出口」を作るのがDev Mode MCPサーバーの位置づけです。

Code Connect・Figma Makeとの違い

Figmaには似た名前のAI・開発者向け機能が複数あり、混同しやすいので先に整理します。

機能	役割	本記事との関係
Dev Mode MCPサーバー	デザイン文脈をClaude Code等のAIツールに渡す仕組み	本記事の主題
Code Connect	自リポジトリの実装済みコンポーネントをFigmaに紐付け、自動生成コードの代わりに実コードを表示する仕組み	MCP連携の精度向上に利用（後述）
Figma Make	テキスト説明や既存デザインから動くプロトタイプ／アプリを生成するAIツール	別プロダクト。Claude Code連携とは独立

MCPそのものの仕組み（サーバーの種類・scope・設定ファイルの実体）は、Claude CodeのMCP・Hooks・Skills活用ガイドで詳しく解説しています。MCPに初めて触れる方はあわせて読むと理解が早くなります。

連携でできること

連携すると、Claude CodeはFigmaのMCPサーバーが公開するツール群を呼び出せるようになります。Figma開発者ドキュメント（2026年7月確認）に掲載されているツールは全部で23種類あり、実務でよく使うのは次の8つです。

ツール名	できること
get_design_context	選択したフレームのデザイン文脈を取得してコード生成（デフォルト出力はReact＋Tailwind）
get_screenshot	選択範囲のスクリーンショットを取得（生成結果の見た目検証に使う）
get_variable_defs	カラー・スペーシング等の変数／スタイル定義を取得
get_metadata	レイヤーのID・名前・型・位置・サイズをXMLで取得
download_assets	画像・SVGなどのアセットをダウンロード
get_code_connect_map	Code Connectで紐付けた実装コンポーネントとの対応表を取得
generate_figma_design	逆方向：コードや指示からFigmaデザインを生成
whoami	認証中のアカウント情報を確認

中心になるのはget_design_contextです。Figma開発者ドキュメント（2026年7月確認）によると、get_design_contextが生成するコードのデフォルト形式はReact＋Tailwindです。VueやプレーンCSSなど別のスタックで受け取りたい場合は、プロンプトで明示的に指定します（後述の「精度を上げるコツ」参照）。

事前準備：必要なプランとレート制限

連携自体はどのFigmaプランでも試せますが、実用にはシートの種類が重要です。Figma開発者ドキュメント（2026年7月確認）によると、実用的な利用にはDevシートまたはFullシートが必要で、ViewシートとCollabシートは全プラン共通で月6回までしかMCPツールを呼び出せません。

プラン（Dev／Fullシート）	1日あたり上限	1分あたり上限
Starter	200回	10回
Professional	200回	15回
Organization	600回	20回
Enterprise	公式表に記載なし	公式表に記載なし

1分あたりの制限は1日あたりの制限とは別に適用されます。なお、add_code_connect_map・generate_figma_design・whoamiの3ツールはレート制限の対象外です。準備として必要なものは次の3点だけです。

DevシートまたはFullシートのFigmaアカウント
Claude Code（最新版にアップデートしておく）
コード化したいFigmaファイルへのアクセス権

Figmaをこれから本格的に使い始める方は、Canva・Figma・STUDIOの違いと使い分けガイドでFigmaの得意分野を先に押さえておくと、デザインデータ側の準備がスムーズです。

接続手順①：リモートMCPサーバー（推奨）

2026年現在の推奨はリモートMCPサーバーです。Figma開発者ドキュメント（2026年7月確認）によると、リモートサーバーは https://mcp.figma.com/mcp で提供され、Figmaデスクトップアプリを入れなくても接続できます。手順は次の3ステップです。

ターミナルで登録コマンドを実行する（Claude Codeのセッション内ではなく、通常のシェルで実行）
Claude Codeを起動し /mcp からfigmaを選んで認証する
ブラウザで開く認証ページで「Allow access」を押す

登録コマンドは次の1行です。

claude mcp add --transport http figma https://mcp.figma.com/mcp

このままだと現在のプロジェクトだけで有効になります。すべてのプロジェクトで使いたい場合は –scope user を付けます。

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

コマンド実行後にClaude Codeを起動し、スラッシュコマンド /mcp を入力してfigmaを選択し、Authenticateを選ぶとブラウザが開きます。「Allow access」を許可して「Authentication successful. Connected to figma」と表示されれば接続完了です。コマンドの書式（–transport http や scope の考え方）はAnthropic公式のMCPクイックスタート（2026年7月確認）に準拠しています。

プラグイン経由で導入する方法

Figmaヘルプ（2026年7月確認）では、Claude Codeの公式プラグインとして導入する方法も案内されています。この場合は次のコマンドを使います。

claude plugin install figma@claude-plugins-official

導入後は /plugin コマンドのInstalledタブからfigmaを選び、Enterで認証フローに進みます。どちらの方法でも接続結果は同じなので、MCPを個別管理したい方はclaude mcp add、プラグインでまとめて管理したい方はplugin installを選べば問題ありません。

接続手順②：デスクトップ（ローカル）サーバー

Figmaデスクトップアプリを使ったローカルサーバー経由の接続も引き続き利用できます。Figma開発者ドキュメント（2026年7月確認）によると、ローカルサーバーは http://127.0.0.1:3845/mcp で動作します。手順は次のとおりです。

FigmaデスクトップアプリでDev Modeを開く（ショートカットはShift+D）
インスペクトパネルの「MCP server」欄で「Enable desktop MCP server」を有効化する
ターミナルで登録コマンドを実行する

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

リモートとデスクトップの使い分けの基準は次のとおりです。迷ったらリモートで問題ありません。

項目	リモート（推奨）	デスクトップ
デスクトップアプリ	不要	必須（起動中のみ動作）
対象の指定方法	フレームへのリンク（URL）を渡す	アプリ上の選択範囲がそのまま対象
向いている人	ブラウザ版Figma利用者・チーム共有リンクで作業する人	Figmaアプリを常時開いてデザインを見ながら実装する人

実践ワークフロー：デザインをコードにするまで

接続できたら、実際にデザインをコード化してみます。リモートサーバーの場合、対象の指定は「フレームやレイヤーへのリンク」で行います。ワークフローは次の5ステップです。

Figmaでコード化したいフレームを右クリックし「Copy link to selection」でリンクをコピーする（node ID付きURLが取れる）
Claude Codeのプロンプトにリンクを貼り、実装指示を書く
Claude Codeがget_design_contextを呼び、デザイン文脈からコードを生成する
get_screenshotで元デザインのスクリーンショットを取らせ、生成結果と見た目を突き合わせる
プロジェクトの既存コンポーネント・命名規則に合わせてリファクタリングを指示する

プロンプトの例を挙げます。リンクと一緒に、スタック・ファイルの置き場所・既存規約を伝えるのがポイントです。

このFigmaフレームを実装してください。
https://www.figma.com/design/xxxx?node-id=123-456

- Next.js（App Router）+ TypeScript + Tailwind
- components/pricing/PricingCard.tsx として作成
- 色とスペーシングはFigmaの変数定義（get_variable_defs）を参照して
  tailwind.config の既存トークンにマッピングすること
- 実装後、get_screenshot で元デザインと見た目を比較して差分を報告すること

生成されたコードは「一発で完成」ではなく「精度の高い下書き」と考えるのが実務的です。生成→スクリーンショット比較→修正指示のループを1〜2回回すと、手書きよりはるかに速く元デザインに寄せられます。

精度を上げるコツ

そのまま使っても動きますが、次の3点を押さえると生成コードの質が大きく変わります。

変数・スタイル定義を渡す

get_variable_defsでFigma側のカラー・スペーシング変数を取得させ、プロジェクトのデザイントークン（CSSカスタムプロパティやtailwind.configのtheme）にマッピングするよう指示します。これを省くと、生成コードがマジックナンバーの16進カラーだらけになり、あとで全部置換する羽目になります。

Code Connectで実コンポーネントに紐付ける

Code Connect（Figma開発者ドキュメント）で自リポジトリのButtonやCardをFigmaコンポーネントに紐付けておくと、MCP経由の生成時にget_code_connect_mapで対応表が参照され、「新しいButtonをゼロから発明する」のではなく「既存のButtonを使う」コードが出やすくなります。デザインシステムを運用しているチームほど効果が大きい設定です。

スタックはプロンプトで明示する

デフォルト出力はReact＋Tailwindのため、Vue・Svelte・プレーンHTML/CSSで受け取りたい場合は毎回プロンプトで指定します。プロジェクトのCLAUDE.mdに「Figmaからの実装はVue 3＋scoped CSSで行う」のように書いておけば指定を省略できます。こうした指示の恒常化には、Claude CodeのSkill・Loop・Workflowの使い分けガイドで紹介している仕組みが役立ちます。

旧仕様との違いに注意

Figma MCPサーバーは2025年のベータ開始以降に仕様が大きく変わっており、日本語の解説記事の多くは旧仕様のままです。古い記事を参考にする場合は、次の対応表で読み替えてください。

項目	旧仕様（2025年ベータ初期）	現行仕様（2026年7月確認）
推奨サーバー	デスクトップアプリ必須のローカルサーバーのみ	リモートサーバー（mcp.figma.com）が推奨。アプリ不要
コード生成ツール	get_code	get_design_context
画像取得ツール	get_image	get_screenshot
対象の指定	デスクトップアプリ上の選択範囲のみ	リモートはリンク指定（Copy link to selection）が基本

「get_codeが呼ばれない」「デスクトップアプリを入れないと使えないのでは」という疑問は、ほとんどがこの仕様変更を知らないことが原因です。一次情報であるFigma開発者ドキュメントは頻繁に更新されるため、設定でつまずいたらまず公式ドキュメントの現行記述を確認するのが最短ルートです。

よくあるエラーと対処法

設定時・利用時につまずきやすいポイントを症状別にまとめます。

症状	原因と対処
claude mcp addが効かない	Claude Codeのセッション内で実行している。通常のターミナル（シェル）で実行し、Claude Codeを再起動する
認証が完了しない	/mcp → figma → Authenticateを再実行し、ブラウザで「Allow access」まで進める。別アカウントでFigmaにログイン中の場合は一度ログアウトする
ツールがエラーを返す（レート制限）	1分あたり上限（Starter 10回／Professional 15回等）に到達。少し待って再実行。頻発するならプロンプトをまとめて呼び出し回数を減らす
月6回で使えなくなった	View／Collabシートの上限。DevまたはFullシートに切り替える
デザインが取得されない	リモート接続で対象リンクを渡していない。フレームを右クリック→「Copy link to selection」のURLをプロンプトに含める
ローカルサーバーに接続できない	デスクトップアプリが未起動、またはDev Modeの「Enable desktop MCP server」が無効。アプリ起動と設定を確認する

FigmaとClaude Codeの連携に関するFAQ

Q. FigmaとClaude Codeの連携は無料で使えますか？

MCPサーバー自体はベータ期間中は無料です（Figma開発者ドキュメント・2026年7月確認）。ただし実用的な回数を使うにはDevまたはFullシートが必要で、ViewシートとCollabシートは月6回までに制限されます。将来的には従量課金の有料機能になる予定と公式に告知されています。

Q. Figmaのデスクトップアプリは必須ですか？

必須ではありません。現在推奨されているリモートMCPサーバー（https://mcp.figma.com/mcp）はデスクトップアプリなしで接続できます。「アプリ必須」は2025年ベータ初期の旧仕様で、現在はブラウザ版Figmaだけでも連携可能です。

Q. 生成されるコードの形式は選べますか？

選べます。デフォルトはReact＋Tailwindですが、プロンプトで「Vue 3で」「プレーンHTML/CSSで」のようにスタックを明示すれば、その形式で生成されます。毎回指定するのが面倒な場合はプロジェクトのCLAUDE.mdに既定スタックを書いておくと省略できます。

Q. どのFigmaプランなら実用的に使えますか？

DevまたはFullシートがあれば、Starterプランでも1日200回・毎分10回まで使えます（Figma開発者ドキュメント・2026年7月確認）。個人の検証ならStarterで十分始められ、チームで日常的に使うならProfessional以上が現実的です。

Q. CursorなどClaude Code以外のツールでも使えますか？

使えます。Dev Mode MCPサーバーはMCP対応クライアント共通の仕組みで、公式にVS Code（Copilot）・Cursor・Windsurfへの対応が明記されています。本記事のClaude Code向けコマンドを、各ツールのMCP設定に読み替えれば同じサーバーに接続できます。

Q. Figma MakeとMCPサーバー連携はどう違いますか？

Figma MakeはFigma内でプロトタイプやアプリを生成する独立したAIプロダクトで、成果物はFigma側に生まれます。一方MCPサーバー連携は、自分のリポジトリでClaude Codeが既存コードベースの規約に沿った実装コードを書くための仕組みです。実務のプロダクションコードに組み込むならMCP連携が適しています。

まとめ

FigmaとClaude Codeの連携は、リモートMCPサーバーの登場で「デスクトップアプリを用意して設定する作業」から「コマンド1行と認証だけ」に簡略化されました。要点をまとめます。

接続は claude mcp add –transport http figma https://mcp.figma.com/mcp の1行＋ブラウザ認証
実用にはDev／Fullシートが必要（View／Collabは月6回まで）
対象指定は「Copy link to selection」のリンク渡しが基本
精度は「変数マッピング・Code Connect・スタック明示」で大きく上がる
get_code・デスクトップ必須と書かれた記事は旧仕様。現行はget_design_context・リモート推奨

デザインからコードへの橋渡しは、AIコーディングの中でも投資対効果が高い領域です。まずは小さなコンポーネント1つをリンク渡しで実装させるところから試してみてください。

FigmaとClaude Codeを連携する方法｜Dev Mode MCPでデザインをコード化するワークフロー