Claude CodeとFigmaの連携方法｜MCP接続と画像で渡す2つの手順

Claude Code と Figma の連携は、Figma を MCP（Model Context Protocol）サーバーとして Claude Code に追加する方法が公式ドキュメントで案内されています。Claude Code の公式ドキュメントは、claude mcp add にサーバー名と URL を渡して Notion や Figma のような外部ツールをつなぐ、と案内しています。追加したら /mcp を開いてブラウザでサインインすれば、Figma のデザインを読んで実装する依頼ができるようになります。MCP を使わない場合でも、Figma から書き出した画像を Claude Code に貼り付けて渡す方法が公式に載っています。

この記事は Claude Code 側の手順と切り分けを公式の記述どおりにまとめます。Figma 側の MCP サーバーの URL と対象プランは Figma の公式手順で確認してください。

Claude Code と Figma をつなぐ方法はいくつある？

公式ドキュメントから読み取れる経路は次の4つです。デザインを読ませる経路が上の3つ、出来上がった画面を照合する補助が4つ目です。

経路	何をするか	向いている場面
MCP サーバーを追加	`claude mcp add` で Figma の MCP サーバーを登録し、Claude がデザインを直接読む	継続的に Figma のデザインから実装する
claude.ai のコネクタ	claude.ai で追加したコネクタが Claude Code にも出てくる	すでに claude.ai で Figma をつないでいる
画像で渡す	Figma の書き出し画像を貼り付けて見せる	まず1画面だけ試したい、MCP を入れられない
Chrome で照合	Figma のモックから作った UI をブラウザで開き、一致するか確かめる	実装後の見た目チェック

Figma の MCP サーバーを Claude Code に追加する手順は？

リモートの MCP サーバーは HTTP での接続が推奨です。基本の構文は次のとおりです。

claude mcp add --transport http <name> <url>

<name> は自分で付ける呼び名（例: figma）、<url> は Figma の公式手順に書かれた MCP サーバーの URL です。トークンを使う方式なら --header "Authorization: Bearer ..." を付けます。

Figma の手順が Claude Desktop や Cursor など別のクライアント向けにしか書かれていなくても、Claude Code で使えます。公式は、手順の中から次の3つのどれかを探すよう案内しています。

https:// で始まる URL: リモートサーバーです。--transport http で追加します
npx -y ... のような起動コマンド: 手元で動くサーバーです。コマンド全体を -- の後ろに置き、必要な環境変数は --env で渡します
mcpServers の JSON ブロック: mcpServers の外枠を外した中身を claude mcp add-json に渡します。url があるのに type が無い場合は、エンドポイントの接続方式に合わせて "type": "http"、"type": "sse"、"type": "ws" のいずれかを足します。type が無いと手元起動のサーバーとして読まれ、失敗するためです。

追加に成功すると Added ... の行が表示されます。続けて接続を確かめます。

claude mcp list

各サーバーの横に ✔ Connected、! Needs authentication、✘ Failed to connect などの状態が出ます。! Needs authentication と出た場合は、サーバーがサインインを求めているので、次の認証に進みます。

個人で使うかチームで共有するかで、スコープはどう選ぶ？

MCP サーバーの登録先（スコープ）は3つあります。何も指定しなければ local です。

スコープ	読み込まれる範囲	チームと共有	保存先
local（既定）	追加したプロジェクトだけ	しない	`~/.claude.json`
project	そのプロジェクト	する（バージョン管理で）	プロジェクト直下の `.mcp.json`
user	自分の全プロジェクト	しない	`~/.claude.json`

個人で試すなら既定の local で十分で、公式もリポジトリに入れたくない資格情報を伴うサーバーに勧めています。全プロジェクトで使うなら --scope user を付けます。

チーム運用として同じ設定を配るなら --scope project で .mcp.json に書き、コミットします。この場合、各メンバーが対話セッションを開いたときに、そのサーバーを使ってよいか承認を求められます。承認を取り消して選び直したいときは、次のコマンドでリセットできます。

claude mcp reset-project-choices

Figma へのサインインはどう通す？

サーバーが 401 か 403 を返すと、Claude Code はそのサーバーを「認証が必要」と判定します。サインインは Claude Code の中で行います。

/mcp

一覧から Figma のサーバーを選ぶと、ブラウザでログインする流れに進みます。トークンは安全に保存され、自動で更新されます。ブラウザが開かなければ、表示された URL を手で開きます。

セッションを開かずにシェルから済ませたいときは claude mcp login <name> が使え、資格情報を消すときは claude mcp logout <name> です。claude -p のような非対話の実行では OAuth のサインインを走らせられないため、先に対話セッションか claude mcp login でサインインを済ませておきます。

--header で設定した Authorization がサーバーに拒否されると、OAuth に切り替わらず接続失敗として扱われます。トークンを見直すか、ヘッダーを外して OAuth を使います。

claude.ai のコネクタ経由で使う場合、claude.ai のアカウントで Claude Code にログインしていれば、claude.ai で追加したコネクタは自動的に Claude Code の /mcp に並びます。ただし Team と Enterprise プランでは、コネクタを追加できるのは管理者だけです。また ANTHROPIC_API_KEY などで API キー認証が有効になっていると、コネクタは読み込まれません。/mcp に出てこないときは /status で今の認証方法を確かめます。同じ URL のサーバーを Claude Code 側でも追加していると、そちらが優先され、コネクタは hidden と表示されます。

