Claude Media
Figma MCPサーバーの使い方 — Claude Codeへの接続とデザインからのコード生成
Claude CodeMCPチュートリアル

Figma MCPサーバーの使い方 — Claude Codeへの接続とデザインからのコード生成

Figma MCPサーバーの使い方をまとめます。リモートとデスクトップの違い、Claude Codeへの接続手順、用意されているツール、呼び出し回数の上限、つまずいたときの切り分けまで扱います。

読了目安 約17分

Figma MCPサーバーは、Figmaのデザインファイルをそのままコーディングエージェントの入力にするための公式サーバーです。フレームを選んでコードを書かせる、デザイントークンの変数を吸い出す、逆にコードで書いた画面をFigmaのレイヤーとして描き戻す。これらがツールとして用意されています。

接続先は2種類あります。Figmaがホストするリモートサーバーと、デスクトップアプリの中で動くローカルサーバーです。Figmaが推奨しているのはリモートで、機能の広さも認証の手軽さもこちらが上です。以下では両方の入れ方を追いつつ、どのツールがいつ呼ばれるのか、無料枠で何回叩けるのかまで確認します。MCP自体の仕組みから知りたい場合はMCPとは — AIと外部ツールをつなぐ標準プロトコルが対応します。

Figma MCPサーバーとは

Figma MCPサーバーとは、FigmaのデザインデータをModel Context Protocol(MCP)経由でAIエージェントに渡し、逆にエージェントからFigmaのキャンバスに書き込むための公式MCPサーバーです。VS Code、Cursor、Claude Code、Codexなど、MCPに対応したクライアントから接続します。

できることは大きく4つに分かれます。

  • デザインからコードを生成する — 選んだフレームの構造・レイアウト・スタイルを構造化して渡す。既定の出力はReact + Tailwindで、そこから各プロジェクトの流儀に翻訳させる
  • デザインコンテキストを取り出す — 変数、コンポーネント、レイアウト情報をIDEに直接引き込む。デザインシステム運用と相性がよい
  • キャンバスに書き込む — フレーム・コンポーネント・変数・オートレイアウトをエージェントが作成・更新する。FigJamの付箋やコネクター、Figma Slidesのスライドも対象
  • ライブUIをデザインに変換する — ブラウザーで動いている本番・ステージング・localhost の画面をFigma Designのレイヤーとして取り込む

ここで誤解しやすいのが、MCPサーバー自体はコードを書かないという点です。Figmaのドキュメントは「ワンクリックでデザインから完璧なコードを作る道具ではない」と明言しています。サーバーが渡すのは構造化されたデザインコンテキストとコードの出発点で、最終的な実装はエージェント側の仕事です。プロジェクトの規約やコンポーネントの再利用は、Code Connectやルールファイルで別途教える必要があります。

リモートとデスクトップ、どちらを選ぶか

先に選択を済ませると後の手戻りがありません。両者は「同じサーバーの置き場所違い」ではなく、使える機能もアクセス条件も違います。

観点リモートサーバーデスクトップサーバー
接続先リモートサーバーhttps://mcp.figma.com/mcpデスクトップサーバーhttp://127.0.0.1:3845/mcp
デスクトップアプリリモートサーバー不要デスクトップサーバー必須(Dev Modeで有効化)
利用条件リモートサーバー全シート・全プランデスクトップサーバーDev / Fullシート、有料プランのみ
選択範囲ベースの指示リモートサーバー使えない(リンクを渡す)デスクトップサーバー使える
キャンバスへの書き込みリモートサーバー使えるデスクトップサーバー使えない

デスクトップサーバーは、組織やエンタープライズの特定用途に向けた提供です。ファイルをデスクトップアプリで開いている間しか動かない代わりに、いま選択しているレイヤーをそのまま「これを実装して」と渡せます。リモートはこの選択連動がなく、フレームのリンクを毎回貼る運用になります。

逆に、キャンバスへの書き込み(use_figma)、FigJamのダイアグラム生成、ライブUIの取り込みはリモート専用です。書き込み系を一度でも使いたいならリモート一択になります。

Claude Codeにリモートサーバーを接続する

Claude Codeでの接続方法は2つあります。Anthropic公式マーケットプレイスのプラグインを入れる方法と、claude mcp add で手動追加する方法です。

プラグインで入れる — Figmaが推奨する経路

Figmaが推奨するのはプラグイン経由です。MCPサーバーの設定に加えて、よく使うワークフロー向けのAgent Skillsが同梱されます。

claude plugin install figma@claude-plugins-official

