Figma

Figma MCP サーバーガイド

Figma MCP サーバーは、Figma のデザインファイルからコードを生成する AI エージェントに、重要なデザイン情報とコンテキストを提供し、Figma をワークフローに直接取り込みます。

メモ

Figma からデータを読み取る Figma MCP サーバーのツールには、レート制限が適用されます。Figma ファイルに書き込むツールなど、一部のツールはレート制限の対象外です。

Starter プランをご利用のユーザー、または有料プランで View シートもしくは Collab シートをご利用のユーザーは、月あたり最大 6 回のツール呼び出しに制限されます。

Professional、Organization、または Enterprise プランでDev シートまたは Full シートをご利用のユーザーには、1 分あたりのレート制限が適用されます。この制限は、Tier 1 の Figma REST APIと同じです。Figma REST API と同様に、Figma はレート制限を変更する権利を留保します。

Figma MCP サーバーのドキュメント一式については、開発者向けドキュメントをご覧ください。Figma MCP サーバーおよび関連リソース（これらのスキルを含む）を使用すると、Figma Developer Termsに同意したものとみなされます。これらのスキルは現在、ベータ機能として提供されています。

機能

• キャンバスへの書き込み（リモートサーバーのみ）：MCP クライアントから Figma のネイティブコンテンツを直接作成、変更できます。適切なスキルがあれば、デザインシステムを信頼できる情報源として、エージェントが Figma ファイル内のフレーム、コンポーネント、変数、自動レイアウトを作成、更新できます。

  注： Figma では、AI エージェントへの対応を急速に改善しています。キャンバスへの書き込み機能は、将来的に使用量に応じた有料機能となる予定ですが、現在はベータ期間中のため無料でご利用いただけます。

• プレースホルダー画像の生成：ソース画像、キャプチャ画像、ライブラリ画像が利用できない場合、エージェントは許可を得て Figma AI のクレジット使用を明示したうえで、generate_image を使用できます。生成した画像は upload_assets でアップロードし、デザインに適用します。

• 選択したフレームからコードを生成

  Figma のフレームを選択して、コードに変換します。新しいフローの構築やアプリ機能の反復開発を行うプロダクトチームに最適です。

• デザインコンテキストの抽出

  変数、コンポーネント、レイアウトデータを IDE に直接取り込みます。デザインシステムやコンポーネントベースのワークフローで特に役立ちます。

• Code Connect でコードをよりスマートに

  実際のコンポーネントを再利用して、出力品質を高めます。Code Connect により、生成されたコードの一貫性をコードベース全体で保てます。

  Code Connect の詳細はこちら →

• Web ページから Figma デザインを生成（順次展開中）

  AI コーディングエージェントから、Web ページをキャプチャ、インポート、または変換して、Figma デザインを直接作成します。

インストールとセットアップ

Figma MCP サーバーに接続する

MCP クライアントによって、セットアップ方法が多少異なります。お使いのクライアントに対応する以下の手順に従って、Figma MCP サーバーに接続してください。

VS Code

1. ショートカット ⌘ Shift P を使用して MCP:Add Server を検索します。
2. HTTP を選択します。
3. 検索バーにサーバーの URL https://mcp.figma.com/mcp を貼り付けます。その後 Enter を押します。
4. サーバー ID の入力を求められたら、figma と入力します。
5. このサーバーをグローバルに追加するか、現在のワークスペースのみに追加するかを選択します。確定すると、mcp.json ファイルに次のような設定が表示されます:

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

6. ⌥⌘B または ⌃⌘I を使用してチャットツールバーを開き、エージェントモードに切り替えます。
7. チャットを開いた状態で、#get_design_context と入力して、Figma MCP サーバーのツールが利用可能であることを確認します。ツールが一覧に表示されない場合は、VS Code を再起動してください。

メモ

VS Code で MCP を使用するには、アカウントで GitHub Copilot が有効になっている必要があります。

詳細については、VS Code の公式ドキュメントを参照してください。

Cursor

Cursor で Figma MCP サーバーをセットアップする推奨の方法は、Figma プラグインをインストールすることです。これには MCP サーバー設定に加えて、一般的なワークフロー向けのエージェントスキルが含まれています。

Cursor のエージェントチャットで次のコマンドを入力して、プラグインをインストールします:

/add-plugin figma

プラグインには以下が含まれています:

• Figma MCP サーバーの MCP サーバー設定
• デザインの実装、Code Connect によるコンポーネントの接続、デザインシステムルールの作成のためのスキル
• Figma MCP サーバーからの適切なアセット処理のためのルール

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

Claude Code

