FigmaとClaude Codeの連携手順！MCP設定と双方向の使い方

FigmaとClaude Codeの連携で、MCPとプラグインの違いに迷っていませんか。

現在は、Figma公式プラグインとRemote MCPを使う方法が基本です。非公式MCPは設定の切り分けが複雑です。

本記事では接続、双方向の使い方、料金、エラー対処を解説します。実際の画面を確認しながら設定を進められます。

使い方がわかっても、作業を任せるところまでは進めず「結局は自分で手を動かしている」という方は少なくありません。

チャットに指示を出して、返ってきた内容を確認して、また次を頼む。この繰り返しは自分の時間を使い続けます。

AIエージェントなら「リサーチから資料作成までやっておいて」と伝えるだけで、調べる・まとめる・作るところまで自分で進みます。

SHIFT AIのAIエージェントを学べる無料セミナーでは、この任せ方を実演を交えて解説し、空いた時間を収入につなげた会員の事例も紹介しています。

オンライン開催です。下のボタンから、セミナーの詳細をご確認ください。

Figma MCPはRemoteとDesktopの2種類

Figma MCPには、利用方法が異なる以下の2種類があります。

• Remote MCP：Figmaがホストするサーバーへ接続する方式
• Desktop MCP：Figmaデスクトップアプリを介して接続する方式

通常は機能が広く、Figmaも推奨しているRemote MCPを選びましょう。

Remote MCPは全プラン・全Seatで使える基本方式

Remote MCPは、Figmaの全プランと全Seatで利用できる基本方式です。

Figmaのサーバーへ接続し、URLから対象を特定します。デザイン取得、書き込み、Code to Canvasに対応します。

ただし、利用できる回数はプランとSeatによって異なります。RemoteとDesktopの主な違いは以下の通りです。

比較項目	Remote MCP	Desktop MCP
対応プラン・Seat	全プラン・全Seat	有料プランのDev／Full Seat
接続先	Figmaがホストするサーバー	Figmaデスクトップアプリ
対象の指定	Figma URL	URLまたは現在の選択範囲
Code to Canvas	対応	非対応
Figmaアプリの起動	不要	必要
推奨される用途	通常の個人・チーム利用	特定の組織・Enterprise用途

個人のWeb制作で迷った場合は、Remote MCPから始めると判断できます。
出典：Guide to the Figma MCP server（Figma）

Desktop MCPは有料プランのDev／Full Seat向け

Desktop MCPは、Figmaアプリで選択中のフレームを直接扱いたい場合に使います。

利用には、有料プランのDev SeatまたはFull Seatが必要です。FigmaアプリでDev Modeを開き、MCP serverを有効にします。

有効化後は、Claude Codeで以下のコマンドを実行します。

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

Claude Codeを再起動し、/mcpでFigmaの表示を確認します。

Desktop MCPは、対象ファイルをアプリで開いている間だけ動作します。

Code to Canvasも使う場合は、Remote MCPを併用すると作業範囲を広げられます。

Claude Code自体の始め方や設定は、特徴から料金までまとめた記事で確認できます。

FigmaとClaude Codeを公式MCPで連携する2ステップ

FigmaとClaude Codeの接続は、公式プラグインの導入とFigma認証の2ステップです。

• ステップ1：Figma公式プラグインをClaude Codeへ導入する
• ステップ2：Figmaを認証して接続状態を確認する

非公式パッケージを探す前に、以下の公式手順を完了させましょう。

ステップ1：Figma公式プラグインをClaude Codeへ導入する

Remote MCPは、Figma公式プラグインから導入する方法が推奨されています。

公式プラグインには、MCPの設定とFigma作業向けのSkillsが含まれます。

Claude Codeを導入済みのターミナルで、以下を実行してください。

claude plugin install figma@claude-plugins-official

インストール後は、以下の順番で状態を確認します。

1. 実行中のClaude Codeを終了する
2. Claude Codeを再起動する
3. /pluginを実行する
4. Installedタブにfigmaがあるか確認する

組織でプラグインを制限している場合は、設定を繰り返さず管理者へ確認してください。

Claude Code自体が未導入なら、以下の記事から準備できます。

ステップ2：Figmaを認証して接続状態を確認する

プラグインの表示だけでなく、Figmaの認証完了まで確認することが重要です。

Claude Codeで/pluginを開き、Installedからfigmaを選びます。

ブラウザで認証アカウントを確認し、アクセスを許可します。

認証後はターミナルへ戻り、以下の順番で状態を確認します。

