Figma MCP
Figma公式MCPサーバー。AIエージェントがデザインを読み取り、本番コードに変換します。
インストール
トランスポート: http
claude mcp add --transport http figma https://mcp.figma.com/mcp
ツール一覧 (32)
get_design_context
Gets design context and code for a layer or selection (default output React + Tailwind).
get_metadata
Gets a lightweight XML outline of a selection (IDs, names, types, positions, sizes).
get_screenshot
Takes a screenshot of a selection so the agent can see the design.
get_variable_defs
Lists variables and styles used in a selection (colors, spacing, typography).
get_code_connect_map
Gets Code Connect mappings for selected instances.
get_code_connect_suggestions
Suggests Code Connect mappings (Figma-prompted workflow tool).
get_context_for_code_connect
Gets component metadata for Code Connect templates (remote only, Figma-prompted).
get_figjam
Converts FigJam diagrams to XML.
get_libraries
Lists subscribed and available libraries (remote only).
search_design_system
Searches libraries for components, variables, and styles (remote only).
download_assets
Downloads exports and original source images for up to 20 nodes (remote only).
get_motion_context
Gets keyframe animation data and CSS/Motion code snippets for an animated node.
get_shader
Reads a shader's source.
list_shaders
Lists shader effects and fills in your library.
list_file_shaders
Lists shaders used in a specific file (remote only).
get_generative_plugin
Reads a generative plugin's source (remote only).
list_generative_plugins
Lists generative plugins in your library (remote only).
whoami
Gets your identity, plans, and seats (remote only).
use_figma
General-purpose tool to create, edit, delete, or inspect content in Figma files (remote only).
create_new_file
Creates a blank Figma Design, FigJam, or Figma Slides file (remote only).
generate_figma_design
Turns live web UI into design layers (remote only).
generate_diagram
Generates a FigJam diagram from a description or Mermaid syntax (remote only).
generate_image
Generates and places an image in a Figma file (remote only).
html_to_figma
Converts an HTML document into design layers (remote only).
upload_assets
Uploads images and SVGs into a Figma file (remote only).
send_code_to_figma
Imports a local project into Figma as a Make file or code layer (remote only).
add_code_connect_map
Maps a Figma component to a code component.
send_code_connect_mappings
Confirms suggested Code Connect mappings (Figma-prompted).
create_shader
Creates a shader effect or fill starter (remote only).
update_shader
Updates a shader's source (remote only).
create_generative_plugin
Creates a generative plugin starter (remote only).
update_generative_plugin
Updates a generative plugin's source (remote only).
品質とセキュリティ
料金
Free to connect; requires a Figma account. The remote server authenticates with your Figma login.
Figma MCPレビュー:デザインファイルを本番コードに変える
デザインからコードへの受け渡しは、いつも同じところで詰まります。デザインはFigmaに、コードはエディタにあり、その間に人が座ってピクセルをコンポーネントに翻訳し、余白や色や挙動を推測します。結果は遅く、情報が欠け、細かなズレはレビューでしか見つかりません。
Figma MCPは、その中間から人を外します。Figma公式のMCPサーバーで、Figmaがホストするリモートエンドポイントにあり、AIエージェントがデザインファイルへ直接、構造化された形でアクセスできます。フレーム、コンポーネント、変数、コードレイヤーをFigmaが保存する通りに読み取り、実装を書き出します。デザインからコードへの変換はMCPの代表的な使い方であり、これが公式のやり方です。
Figma MCPとは?
Figma MCPはFigmaが運用するリモートMCPサーバーです。クライアントをFigmaのエンドポイントに1つのコマンドか短いJSONで接続し、Figmaアカウントでサインインすれば、エージェントはデザインを取得し、変数を確認し、コードを生成できます。ローカルでサーバーを動かす必要も、パッケージを入れる必要もありません。サーバーはFigma側にあり、クライアントはHTTPで通信します。
サーバーは32のツールを提供し、読み取りと書き込みに分かれます。読み取りツールはデザイン、フレーム、特定のノードを取得し、変数とコンポーネントを一覧し、スクリーンショットを取ります。書き込みツールはフレームの作成と編集、テキストとレイアウトの設定、変数の適用を行います。公式ガイドリポジトリには、エージェントの使い方を教えるプラグインとスキルもあり、クリーンなコンポーネントベースの出力を生むデザインからコードへのワークフローが含まれます。
主な機能
1. どんなデザインも構造化データとして読む
エージェントはデザイン、フレーム、ノードをスクリーンショットの推測ではなく構造化データとして取得します。レイアウト、テキスト、色、余白、コンポーネント構造がすべてデータとして渡され、エージェントはそれを推論して忠実に再現できます。
2. ピクセルだけでなく変数とデザインシステム
色、書体、余白の変数が直接公開されるため、生成されるコードは値を直書きするのではなくデザイントークンを使います。出力はデザインシステムと一致したままになり、一度きりのスタイルに漂いません。
3. Figmaへ書き戻せる
書き込みツールにより、エージェントはFigma内でフレームを作成し、テキストを編集し、レイアウトを調整できます。ループは双方向です。デザインからコードへ、そしてコード主導の編集がデザインファイルに戻ります。
4. 目視確認のためのスクリーンショット
エージェントはフレームやファイル全体のスクリーンショットを取得でき、自分の出力をデザインと照らし合わせ、視覚的な違いを自分で修正できます。盲目で納品することはありません。
5. 公式スキルとプラグイン
公式ガイドリポジトリにはFigmaプラグインと既製のスキルがあり、エージェントにデザインからコードへのワークフローを教えます。フレームの選び方、コンポーネントの扱い方、生成コードの構成方法などが含まれます。
仕組み
MCPクライアントをFigmaのリモートエンドポイントに接続し、Figmaアカウントで認証します。Claude Codeでは1つのコマンド、CursorとVS Codeでは短いJSONです。接続したら、エージェントにFigmaファイルや特定のフレームを示して実装させます。エージェントはデザインデータを読み、プロジェクトにコードを生成し、スクリーンショットで結果がデザインと一致するか確認できます。
サーバーはFigmaがホストするリモートサービスなので、自分で保守したり動かし続けたりする必要はありません。アクセスはFigmaアカウントで管理され、エージェントはあなたが許可したファイルだけを見ることができます。
誰に向いているか
Figmaのデザインを実装するフロントエンド開発者、デザインシステムを維持するデザインエンジニア、受け渡しをボトルネックにしたくないプロダクトチームです。ワークフローがすでにFigmaとコーディングエージェントで回っているなら、この接続が両者を直接つなげます。
料金
接続は無料で、Figmaアカウントが必要です。リモートサーバーはFigmaログインで認証し、利用はFigmaプランに従います。
長所と短所
長所
- 公式サーバー:デザインデータは権威ある出所で、スクレイピングや推測ではない
- リモートでホスト:ローカルへのインストールや実行、更新が不要
- 変数とデザイントークンがデータとして渡され、出力が体系内に収まる
- 読み書き双方向で、スクリーンショットによる検証も可能
短所
- 独自規約:サーバーとデータはFigmaの開発者規約に従い、オープンライセンスではない
- FigmaアカウントとFigmaのホストエンドポイントへのネットワークアクセスが必要
- Claude Desktopには公開されたJSON設定がなく、Figmaコネクタ経由で接続する
最終評価
プロダクトがFigmaでデザインされ、AIエージェントが構築するなら、これが最初に入れるべきMCPサーバーです。公式で、ホストされており、ソフトウェア開発で最も一般的な受け渡しを、デザインとコードの直接の対話に変えます。まず1つのフレームから始め、出力とデザインを比べて、エージェント自身に差を埋めさせましょう。