Claude Code で Figma MCP サーバーをセットアップする推奨の方法は、Figma プラグインをインストールすることです。これには MCP サーバー設定に加えて、一般的なワークフロー向けのエージェントスキルが含まれています。

Anthropic の公式プラグインマーケットプレイスからプラグインをインストールするには、次のコマンドを実行します。

claude plugin install figma@claude-plugins-official

Anthropic の Claude Code Plugins と Agent Skills について詳しくはこちらをご覧ください。

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

Gemini CLI

次のコマンドを実行して、Gemini CLI 用の Figma 拡張機能をインストールします:

gemini extensions install https://github.com/figma/mcp-server-guide

インストールしたら、gemini を実行し、続けて CLI 内で次のコマンドを実行して Figma で認証します:

/mcp auth figma

拡張機能をアンインストールするには:

gemini extensions uninstall figma

その他のエディター

Streamable HTTP をサポートするその他のコードエディターやツールも、Figma MCP サーバーに接続できます。

別のエディターやツールを使用している場合は、そのドキュメントを確認して、Streamable HTTP ベースの通信をサポートしていることを確かめてください。サポートしている場合は、次の設定を使用して Figma MCP サーバーを手動で追加できます:

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

MCP クライアントへのプロンプト

Figma MCP サーバーは、LLM が Figma のデザインを解釈するのを支援する一連のツールを提供します。接続すると、MCP クライアントにプロンプトを送信して特定のデザインノードにアクセスできます。

AI クライアントに Figma のデザインコンテキストを提供するには:

1. Figma のフレームまたはレイヤーへのリンクをコピーします。
2. 選択した URL のデザインを実装できるよう、クライアントにプロンプトを送信します。

メモ

クライアントは選択した URL に移動することはできませんが、MCP サーバーがどのオブジェクトの情報を返すべきかを識別するために必要な node-id を抽出します。

ツールとスキル

Figma MCP サーバーが提供するツールの一覧は、開発者向けドキュメントで確認できます。

対応エージェント向けのFigmaプラグインに含まれるスキルについては、Figmaヘルプセンターで詳しく確認できます。エージェントによっては、connector、extension、powerという用語が使われることもありますが、いずれも同じスキルセットを指します。

このリポジトリには、Figmaプラグインに含まれていないスタンドアロンのワークフロースキルもあります。

• workflow-skills/video-interaction-mapper：UIの録画を注釈付きのFigmaストーリーボードに変換します
• workflow-skills/generate-project-plan：PRD（必要に応じてコードベースの情報も使用）からFigJamのプロジェクト計画ボードを作成します

MCP のベストプラクティス

生成されるコードの品質は、いくつかの要因によって左右されます。自分で調整できる要因もあれば、使用するツールに左右される要因もあります。整合性のあるきれいな出力を得るためのヒントを紹介します。

より良いコードのためにFigmaファイルを構成する

MCPとAIアシスタントが、システムに沿った明確で一貫性のあるコードを生成できるよう、デザインの意図が伝わる最適なコンテキストを提供しましょう。

• 再利用するもの（ボタン、カード、入力欄など）にはコンポーネントを使用します
• **Code Connectを使ってコンポーネントをコードベースにリンクします。**コード内でコンポーネントを一貫して再利用するには、これが最適な方法です。設定しない場合、モデルは推測することになります。
• 余白、色、角丸、タイポグラフィには変数を使用します
• レイヤーには意味のある名前を付けます（例：Group 5ではなくCardContainer）
• レスポンシブ対応の意図を伝えるためにAuto layoutを使用します

ヒント

コードを生成する前に、Figmaでフレームのサイズを変更し、期待どおりに動作することを確認してください。

• 注釈と開発者向けリソースを使用して、見た目だけでは伝わりにくいデザインの意図（動作、配置、応答の仕方など）を伝えます

AIを導く効果的なプロンプトを書く

MCPはAIアシスタントに構造化されたFigmaデータを渡しますが、結果を左右するのはプロンプトです。適切なプロンプトを使うと、次のような指示ができます。

• 結果を使用するフレームワークやスタイルシステムに合わせる
• ファイル構成と命名規則に従う
• 特定のパス（例：src/components/ui）にコードを追加する
• 新しいファイルを作成するのではなく、既存のファイルにコードを追加または変更する
• 特定のレイアウトシステム（例：grid、flexbox、absolute）に従う

例：

• 「このフレームからiOS SwiftUIコードを生成してください」
• 「このレイアウトにはChakra UIを使用してください」
• 「src/components/uiのコンポーネントを使用してください」
• 「これをsrc/components/marketing/PricingCard.tsxに追加してください」
• 「当社のStackレイアウトコンポーネントを使用してください」

プロンプトは、チームメイトに渡す依頼書のようなものだと考えてください。意図を明確にするほど、より良い結果が得られます。