1. /pluginでfigmaがConnectedと表示されるか確認する
2. /mcpでFigma MCPが表示されるか確認する
3. 対象ファイルを認証アカウントで開けるか確認する

設定と認証を分けて確認すると、接続不良と権限不足を切り分けられます。MCPの仕組みや他のサーバーは、以下の記事で確認できます。

FigmaからClaude Codeへデザインを渡して実装する3ステップ

Figmaデザインを実装する流れは、対象選択、実装条件の指定、画面比較の3段階です。

MCPが渡す情報とClaude Codeが生成するコードを分けて理解しましょう。

ステップ1：Figmaで実装するフレームのリンクを取得する

実装したい範囲だけを選び、Copy link to selectionでURLを取得します。ヘッダーやカードが目安です。対象名も付けます。

Figma Designで対象を選び、右クリックのCopy/Paste asからCopy link to selectionを実行します。

取得したURLには、対象のノード情報が含まれます。

Figma MCPはURLのノードIDからデザイン情報を取得します。LP全体ではなく部品単位に絞ると、修正箇所を特定しやすくなります。

ステップ2：Claude CodeへURLと実装条件を伝える

Figma URLだけでなく、既存コードへ合わせる条件も同時に伝えます。

Figma MCPのget_design_contextは、既定でReactとTailwindのコードを返します。

Vue、HTMLとCSS、iOSへ変える場合は、形式を指定します。既存プロジェクトでは、以下の例を調整してください。

次のFigma選択範囲を既存プロジェクトへ実装してください。

Figma URL：ここにCopy link to selectionで取得したURLを貼る

実装条件：
- Next.js、TypeScript、Tailwind CSSを使う
- src/components/uiの既存コンポーネントを優先する
- 新規コンポーネントを作る前に再利用候補を示す
- 375px、768px、1440pxの表示を確認する
- 変更対象外のファイルは編集しない
- 実装前に変更予定ファイルと実装方針を説明する

技術構成と再利用部品、画面幅、変更範囲を指定します。MCPは設計情報をClaude Codeへ渡す役割です。
出典：Figma公式「MCPとAIの役割」

ステップ3：生成コードをブラウザで比較して修正する

生成後は、Figmaとブラウザ表示を並べて差分を確認します。

コードが動くだけでは、デザイン実装が完了したとは判断できません。以下の項目を画面幅ごとに確認してください。

• 要素間の余白と整列
• フォント、文字サイズ、行間
• 画像の比率と切り抜き位置
• ボタンや入力欄の状態
• 画面幅を変えたときの折り返し
• ホバー、フォーカス、エラー表示

修正時は「見た目が違う」のような抽象表現を避けます。対象要素、現在値、期待値を指定すると修正対象を絞れます。

Figma MCPはpixel-perfectを保証しません。最後は人が表示とコードを確認してください。

Claude CodeからFigmaへコードを戻す3ステップ

コードをFigmaへ戻す流れは、UIの起動、Code to Canvas、レイヤー確認の3段階です。

常時同期ではなく、デザインと実装を往復する作業として使いましょう。

ステップ1：Claude CodeでWeb UIを起動する

Figmaへ送る前に、対象UIをブラウザで表示できる状態にします。まず公開前の表示を確認します。

Code to Canvasは、localhost、ステージング、本番環境のWeb UIに対応します。取り込む要素を決め、必要な状態へ移動してください。

ログイン後は顧客情報やAPIキーを共有可能なテストデータへ置き換えます。個人名やメールアドレスも確認し、不要な情報をFigmaへ残さないでください。

ステップ2：Code to Canvasで画面をFigmaへ送る

Code to CanvasにはRemote MCPと対応クライアントが必要です。

Claude Codeは対応クライアントに含まれています。対象UIを起動した状態で、以下のように依頼してください。

http://localhost:3000/dashboard の表示をFigmaへ送ってください。

条件：
- Remote Figma MCPのCode to Canvasを使う
- dashboard全体ではなく、summary-cardセクションを対象にする
- 既存のFigmaファイルへ追加する
- 取り込み先を確定する前に候補を確認する

generate_figma_designは、新規・既存のFigma Designかクリップボードへ出力します。

自分の下書きは全Seatで作成・編集できます。下書き外の既存ファイルにはFull Seatと編集権限が必要です。
出典：Figma公式

取り込み先と対象範囲を事前に確認すると、別ファイルへの誤投入を防げます。

ステップ3：編集可能なFigmaレイヤーを確認する