claude-plugins-official はAnthropicが管理する公式マーケットプレイスで、Claude Codeを対話的に初回起動した時点で自動登録されます。このマーケットプレイスに登録されている figma プラグインの実体は、Figma自身が公開する github.com/figma/mcp-server-guide リポジトリです。中身は https://mcp.figma.com/mcp を指すMCP設定と、12本のスキルで構成されています。

同梱されるスキルは、たとえば次のようなものです。

スキル役割
figma-design-to-code役割Figmaのデザインをコードに落とす手順を定義。get_design_context を呼ぶ前の必須手順として指定されている
figma-use役割use_figma でFigmaファイルにJavaScriptを流す際の作法。書き込み前の必須手順
figma-code-connect役割.figma.ts のCode Connectテンプレートを作成・保守する
figma-generate-design役割コードやプロンプトから画面・モーダルなどをFigma上に組み立てる
figma-generate-diagram役割Mermaid記法をFigJamのダイアグラムに変換する

スキルはMCPの機能を増やすものではありません。「どのツールを、どの順番で、結果をどう使うか」をエージェントに教える指示書です。プラグインの仕組み自体はClaude Codeプラグイン完全ガイドで扱っています。

手動で追加する

プラグインを使わない場合は、HTTPトランスポートで直接追加します。

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

既定のスコープはlocalなので、追加したプロジェクトでしか有効になりません。全プロジェクトから使うなら --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 が返ります。スコープの使い分けや .mcp.json の書式はClaude Code MCP設定ガイドが詳しく扱っています。

デスクトップサーバーをDev Modeで有効化する

デスクトップ側は、サーバーをFigmaアプリの中で起動してからクライアントを繋ぐ順序になります。

  1. Figmaデスクトップアプリを最新版に更新して開く
  2. Figma Designファイルを開き、下部ツールバーからDev Modeに切り替える(ショートカットは Shift + D)
  3. インスペクトパネルの「MCP server」セクションで Enable desktop MCP server をクリックする
  4. 画面下に有効化の確認メッセージが出れば、http://127.0.0.1:3845/mcp で待ち受けている

Claude Code側の追加はリモートと同じ形式で、URLだけが変わります。

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

VS CodeやCursorから使う場合の設定ファイルは次の形です。

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

デスクトップサーバーには、インスペクトパネルの設定モーダルから調整できる項目が2つあります。画像アセットの扱い(localhostリンクを返すか、プロジェクトに書き出すか)と、Code Connectのマッピングを応答に含めるかどうかです。

用意されているツールと呼び出され方

Figma MCPサーバーは20種類以上のツールを公開しています。全部を覚える必要はなく、実務で頻繁に効くのは次の7つです。

ツール何を返すか使いどころ
get_design_context何を返すか選択レイヤーの構造・スタイル(既定はReact + Tailwind)使いどころ実装の起点。まずこれを呼ぶ
get_metadata何を返すかレイヤーID・名前・型・位置・サイズだけの軽量XML使いどころ大きいフレームで文脈が溢れるときの下見
get_variable_defs何を返すか選択範囲で使われている変数とスタイル使いどころ色・余白・タイポグラフィのトークンを拾う
get_screenshot何を返すか選択範囲のPNG画像使いどころレイアウト忠実度の確認。原則オンのままでよい
download_assets何を返すか書き出し画像と元の画像ファイル(最大20ノード)使いどころアイコンや画像をSVG / JPG / PDFで納品する
search_design_system何を返すか連携ライブラリー内のコンポーネント・変数・スタイル検索使いどころ新規に描く前に既存資産を探させる
use_figma何を返すかFigma Plugin API経由の読み書き使いどころフレーム作成、変数設定、FigJam操作

get_screenshot と download_assets は役割が近く見えますが、Figmaは明確に線を引いています。エージェントが「見る」ために使うのが get_screenshot、ユーザーに「渡す」ために使うのが download_assets です。前者は常にPNGの単一ノード、後者は最大20ノードでSVG・PDF・元ファイルまで扱えます。

書き込み側の中心は use_figma です。これ1本でFigma Design、FigJam、Figma Slidesの作成・編集・削除・調査をこなします。単体で叩くのではなく、figma-use などのスキルとセットで使う設計になっています。

このほか、Mermaid記法からFigJamのダイアグラムを起こす generate_diagram、認証中のアカウントとシート種別を返す whoami、Code Connectのマッピングを扱う一群、シェーダー効果を取得する一群が並びます。

デザインをコードにするまでの流れ