必要に応じて特定のツールを呼び出す

MCPには複数のツールがあり、それぞれ異なる種類の構造化コンテキストをAIアシスタントに提供します。ツールが増えるにつれて、アシスタントが適切なツールを自動的に選択できないことがあります。結果が期待どおりでない場合は、プロンプトで明示してみてください。

• get_design_contextは、Figmaで選択した要素をReact + Tailwindの構造化された表現で提供します。これは出発点となるもので、プロンプトに応じてAIアシスタントが任意のフレームワークやコードスタイルに変換できます。
• get_variable_defsは、選択した要素で使用されている変数やスタイル（色、余白、タイポグラフィなど）を抽出します。生成コードでモデルがトークンを直接参照できるようになります。

たとえば、トークンではなく生のコードが出力される場合は、次のように試してください。

• 「このフレームで使われている変数名と値を取得してください。」

カスタムルールを追加する

プロジェクトレベルのガイダンスを設定して、新しい開発者へのオンボーディングノートのように、出力の一貫性を保ちます。たとえば、次のような内容です。

• 推奨するレイアウトのプリミティブ
• ファイルの整理方法
• 命名パターン
• ハードコードしてはいけないもの

MCP クライアントで使用する指示ファイルの形式であれば、どのような形式でも指定できます。

例：

一貫して質の高い出力を確保する

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

一般的な品質ルール

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

これらを一度追加するだけで、繰り返しプロンプトを入力する必要性を大幅に減らし、チームメイトやエージェントが同じ基準に一貫して従えるようになります。

ルールの構成方法については、IDE または MCP クライアントのドキュメントを確認し、チームに最適な方法を試してみてください。明確で一貫したガイダンスは、多くの場合、より再利用しやすいコードにつながり、やり取りの回数も減らせます。

大きな選択範囲を分割する

画面をコンポーネントや論理的なまとまりなどの小さな単位に分けると、より速く、信頼性の高い結果が得られます。

選択範囲が大きいとツールの動作が遅くなったり、エラーが発生したり、応答が不完全になったりすることがあります。特に、モデルが処理するにはコンテキストが多すぎる場合にその傾向があります。代わりに、次のようにします。

1. 小さなセクションや個別のコンポーネント（例：Card、Header、Sidebar）のコードを生成する
2. 動作が遅い、または止まっているように感じたら、選択範囲を小さくする

こうすることでコンテキストを管理しやすく保ち、自分にとってもモデルにとっても、より予測しやすい結果を得られます。

出力に少し違和感がある場合は、基本に立ち返ると解決することがよくあります。Figma ファイルの構成、プロンプトの書き方、送信するコンテキストを見直してみてください。上記のベストプラクティスに従うことで大きな違いが生まれ、より一貫性があり、再利用しやすいコードにつながることがよくあります。

Make のコンテキストをエージェントに渡す

Make と MCP の連携により、プロトタイプをデザインから本番環境へ移行しやすくなります。Make のプロジェクトを MCP 経由でエージェントに直接接続すると、リソースを抽出してコードベースで再利用できます。これにより、プロトタイプを実際のアプリケーションに拡張する際の手間が減り、デザインの意図を実装に忠実に反映できます。

この連携では、次のことができます。

• Make からプロジェクトのコンテキストを直接取得する（個別のファイルまたはプロジェクト全体）
• 既存のコードコンポーネントを使用するようプロンプトで指示し、ゼロから作成するのを避ける
• プロトタイプを実際のデータで拡張し、デザインをより速く検証して本番環境に適用する

仕組み

メモ

この連携では、エージェントが Make プロジェクトからコンテキストを直接取得できる MCP のリソース機能を利用します。MCP リソースに対応したクライアントでのみ利用できます。

Make からリソースを取得する手順

1. 有効な Make のリンクを指定して、エージェントにコンテキストを取得するよう指示する
2. Make プロジェクトで利用できるファイルの一覧を受け取る
3. プロンプトが表示されたら、取得したいファイルをダウンロードする

ワークフローの例

目標： Make で定義されたデザインと動作に一致するポップアップコンポーネントを、本番コードベースに実装する。

1. Make プロジェクトのリンクをエージェントに共有します。
2. エージェントに次のように指示します。「この Make ファイルからポップアップコンポーネントの動作とスタイルを取得して、私のポップアップコンポーネントを使って実装したいです。」

エージェントは Make から関連するコンテキストを取得し、プロトタイプの機能とスタイルを既存のポップアップコンポーネントに拡張する方法を案内します。

アイコンのガイドライン

このリポジトリに含まれるアイコンの表示方法については、Figma ブランド使用ガイドラインを参照してください。