取り込み後は、画像ではなく編集可能なレイヤーかを確認します。文字も選択してみましょう。

テキスト、コンテナ、レイヤー階層、Auto Layoutを順番に確認します。Code to Canvasは、既存部品へ自動で置き換える機能ではありません。

デザインシステムに合わせ、Figma上で既存部品へ置き換えます。修正後はClaude Codeへ戻し、差分を確認します。基本操作は以下で確認できます。

Claude CodeでFigmaデザインの再現精度を高める6つのコツ

再現精度を高めるには、Figmaとコードベースの両方を整える6つのコツがあります。

プロンプトだけを調整せず、Claude Codeへ渡す判断材料を増やしましょう。

Auto Layoutとコンポーネントで構造を整理する

見た目だけでなく、要素の関係がわかるFigmaファイルへ整えます。レイヤーの親子関係も見直します。

自由配置したレイヤーでは、画面幅が変わる規則を判断しにくくなります。Auto Layoutで並び方、間隔、内側の余白、伸縮方向を明確にしてください。

ボタンやカードをコンポーネント化し、役割名を付けます。HeaderやCardなどの用途名なら、Claude Codeが部品の分割方針を判断しやすくなります。

Variablesで色や余白の値を統一する

色、文字、余白、角丸は、意味を持つVariablesとして管理します。

同じ青色でも、ブランド色とリンク色では役割が異なります。#2563EBだけでなく、color-brand-primaryのような意味を渡します。

コード側に対応するデザイントークンがある場合は、名前と保存場所も指定してください。

Figmaのcolor-brand-primaryは、
src/styles/tokens.cssの--color-brand-primaryを使ってください。
固定の16進数を新しく追加しないでください。

値と意味を対応させると、固定値の重複やテーマ変更時の修正漏れを抑えられます。

Code Connectで既存コンポーネントを対応付ける

Code Connectは、Figma部品と実際のコード部品を結び付ける仕組みです。部品名とプロパティの表記も揃えます。

対応付けがない場合、AIは似たButtonを新しく作る可能性があります。Code Connectは、以下の情報を文脈へ含められます。

• import文
• propsとFigmaプロパティの対応
• コンポーネントの利用例

含まれる詳細は、Code Connect CLIとUIのどちらで対応付けたかによって異なります。

既存のButtonへ対応付けると、部品体系を揃えられます。必要なら追加指示も入れます。
出典：Figma公式「Code Connect」

CLAUDE.mdでプロジェクトの実装ルールを伝える

Figmaだけではわからない実装規則は、CLAUDE.mdへ記載します。

Claude Codeは、独自の命名や変更禁止範囲を自動では理解しません。毎回必要な規則は、以下のように会話外へ残してください。

# UI implementation rules

- TypeScriptを使う
- スタイルは既存のTailwind設定へ合わせる
- src/components/uiの部品を優先する
- 色と余白はsrc/styles/tokens.cssを参照する
- 新しい依存パッケージを追加しない
- 実装後にlint、typecheck、表示確認を行う

一時的な画面要件はプロンプト、継続する規則はCLAUDE.mdへ分けます。

情報の役割を分けると、別セッションでも同じ実装方針を保ちやすくなります。

大きなフレームを小さな単位へ分割する

LP全体ではなく、意味のある小さなフレームから実装します。

大きく深いフレームは、MCPが返す情報とClaude Codeのコンテキストを増やします。Figma公式も、小さい選択範囲を推奨しています。

以下の順番で分割すると、差分を確認しやすくなります。

1. 共通のButtonやInputを確認する
2. Cardなど小さい部品を実装する
3. HeaderやFirst Viewなどの領域へ広げる
4. 最後にページ全体を組み合わせる

小さな成功単位で進めると、崩れた原因と修正対象を特定しやすくなります。

生成結果をFigmaと比較して人がレビューする

最終的な合否は、Figmaとブラウザ表示を人が比較して決めます。

MCPは構造化情報を渡しますが、最終コードはClaude Codeが生成します。出力は、選択範囲や既存コードによって変わります。

レビューでは見た目だけでなく、以下の品質も確認してください。

• セマンティックなHTMLになっているか
• キーボードで操作できるか
• 既存コンポーネントを再利用しているか
• 不要な依存関係や固定値を増やしていないか
• モバイル幅でも内容を理解できるか

人が確認する基準を先に決めると、AIへの修正依頼を具体化できます。

ここまでの手順は、自分で操作することが前提です。