リモートサーバーではリンクベースで指示します。手順は3つです。

  1. Figma Designで対象のフレームまたはレイヤーを選ぶ
  2. 右クリックして Copy link to selection を選ぶ
  3. MCPクライアントにそのURLを貼り、実装を依頼する

クライアントはそのURLを開きに行くわけではありません。URLからnode IDを抜き出し、MCPサーバーに「どのオブジェクトの情報を返すか」を伝えるために使います。デスクトップサーバーならリンクを貼らず、選択中のレイヤーをそのまま「これを実装して」と指せます。

出力のフレームワークはプロンプトで変えられます。「Vueで生成して」「素のHTML + CSSで」「iOS向けに」といった指定が通り、「src/components/ui のコンポーネントを使って生成して」のようにコードベース側の資産を指定することもできます。

意図したツールが呼ばれないときは、名指しが有効です。Figmaのドキュメントには、変数の値を取りたかったのにコードが返ってきたという報告に対し、「このフレームで使われている変数名と値を取得して」と言い換えたら正しいツールが動いた、という例が載っています。ツールが増えるほどエージェントの選択が揺れるので、狙いが決まっているなら明示するほうが速く済みます。

出力の質を決める2つの仕込み

同じデザインでも、事前準備の有無で出てくるコードがはっきり変わります。効くのは次の2つです。

Code Connectは、Figmaのコンポーネントとコードベースのコンポーネントを紐付ける仕組みです。コードでのコンポーネント再利用を一貫させる最大の要素がこれで、無ければモデルは推測でコンポーネントを選びます。get_code_connect_map はノードIDに対して componentName、source(ファイルパスまたはURL)、スニペット、フレームワークラベルを返します。複数のフレームワーク向けにマッピングを持たせられるので、リモートサーバーでは clientFrameworks パラメーターでどれを使うか指定します。

ルールファイルは、プロジェクト固有の「暗黙の了解」を渡す場所です。Claude Codeなら CLAUDE.md に書きます。Figmaが例示している内容は、たとえば次のようなものです。

Figmaが例示しているCLAUDE.mdのルール(要約)
  • MCPサーバーが画像やSVGにlocalhostのソースを返したら、そのソースをそのまま使う
  • 新しいアイコンパッケージを追加しない。アセットはすべてFigmaのペイロードに入っている
  • localhostのソースがある場合、プレースホルダーを作らない
  • 最初に get_design_context を呼び、応答が大きすぎたら get_metadata でノードマップを取ってから必要なノードだけ取り直す
  • get_design_context と get_screenshot の両方が揃ってからアセットを取得して実装に入る
  • 出力のTailwindユーティリティは、プロジェクトのデザイントークンに置き換える

ルールを自分で書き起こすのが面倒なら、サーバーが提供する create_design_system_rules というMCPプロンプトを使う手もあります。デザインをフロントエンドのコードに翻訳するための文脈をまとめたルールファイルを生成するものです。ただしMCPプロンプトに対応していないクライアントもあるため、使う前に手元のクライアントの対応状況を確認します。

Figmaファイル側の作りも効きます。繰り返す要素をコンポーネント化する、間隔・色・角丸・タイポグラフィに変数を当てる、Frame1268 のような既定名を CardContainer や CTA_Button に直す、オートレイアウトを使う — この4点が挙げられています。レイヤー名はモデルが「これが何なのか」を判断する手掛かりになるので、意味のある名前を付けておくと出力が安定します。

プランとシートで決まる呼び出し回数の上限

読み取り系ツールにはレート制限があります。上限はプランとシート種別の組み合わせで決まり、分単位の制限と日次・月次の制限が両方かかります。

シートStarterProfessionalOrganizationEnterprise
View / CollabStarter月6回Professional月6回Organization月6回Enterprise月6回
Dev / FullStarter—Professional1日200回・毎分10回Organization1日200回・毎分15回Enterprise1日600回・毎分20回

月6回はほぼ試用枠です。Starterプランのユーザー、あるいは有料プランでもView / Collabシートの場合はここに当たります。Dev / Fullシートに上げると日次200回まで一気に伸び、Enterpriseでは600回になります。

書き込み系のツールは対象外です。除外されるのは add_code_connect_map、generate_figma_design、whoami の3つで、ここは制限にカウントされません。

権限エラーが出るときは、まず whoami を呼ぶのが早道です。認証に使われているメールアドレス、所属するプラン、それぞれでのシート種別が返ります。閲覧できないファイルにはMCP経由でもアクセスできないので、対象ファイルのプランに自分が属しているかを確認します。

