Figma MCP Serverの全13ツールを調べた
2025年2月17日、FigmaがClaude Codeとの連携を公式ブログで発表した。本番のコードからFigma上に編集可能なデザインを生成できるようになり、エンジニアリングとデザインの間を行き来するワークフローが一段変わった。この連携の中核にあるのがFigma MCP Serverだ。
MCP（Model Context Protocol）を介してFigmaのデザインデータをAIエージェントに渡すサーバーで、全部で13のツールが用意されている。公式ドキュメントを読み込んだので、それぞれ何ができるのか整理しておく。
公式ドキュメントはこちら。
全体像
できることは大きく4つある。Figmaのフレームからコードを生成する。変数やコンポーネントなどのデザイン情報をIDE上で取得する。Makeファイルのリソースをプロトタイプから本番への移行に使う。Code Connectでデザインシステムのコンポーネントとコードを紐づける。
接続方法はRemoteとDesktopの2種類。Remoteはfigmaのホストエンドポイントに繋ぐ方式で、ローカルにFigmaアプリがなくても動く。Desktopはデスクトップアプリ経由でローカルに動かす方式で、今選択しているレイヤーをそのままプロンプトに使えるのが強み。
各ツールの中身
generate_figma_design
今回のClaude Code連携の目玉となるツール。Claude Code限定で、Remote Serverでのみ動く。本番のコードやUIをFigma上の編集可能なデザインレイヤーに変換できる。出力先は新規ファイル、既存ファイル、クリップボードから選べる。実行するとブラウザにツールバーが出て、画面全体か特定の要素をキャプチャする流れ。ユーザーのシートタイプに応じて作成権限が変わる。
これまでデザインからコードへの一方通行だった流れが、コードからデザインへの逆方向にも開いた。手作業でデザインを起こし直す必要がなくなるのは大きい。
get_design_context
Figma DesignとFigma Makeに対応。選択したレイヤーのデザイン情報を読み取り、コードを生成する。デフォルトの出力はReact + Tailwind。プロンプトで切り替えられるので、たとえば "generate my Figma selection in Vue" と書けばVue向けのコードが出る。"generate using components from src/components/ui" のように、特定ディレクトリのコンポーネントを指定することもできる。
Desktop版なら今選択しているレイヤーをそのまま指示に使える。Remote版ではフレームやレイヤーのリンクを明示的に渡す必要がある。
get_variable_defs
Figma Designに対応。選択範囲で使われている変数やスタイルを取り出す。色、スペーシング、タイポグラフィといったデザイントークンを確認したいときに使う。"what color variables are used?" のようにフィルタをかけることもできる。
get_code_connect_map
Figma Designに対応。FigmaのノードIDとコード側コンポーネントの対応関係を返す。レスポンスにはファイルパスやURLを示す codeConnectSrc とコンポーネント名の codeConnectName が入っている。デザイン上のある要素が、コードのどこに当たるのか調べたいときに使う。
add_code_connect_map
Figma Designに対応。Figmaノードとコードコンポーネントのマッピングを新たに登録する。ここで登録しておくと get_design_context が生成するコードの精度が上がる。
get_screenshot
Figma DesignとFigJamに対応。選択範囲のスクリーンショットを撮る。コード生成時にレイアウトの再現度を上げるために使われる。公式ドキュメントでは、トークン上限が気にならない限り常にONにしておくことを勧めている。
create_design_system_rules
ファイルのコンテキストは不要。デザインシステムの情報をまとめたルールファイルを生成する。AIエージェントがコードを書くとき、このファイルを参照してデザインシステムに沿った出力を出せるようになる。生成したファイルは rules/ か instructions/ ディレクトリに置く。
get_metadata
Figma Designに対応。レイヤーのID、名前、タイプ、位置、サイズといった情報をスパースなXMLで返す。デザインファイルが大きくてコンテキストを圧縮したいときに向いている。複数レイヤーの選択にもページ全体にも対応する。
get_figjam
FigJam専用。FigJamのダイアグラムをXMLメタデータとノードごとのスクリーンショットに変換する。アーキテクチャ図のようなFigJam上の成果物を、構造化データとしてAIエージェントに食わせたいときに使う。
generate_diagram
ファイルのコンテキストは不要。Mermaid構文からFigJam上にダイアグラムを生成する。フローチャート、ガントチャート、ステートダイアグラム、シーケンスダイアグラムに対応。自然言語で指示すればAIエージェントがMermaid構文を組み立ててくれるので、Mermaidの書き方を知らなくても動かせる。
whoami
Remote Server限定。認証済みユーザーのメールアドレス、所属プラン、プランごとのシートタイプを返す。
get_code_connect_suggestions
Figma Designに対応。Figmaのコンポーネントとコードのマッピング候補を自動で検出して提案する。Figma側のプロンプトからトリガーされる。
send_code_connect_mappings
Figma Designに対応。get_code_connect_suggestions で出てきたマッピングを確定する。提案してから確認するという2段階の流れになっている。
用途別の整理
13個あると把握しづらいので、用途で分けておく。
デザインからコードへの変換に使うのが get_design_context、get_screenshot、get_variable_defs、get_metadata の4つ。
Code Connectによるコンポーネント連携が get_code_connect_map、add_code_connect_map、get_code_connect_suggestions、send_code_connect_mappings の4つ。
FigJam関連が get_figjam と generate_diagram の2つ。
残りの generate_figma_design、create_design_system_rules、whoami はそれぞれ独立した役割を持っている。
DesktopとRemoteの使い分け
Desktop版は選択中のレイヤーをそのままプロンプトに渡せるのが利点だが、Figmaのデスクトップアプリが要る。generate_figma_design と whoami は使えない。
Remote版はローカル環境が不要で、generate_figma_design と whoami が使える。ただし選択ベースのプロンプトには対応しておらず、フレームやレイヤーのリンクを直接指定する必要がある。なお generate_figma_design はClaude Codeでしか動かない。
get_design_context の出力はReact + Tailwindがデフォルトだが、VueやHTML+CSS、iOSにも切り替えられる。Code Connect関連のツールが4つ揃っているので、デザインシステムのコンポーネントとコードの対応を維持しながらコード生成ができる。FigJam系のツールを使えば、設計段階のダイアグラムもワークフローに組み込める。
公式ドキュメント
Discussion