AIエージェントに任せる場合は、やることを一度伝えるだけで、手順そのものをAIが組み立てて進めます。

SHIFT AIのAIエージェントを学べる無料セミナーでは、その任せ方を実演を交えて解説しています。下のボタンから詳細をご確認ください。

Figma MCPの料金と利用制限を確認する3項目

Figma MCPの利用前に、プラン・呼び出し上限・Claude Code側の契約を確認します。

FigmaとClaudeの制限を混同せず、別々に判断しましょう。

FigmaプランとSeatごとの利用条件を確認する

Figma MCPの利用条件は、プランとSeatの組み合わせで決まります。接続前に両方を確認します。

Remote MCPは全プラン・全Seatで接続できます。Desktop MCPには、有料プランのDev SeatまたはFull Seatが必要です。

接続できても、十分な回数を使えるとは限りません。StarterとView／Collab Seatは月6回までです。業務利用ではSeatまで確認しましょう。

Figma MCPの呼び出し上限を確認する

読み取り系ツールには、月間または日次と分単位の上限があります。

2026年7月21日時点の公式上限は以下の通りです。

プラン	View／Collab Seat	Dev／Full Seat
Starter	月6回まで	月6回まで
Professional	月6回まで	1日200回、1分10回まで
Organization	月6回まで	1日200回、1分15回まで
Enterprise	月6回まで	1日600回、1分20回まで

上限はデータを読み取るMCPツールに適用されます。generate_figma_designやwhoamiなど、一部ツールは対象外です。

Figmaは上限を変更できるため、実行前に公式表を再確認してください。
出典：Rate limits and access（Figma）

Claude Code側の料金と利用枠を確認する

Figma MCPとは別に、Claude Code側の契約と利用枠も必要です。両方を事前に確認します。

Figma MCPの上限が残っていても、Claude側の上限に達すると作業は止まります。大きなフレームや長い修正は、Claude側のコンテキストも消費します。

ページ全体を渡さず、小さい範囲で実装と確認を繰り返します。作業量も見積もり、変動する現在のプランと上限を以下で確認してください。

プランを上げても、作業する人が自分のままでは、増えるのは使える機能だけです。

チャット形式では、指示を出すのも、返ってきた結果を確認して次を頼むのも自分の役目になります。

これに対してAIエージェントは「新商品のリサーチから企画書の作成までやっておいて」と伝えるだけで、調べる・まとめる・資料に起こすところまで自分で進めます。

SHIFT AIのAIエージェントを学べる無料セミナーでは、この任せ方を実演を交えて解説しています。

オンライン開催です。下のボタンから、セミナーの詳細をご確認ください。

FigmaとClaude Codeの連携で機密デザインを扱うときの注意点

クライアント案件では、接続前に共有できる情報と権限を確認してください。

Figma MCPは認証アカウントが扱えるファイルへ接続しますが、アクセス権限とAIへ渡す許可は別です。

公開前デザインや顧客情報を扱う場合は、以下の点を確認しましょう。

• クライアントとの契約や社内規程でAI利用が許可されているか
• 必要なファイルとフレームだけを対象にしているか
• 実在する個人情報や秘密情報をテストデータへ置き換えたか
• APIキーや認証トークンをプロンプトやコードへ貼っていないか
• 非公式MCPへ過大な権限を与えていないか

個人案件でも、最小権限と最小範囲を基本にすると誤共有を防ぎやすくなります。

Claude Codeの安全な設定を詳しく知りたい方は、以下の記事もご覧ください。

Figma MCPが接続できないときの4つの対処法

Figma MCPが動かない場合は、表示、権限、対象範囲、実行環境の順に確認します。

再インストールを繰り返す前に、問題が起きている段階を切り分けましょう。

プラグインとMCPツールの表示状態を確認する

最初に、プラグインの導入とMCP接続を別々に確認します。

Remote MCPでは、/pluginのInstalledタブでfigmaを確認します。インストール済みでも、未認証なら接続されません。

認証後はClaude Codeを再起動し、/mcpでFigma MCPが見えるか確認します。Desktop MCPでは、以下の条件がすべて必要です。

• Figmaデスクトップアプリが起動している
• 対象のFigma Designファイルを開いている
• Dev ModeでMCP serverを有効にしている
• Claude Codeを設定後に再起動している

表示が消える段階を見ると、設定と接続の問題を分けられます。
出典：Tools are not loading or connection lost（Figma）

認証アカウントとファイル権限を確認する

権限エラーでは、認証したメールアドレスとファイルの所属先を照合します。