つながった後、Figma について何を頼める？

まずセッション内で /mcp を開き、Figma のサーバーを選んで提供ツール一覧を見てください。/mcp には接続中の各サーバーのツール数も表示されます。Figma への書き戻しのような操作を頼む前に、この一覧を確認してください。

依頼は、公式の例「Slack に投稿された新しい Figma デザインに沿って、標準のメールテンプレートを更新して」のように、どのデザインを何に反映するかを1文で伝えます。MCP のツールが PNG や JPEG などの画像を返した場合、Claude は会話の中でその画像を見て作業します。

大きなファイルを丸ごと読ませると、出力が上限に当たることがあります。MCP ツールの出力は1万トークンを超えると警告が出て、既定の上限は25,000トークンです。上限は環境変数で変えられます。

export MAX_MCP_OUTPUT_TOKENS=50000
claude

実装した画面がデザインどおりかを見るには、Chrome 連携でブラウザに表示させて出力確認をする方法が公式に挙がっています。設定はChrome連携の記事で扱っています。Figma が提供するパートナースキルについてはスキルの記事へ。

MCP を使わずに Figma のデザインを渡すには？

MCP サーバーを入れられない環境や、1画面だけ試したいときは、デザインの受け渡しとして、Figma から書き出した画像を渡します。公式に載っている方法は3つです。

画像を Claude Code のウィンドウにドラッグ&ドロップする
画像をコピーして Ctrl+V で貼り付ける（Windows と WSL では Alt+V）
画像のパスを伝える（例: “Analyze this image: /path/to/your/image.png”）

渡したあとは「Generate CSS to match this design mockup」のように頼みます。画像は1つの会話で複数枚扱えるので、状態ごとの書き出しを並べて渡せます。

つながらない・ツールが出ないときはどこを見る？

最初に /mcp か claude mcp list で状態を見て、接続障害の症状を次の表に当てはめます。

症状	主な原因	対処
`/mcp` に No MCP servers configured	別のプロジェクトで `claude mcp add` した（local は追加した場所に紐づく）	今のプロジェクトで追加し直すか、`--scope user` で追加する
`✘ Failed to connect`	ヘッダー不足やトークンの拒否など	`claude mcp get <name>` で表示される HTTP ステータスとエラー文を読む。貼り付けたトークンの前後の空白警告も確認する
`MCP endpoint not found`	URL のパスが違う（404）	`claude mcp get <name>` で URL を確認し、`claude mcp remove <name>` してから正しい URL で追加し直す
起動時にタイムアウト	既定の30秒以内に起動しない	`MCP_TIMEOUT` をミリ秒で延ばして起動する
つながるがツールが0件	API キーなど必須の環境変数が無い	`--env KEY=value` か `.mcp.json` の `env` で渡す
`.mcp.json` の変更が効かない	`.mcp.json` はセッション開始時に読まれる	セッションを終了して起動し直す
サインインが失敗する、ブラウザが開かない	（公式は対処のみ記載）	`/mcp` でサーバーを選び Authenticate をやり直す。ブラウザが開かなければ表示された URL を手で開く

タイムアウトの延長は次のように起動します。

MCP_TIMEOUT=60000 claude

URL そのものに届いているかは、curl -I にサーバーの URL を渡して確かめられます。404 や 405 ならサーバーは動いていて到達できています。401 や 403 ならサーバーは動いており、認証が必要という意味です。応答が無ければ URL かネットワークを疑います。MCP 以外も含めたエラー全般はエラー対処の記事にまとめています。

接続する前に安全面で確認しておくことは？

公式は、MCP サーバーの利用開始前にそのサーバーを信頼できるか確かめるよう警告しています。外部のコンテンツを取得するサーバーは、プロンプトインジェクションの入口になりうるためです。Figma の MCP サーバーは Figma の公式手順にある URL から追加し、第三者が配っている URL は使わないのが基本です。

アクセスを止めたいときは、/mcp のメニューの Clear authentication で取り消せます。claude mcp remove <name> でサーバーを削除すると、Claude Code が保存していた OAuth トークンも一緒に消えます。組織で権限をどう設計するかは企業向けセキュリティの記事、MCP 全般のコマンドはMCPの記事で扱っています。

公式の記述で変わりうる点と、今日やること

この記事のコマンドと挙動は、2026年10月18日時点の Claude Code 公式ドキュメントに基づきます。Figma 側の MCP サーバーの URL、提供されるツール、利用できる Figma のプランは Figma の公式ドキュメントで確かめてください。

今日やることは次の3つです。

Figma の公式手順で MCP サーバーの URL を確認し、claude mcp add --transport http で追加する
/mcp でサインインし、claude mcp list が ✔ Connected になったことを確かめる
/mcp でサーバーを選んでツール一覧を確認し、小さな画面1つで依頼してみる

手順を読んでも、自分のプロジェクトのデザインにどう当てはめるかで手が止まることがあります。自分の手で使えるようになるために学べる場として、月額1,980円から参加できる学習コミュニティ「AI駆動ラボ」があります。まずは Figma のサーバーを1つ追加するところから試してみてください。