古い手順のまま desktop サーバーを足して、30 分つまずいた夜でした
デザインファイルのリンクを Claude Code に渡せば、あとはコードが出てくるはずです。そう思い込んで、手元の記事どおりに --transport sse と /sse の URL でデスクトップ版の MCP サーバーを登録したことがあります。/mcp の一覧には名前が出るのに、ツールは一つも読み込まれません。設定の打ち間違いを疑って三度書き直し、原因が「手順の側が古かった」と分かったのは、公式の手順を読み直してからでした。
この記事は、同じところで手が止まっている方に向けて、いまの公式手順に合わせて書き直したものです。接続方式は二つ、できることは方式によって違います。どちらに何を任せるかを先に決めておく——その線引きだけで、つまずきの大半は避けられます。
最初にお伝えしたいのは、リモートサーバーを基本にしてください、ということです。Figma 自身もそう案内していますし、キャンバスへ書き戻す機能はデスクトップ版では使えません。
先に答えだけ書いておきます
つまずきやすい点を、先に表にします。詳しい理由は後ろの各節に書きました。
| 症状・疑問 | 原因の目安 | 見直す場所 |
|---|---|---|
| デスクトップ版が一覧に出るのにツールが空 | 古い sse 形式の登録を使っている | URL は 127.0.0.1:3845/mcp、transport は http |
| デスクトップ版に接続できない | Dev Mode でサーバーを有効にしていない | Figma 側で Dev Mode を開き、右サイドバーから有効化 |
| UI を Figma へ書き戻せない | 書き込みはデスクトップ版が対応していない | リモートサーバーに切り替える |
| 数回使っただけで「上限です」と出る | 席の種類（View/Collab か Full/Dev か）による | 後述の上限表を確認 |
| 別のプロジェクトで figma が見つからない | 手動追加は既定で現在のプロジェクト限定 | --scope user を付けて登録し直す |
前提条件
始める前に、次の三つを確かめてください。
- Claude Code が入っていること（未導入でしたら 導入ガイド からどうぞ）
- Figma のアカウントと、対象ファイルへのアクセス権があること
- デスクトップ版を使う場合は、最新の Figma デスクトップアプリと Dev または Full シートがあること
MCP サーバーから読めるのは、自分がすでにアクセスできるファイルだけです。リンクの先は Figma Design、FigJam、Figma Make のいずれかである必要があります。また、サインインしたアカウントが、そのファイルを持つプランに属している必要もあります。
呼び出し回数の上限は席の種類で変わります
私が最初に勘違いしていたのが、ここでした。無料プランなら誰でも同じ回数、と思い込んでいたのです。公式の「Rate limits & access」ページ（2026年10月に確認）では、次のように書かれています。
| 席 | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View / Collab | 月 20 回 | 月 20 回 | 月 20 回 | 月 20 回 |
| Full / Dev | 記載なし | 1 日 200 回・1 分 10 回 | 1 日 200 回・1 分 15 回 | 1 日 600 回・1 分 20 回 |
上限がかかるのは Figma からデータを読み出すツールです。ファイルへ書き込む側のツールは対象外で、Figma AI のクレジットを使う操作も、MCP の呼び出し回数には数えられません。この表は変わることがあるため、実際に使う前に公式ページで確かめていただければ幸いです。
セットアップ方法
方式 1: リモートサーバー（推奨）
Figma がクラウドで動かしているサーバーに接続します。デスクトップアプリがなくても始められます。
プラグインで入れる場合は、Figma のスキルも一緒に入ります。
# プラグインで導入（MCP 設定とスキルを含む）
claude plugin install figma@claude-plugins-official導入後は Claude Code を再起動し、/plugin の Installed タブで figma を選んでサインインします。ブラウザで Allow access を押せば完了です。
プラグインを使えない環境では、手動で追加します。スキルは入りません。
# 現在のプロジェクトにだけ追加
claude mcp add --transport http figma https://mcp.figma.com/mcp
# すべてのプロジェクトで使う場合
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp新しいセッションで /mcp を開き、figma を選んで Authenticate へ進みます。ブラウザで Allow access を押して、「Authentication successful」と出れば接続完了です。
方式 2: デスクトップサーバー
手元の Figma デスクトップアプリがローカルで動かすサーバーです。公式は、リモートサーバーのほうを強く勧めています。
Step 1: Figma 側で有効にします。
- Figma デスクトップアプリで、デザインファイルを開く（なければ新規作成）
- 何も選択しない状態で Dev Mode に切り替える（ツールバーのトグル、または
Shift + D） - 右サイドバーの MCP server 欄で Enable desktop MCP server を押す
起動すると、画面下に確認のメッセージが出ます。サーバーは http://127.0.0.1:3845/mcp で待ち受けます。
Step 2: Claude Code に登録します。
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp登録後は Claude Code を再起動してください。そのうえで /mcp を開き、figma-desktop が一覧にあれば成功です。
デスクトップサーバーは、キャンバスへの書き込みや、UI を Figma へ送る操作に対応していません。この点だけは、方式を選ぶ段階で押さえておく価値があります。
デザインからコードへ（Design to Code）
基本の流れ
Figma でフレームやレイヤーを選び、選択範囲へのリンクをコピーして、Claude Code に渡します。
- Figma で対象のフレームやコンポーネントを選ぶ
- 右クリックから 選択範囲へのリンクをコピー（または
Ctrl/Cmd + L） - Claude Code にリンクと条件をまとめて伝える
この Figma デザインを React コンポーネントとして実装してください。
Tailwind CSS を使い、レスポンシブにも対応してください。
https://www.figma.com/design/xxxxx/MyProject?node-id=123-456
Claude Code は MCP を通じて、レイヤー構造・色・フォント・余白・Auto Layout の設定を読み取ります。出力を確かめるときは、フォントの太さと余白の値から見ていくのが近道でした。
デザインシステムと Code Connect
デザインシステムのコンポーネントを指定すると、既存のコードに沿った出力を得やすくなります。
このデザインシステムの Button のバリアント（Primary / Secondary / Ghost）を
すべて確認し、既存のコードベースに合う React コンポーネントを作ってください。
Code Connect でデザイン側とコード側のコンポーネントを対応づけておくと、新しい部品を作り直さずに、既存のコンポーネントを使った出力になります。対応づけの作業そのものは別の工程なので、必要になったときに公式のドキュメントを辿るのがよいと思います。
セクション単位で進めます
ページ全体を一度に頼んだとき、私は細部の取りこぼしに気づくのが遅れました。いまは、まずヘッダー、次にヒーロー、と一つずつ頼んでいます。
この Figma ページのヘッダー（node-id=10-20）から先に実装してください。
ナビゲーションのリンクはダミーで構いません。
https://www.figma.com/design/xxxxx/MyProject?node-id=10-20
コードからデザインへ（Code to Canvas）
動いている UI を、スクリーンショットではなく編集できる Figma のレイヤーとして取り込む機能です。リモートサーバーで使います。
いまの UI を Figma に取り込んでください。
ファイルは https://www.figma.com/design/xxxxx/MyProject です。
取り込まれた図形・テキスト・画像は、デザイナーが Figma 上でそのまま手を入れられます。デザイナーが整え、開発者がコードを直し、その差分をまた取り込む——この往復を回せるのが、この連携のいちばんの手触りです。
ただし、取り込んだ結果が元の Figma ファイルのレイヤー名や構造と一対一で重なるとは限りません。往復の途中で名前が変わっていないかは、そのつど目で確かめてください。
FigJam でダイアグラムを作る
要件のテキストや資料を渡して、FigJam 上にダイアグラムを生成できます。
以下の要件から、システム構成図を FigJam に作成してください。
[要件のテキスト]
ユーザーフローの可視化や、ブレインストーミングの整理に向いています。生成した図は叩き台と考えて、ラベルと矢印の向きは必ず自分で読み直します。
コミュニティ製の MCP サーバーについて
公式以外にも、コミュニティが公開している Figma 向けの MCP サーバーがあります。ただし、ここではおすすめしません。理由は二つです。更新への追従が公式より遅れやすいこと、そして Figma のファイルへ渡す権限の範囲を、自分で確かめきれないことです。
トラブルシューティング
MCP に接続できません
# 登録済みサーバーの一覧と状態
claude mcp list
claude mcp get figma
# 作り直す
claude mcp remove figma
claude mcp add --transport http figma https://mcp.figma.com/mcp別のプロジェクトで figma が見つからない場合は、--scope user を付けて登録し直します。サーバーを足したあとは、Claude Code の再起動も忘れないでください。
デスクトップサーバーが応答しません
- Figma デスクトップアプリが最新で、起動していること
- Dev Mode で Enable desktop MCP server がオンになっていること
- 登録した URL が
http://127.0.0.1:3845/mcpであること（古い/sseではありません）
ローカルのサーバーは、有効にしているあいだしか動きません。ファイルを閉じたり、Dev Mode を抜けたりしたあとに応答が消えるのは、よくあることです。
コード生成の精度が低いとき
- レイヤー名が
Frame 123のままになっていないか、Auto Layout が使われているかを見直す - ページ単位ではなく、フレームやコンポーネント単位で頼む
- React・Vue・Svelte など、出力先のフレームワークを明示する
全体を振り返って
古い手順のまま登録して、ツールが空のまま三度書き直した夜から、私は「接続方式を選ぶ前に、何をさせたいかを決める」ようにしています。読み取りだけならどちらでも、書き戻しはリモートで。 この線引きだけは、手順が変わっても守っております。
同じ関連の話題では、実際の設計の自動化に踏み込んだ Figma MCP とデザイン自動化の記事 も参考になるかもしれません。
次のアクション
まずリモートサーバーを --scope user で一つ登録し、/mcp で認証を済ませてください。そのうえで、手元のデザインのうち一つのフレームだけを、Claude Code に読ませるところから始めていただければと思います。