Figma MCPは、認証ユーザが開けるファイルだけを取得します。whoamiでは、メールアドレス、プラン、Seatを確認できます。

次の3点を順番に確認してください。

1. URLが有効なFigma Design、FigJam、Figma Makeファイルを指しているか
2. 認証したユーザーが対象ファイルを開けるか
3. 対象ファイルと同じチームや組織へユーザーが所属しているか

複数アカウントを使う人は、ブラウザのログイン先も確認しましょう。正しいアカウントで再認証すると、設定を消さずに権限問題を解決できます。

選択フレームの大きさとプロンプトを確認する

処理が遅い場合は、選択範囲を小さくして依頼内容を絞ります。

Figma公式は、大きく深いフレームが処理を遅らせると説明しています。カードやヘッダーなど、単体で確認できる部品を選んでください。

プロンプトには、取得対象と実装範囲を1つずつ指定します。

このFigma URLからProductCardだけを取得してください。
まず構造と既存コンポーネントの再利用候補を説明してください。
まだページ全体は実装しないでください。

接続が失われた場合も、小さい範囲と短い指示で再試行します。問題を分けると、停止箇所を判断できます。
出典：Figma公式「遅い場合の対処」

WindowsとVS CodeとCLIの実行環境を確認する

設定した場所と、Claude Codeを実行している場所を一致させます。

VS Codeのターミナルと別のPowerShellでは、参照環境が異なる場合があります。まず、現在のターミナルで以下のコマンドを確認します。

claude --version

同じターミナルからClaude Codeを起動し、/pluginと/mcpを確認します。Desktopの接続先は以下です。

http://127.0.0.1:3845/mcp

RemoteとDesktopを同時に直さず、使う方式を1つに絞ります。実行環境を揃えると、別の設定を修正し続ける事態を避けられます。

FigmaとClaude Codeの連携に関するよくある質問

Figma Claude Codeに関する質問は以下の2つです。

• GitHubとの連携は必要か
• Claude DesignやFigma Makeとは何が違うか

回答を確認し、自分の制作目的に合うツールを選ぶ参考にしてみてください。

GitHubとの連携は必要？

Figma MCPをClaude Codeへ接続するだけなら、GitHubは不要です。コード管理とは別の条件です。

必要なのは、Claude Code、Figmaアカウント、対応するMCP接続です。ローカルのコードを扱う場合も、GitHubへの公開は必須ではありません。

変更履歴や差分レビューにはGitHubが役立ちます。クライアント案件ではGitで履歴を残し、接続要件とコード管理を分けましょう。共有前に運用も決めてください。

Claude DesignやFigma Makeとは何が違う？

違いは、主な作業場所と最終成果物です。

Figma MCPとClaude Codeは既存デザインの実装向けです。作る成果物で比較対象を選びます。

用途の違いは以下の通りです。

ツール	主な作業場所	向いている目的
Figma MCP＋Claude Code	コードベースとFigma	既存デザインの実装、既存コードとの往復
Claude Design	Claude Designのキャンバス	モックアップ、資料、プロトタイプなどの作成
Figma Make	Figma MakeのAIチャットとプレビュー	プロンプトによる機能プロトタイプ、Webアプリ、インタラクティブUIの試作

既存コードへ実装するなら、Figma MCPとClaude Codeは役割を分けやすい組み合わせです。
出典：Claude Design、Figma Make

FigmaとClaude Codeを連携してデザイン実装を始めよう

FigmaとClaude Codeは、Remote MCPと公式プラグインで連携します。小さいフレームから始めてください。

生成コードはFigmaと比較し、既存部品や操作状態を人が確認します。コードを戻す場合も、常時同期ではなく往復作業です。

まずは機密情報を含まない1つのカードから試しましょう。

ここまでの手順どおりに進めれば、目の前の作業は確実に速くなります。ただ、作業が速くなっただけでは、空いた時間が別の作業で埋まってしまうのもよくある話です。

SHIFT AIでは、AIエージェントに仕事を任せる側に回るための無料セミナーを開催しています。空いた時間を副業や収入につなげた会員の事例もご覧いただけます。

当日は、AIエージェントに作業を任せる実演と、AIで収入や働き方を変えた会員の事例をご覧いただけます。

登壇するのは、SHIFT AI代表の木内翔大です。参加は無料で、オンライン開催です。

「AIは使えているが、働き方は何も変わっていない」という方は、下のボタンから、セミナーの詳細をご確認ください。