なお、エンタープライズ管理下の認証としては、Okta Cross App Access(XAA)によるブローカー方式がClaude向けに用意されています。通常はユーザーごとにOAuthのログインを踏みますが、XAAを使うとOktaでのサインインが一度で済みます。

よくあるつまずきと切り分け

ツールが読み込まれない

デスクトップサーバーはファイルがアプリで開かれている間だけ動きます。有効化を確認したうえで、Figmaアプリとエディターの両方を再起動します。「モデルプロバイダーに接続できません」系のエラーが出る場合は、MCPではなくエージェント側がモデルに到達できていない状態です。

変数を取りたいのにコードが返る

エージェントがツールの選択を誤っています。「この選択範囲の変数名と値を取得して」のように、欲しいものを具体的に書き直します。

応答が大きすぎる、または遅い

巨大なフレームを丸ごと選んでいる可能性があります。get_metadata で構造の見取りを取り、必要なノードだけ get_design_context で取り直す流れに切り替えます。get_metadata をnodeIdなしで呼ぶとドキュメントのトップレベルページ一覧が返るので、どこを掘るか決まっていない段階の入口としても使えます。

接続はしているが認証が通らない

Claude Code側では /mcp パネルに Needs authentication と出ます。claude mcp list でもサーバーごとの健全性が表示されるので、設定が書けているのか認証で止まっているのかを切り分けられます。MCP全般の切り分け手順はMCPサーバーに接続できないときの切り分け手順にまとめています。

そもそもクライアントが対応していない

Figma MCP CatalogにあるクライアントだけがFigma MCPサーバーに接続できます。Claude Code、Claude Desktop、Cursor、VS Code、Codex、Gemini CLI、Xcode(ベータ)などが並びますが、クライアントによってデスクトップサーバーのみ、リモートサーバーのみ、書き込み非対応といった差があります。

よくある質問

Figma MCPサーバーは無料で使えますか

接続自体は全プランで可能です。ただし読み取り系ツールの呼び出し回数に上限があり、Starterプランや有料プランのView / Collabシートでは月6回までです。キャンバスへの書き込み機能はベータ期間中は無料で、将来は使用量ベースの有料機能になる予定とされています。

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

リモートサーバーを使う場合は不要です。デスクトップサーバーはFigmaデスクトップアプリのDev Mode内で起動するため、こちらを選ぶ場合のみ必須になります。

Claude Code以外のクライアントでも使えますか

Figma MCP Catalogに掲載されたクライアントであれば使えます。VS Code、Cursor、Codex、Gemini CLI、Warp、Android Studio、Xcode(ベータ)などが対応しており、それぞれデスクトップサーバー・リモートサーバー・書き込み機能のサポート状況が異なります。

出力がいつもReactとTailwindになるのはなぜですか

get_design_context の既定の出力形式がReact + Tailwindだからです。これは最終形ではなく出発点で、プロンプトで「Vueで」「HTML + CSSで」と指定すれば変わります。プロジェクトの規約に寄せたい場合は、ルールファイルに「Tailwindユーティリティは自プロジェクトのトークンに置き換える」と書いておくと毎回指示する必要がなくなります。

選択したレイヤーをそのまま渡せますか

デスクトップサーバーなら可能です。リモートサーバーは選択連動に対応しておらず、Copy link to selection でリンクをコピーしてクライアントに貼る形になります。

デザインシステムのコンポーネントを再利用させるには

Code Connectでコンポーネントとコードの対応を登録します。これがないとモデルは推測で実装するため、既存コンポーネントの再利用が安定しません。あわせて search_design_system を使わせると、新規に描く前に既存資産を探しに行くようになります。

まとめ

導入の判断は2段階で決まります。まずリモートかデスクトップか。書き込みやFigJamのダイアグラム生成を使うならリモート、選択連動を重視して有料プランのDev / Fullシートを持っているならデスクトップです。次に、プラグインで入れるか手動で入れるか。Claude Codeなら claude plugin install figma@claude-plugins-official がスキル込みで揃うぶん立ち上がりが速く、claude mcp add --transport http は構成を自分で握りたいときの選択肢になります。

入れたあとに効くのは、Figmaファイル側の作り込みです。コンポーネント化・変数・意味のあるレイヤー名・オートレイアウトが揃っているファイルと、Frame1268 が並ぶファイルでは、同じツールを叩いても返ってくるものが違います。Code Connectとルールファイルはその上に乗る補正で、順序を逆にすると効きが薄くなります。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →