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

Figma MCPサーバーは、Figmaのデザインファイルをそのままコーディングエージェントの入力にするための公式サーバーです。フレームを選んでコードを書かせる、デザイントークンの変数を吸い出す、逆にコードで書いた画面をFigmaのレイヤーとして描き戻す。これらがツールとして用意されています。Figmaのファイルを開けない場合や、モックアップの画像1枚だけを渡してUIを実装させたい場合はClaude Codeスクリーンショット実装 — モックアップからUIを作る手順がより手早い選択肢になります。

接続先は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に対応したクライアントから接続します。Sketchを使うチームには、Macアプリ内で動くローカル専用のSketchのMCPサーバーもあります。

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

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

ここで誤解しやすいのが、MCPサーバー自体はコードを書かないという点です。デザインから完璧なコードを出すワンクリックのツールではありません。サーバーが渡すのは構造化されたデザインコンテキストとコードの出発点で、最終的な実装はエージェント側の仕事です。プロジェクトの規約やコンポーネントの再利用は、Code Connectやルールファイルで別途教える必要があります。Figmaを使わずにClaude Design側でデザインを起こす場合との違いはClaude DesignとFigmaの違いで扱っています。

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

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

デスクトップサーバーは、組織やエンタープライズの特定の用途向けという位置づけです。デスクトップアプリが起動している間だけ動き、ファイルがアクティブでないと動かないとされています。そのぶん、いま選択しているレイヤーをそのまま「これを実装して」と渡せます。リモートはこの選択連動がなく、フレームのリンクを毎回貼る運用になります。

逆に、キャンバスへの書き込み(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は、初回の対話セッション起動時にこのマーケットプレイスを自動で追加します。スクリプトから実行するときは、先に claude plugin marketplace add anthropics/claude-plugins-official が要ります。このマーケットプレイスに登録されている figma プラグインの実体は、Figma自身が公開する github.com/figma/mcp-server-guide リポジトリです。中身は https://mcp.figma.com/mcp を指すMCP設定と、skills ディレクトリ配下の14本のスキルです。スキル名の例は figma-use、figma-use-figjam、figma-use-slides、figma-shaders などです。

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

スキルは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

--scope project を付けると、設定はプロジェクト直下の .mcp.json に書かれてチームで共有できます。空のディレクトリでClaude Code v2.1.287を使って試すと、次のファイルができました。

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

claude mcp add --help にはOAuth向けのオプションも並びます。--callback-port は、事前登録されたリダイレクトURIを要求するサーバー向けの固定ポートです。--client-id と --client-secret は、クライアントIDとシークレットの指定です。Figmaの公式手順は、どちらも付けずにブラウザーでの承認だけで進む形です。認証ヘッダーを渡す --header もありますが、FigmaのサーバーはOAuthで認証するので使いません。

追加したらClaude Codeを起動し直し、/mcp を開いて figma を選び、Authenticate から認証します。ブラウザーで Allow Access を押すと Authentication successful. Connected to figma が返ります。スコープの使い分けや .mcp.json の書式はClaude Code MCP設定ガイドが詳しく扱っています。

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

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

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_screenshot と download_assets は役割が近く見えますが、使い分けの基準があります。レイアウトの忠実度を保つために選択範囲を撮るのが get_screenshot で、トークン上限が気になるときだけオフにします。get_screenshot は単一ノードで常にPNGです。download_assets は1回に最大20ノードを渡せます。複数ノード、SVG・PDF・JPGなどPNG以外の形式、書き出し設定どおりの解像度、アップロードされた元画像が要るときは download_assets に切り替えます。返ってくるのは一時URLで、中身を取るには別途フェッチが必要です。

書き込み側の中心は use_figma です。これ1本でFigma Design、FigJam、Figma Slidesの作成・編集・削除・調査をこなします。単体で叩くのではなく、figma-use などのスキルとセットで使う設計になっています。同じFigma Plugin APIを自分のコードから直接呼びたい場合は、Claude CodeでFigmaプラグインを開発する手順が参考になります。

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

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

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

クライアントはその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が例示している内容は、たとえば次のようなものです。

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

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

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

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

月6回はほぼ試用枠です。有料プランでもView / Collabシートのままだとここに当たり、Dev / Fullシートに上げると日次200回まで一気に伸びます。Enterpriseでは600回です。教育向けプランはProfessionalのDev / Fullシートと同じ、1日200回・毎分10回の枠になります。

制限の対象は、Figmaから読み取るツールです。書き込み系などの一部のツールは除外されており、add_code_connect_map・create_new_file・whoami が該当します。

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

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

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

ツールが読み込まれない

有効化を確認したうえで、Figmaアプリとエディターの両方を再起動します。

リモート専用ツールが読み込まれない

リモートとデスクトップの両方を設定していると、Claude Codeが呼び出しをデスクトップサーバーへ向けることがあります。デスクトップアプリは、開いている間 http://127.0.0.1:3845/mcp を自動で立ち上げるためです。この場合、use_figma のようなリモート専用ツールは読み込まれません。最も多い原因とされています。

claude mcp list
claude mcp remove figma-desktop

figma-desktop を外したら、Claude Codeを再起動します。

モデルに接続できないというエラーが出る

「We're having trouble connecting to the model provider」のようなエラーは、Figma側ではなくエージェント側の問題です。AIアシスタントがモデルに届いていないか、接続がタイムアウトしています。時間を置いて再試行します。

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

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

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

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

Claude Codeで応答がトークン上限を超える

大きなフレームに get_design_context を呼ぶと、Claude Code側で次のようなエラーになります。Figmaのドキュメントに載っている例です。

Error: MCP tool "get_design_context" response (351378 tokens) exceeds maximum allowed tokens (25000). Please use pagination, filtering, or limit parameters to reduce the response size.

25000はClaude Codeの既定の上限で、MAX_MCP_OUTPUT_TOKENS で引き上げられます。Figmaは 50000 や 100000 を例示しており、設定後はClaude Codeを再起動します。ただしこの例の応答は35万トークン超なので、上限を上げても収まりません。上の「応答が大きすぎる」の手順で、get_metadata から必要なノードだけ取り直す方が現実的です。

画像が突然表示されなくなる

MCPサーバーが返す画像URLは、Figmaが一時的にホストしているもので、いずれ期限切れになります。同じデザインのリンクを渡してコードを取り直せば新しいURLが返りますが、それも再び失効します。恒久的に使うなら、画像をコードベースに保存してローカルのファイルを参照させます。

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

claude mcp list では ! Needs authentication と表示されます。/mcp でもサーバーは認証待ちとして示されるので、設定が書けているのか認証で止まっているのかを切り分けられます。MCP全般の切り分け手順はMCPサーバーに接続できないときの切り分け手順にまとめています。

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

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

まとめ

書き込みやFigJamを使う予定があるかどうかで、リモートとデスクトップのどちらに置くかが決まります。

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