Figma MCP

Figma公式MCPサーバー。AIエージェントがデザインを読み取り、本番コードに変換します。

MCPサーバー
MCPFigmaDesign to CodeDeveloper Tools
認証済み

インストール

トランスポート: 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).

品質とセキュリティ

ライセンス40
メンテナンス90
セキュリティ85
ドキュメント95
ライセンス: Proprietary (Figma Developer Terms)
バージョン: 2.2.174
最終更新: 2026-11-09

料金

Free to connect; requires a Figma account. The remote server authenticates with your Figma login.

Figma MCP
Figma MCP
Figma MCP
Figma MCP

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つのフレームから始め、出力とデザインを比べて、エージェント自身に差を埋めさせましょう。

GitHubでFigma MCPを試す