Figma

Figma MCP サーバーガイド

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

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

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

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

Figma MCP サーバーのドキュメントの完全なセットについては、開発者向けドキュメントを参照してください。Figma MCP サーバーおよび関連リソース（これらのスキルを含む）を使用することで、Figma 開発者利用規約に同意したものとみなされます。これらのスキルは現在ベータ機能として利用可能です。

機能

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

  注: Figma が AI エージェントのサポートを迅速に改善しています。キャンバスへの書き込み機能は、最終的には使用量ベースの有料機能になる予定ですが、現在はベータ期間中無料で利用できます。

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

  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 を再起動します。

[!NOTE] 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 プラグインとエージェントスキルの詳細をご覧ください。

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 を実行して Figma で認証し、CLI 内で次のコマンドを実行します:

/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 でデザインの実装を支援するようにクライアントにプロンプトします。

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

ツールとスキル

Figma は、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 を介してコンポーネントをコードベースにリンクします。これはコードで一貫したコンポーネントの再利用を実現する最良の方法です。これがないと、モデルは推測することになります。
• スペーシング、色、角丸、タイポグラフィには変数を使用します。
• レイヤーに意味のある名前を付けます（例: CardContainer、Group 5 ではなく）
• オートレイアウトを使用して、レスポンシブな意図を伝えます。

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

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

効果的なプロンプトを作成して AI を導く

MCP は AI アシスタントに構造化された Figma データを提供しますが、結果を左右するのはプロンプトです。適切なプロンプトは次のことを可能にします:

• 結果をフレームワークやスタイリングシステムに合わせる
• ファイル構造と命名規則に従う
• 特定のパスにコードを追加する（例: src/components/ui）
• 新しいファイルを作成する代わりに、既存のファイルにコードを追加または変更する
• 特定のレイアウトシステム（グリッド、フレックスボックス、アブソリュートなど）に従う

例:

• 「このフレームから 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から直接（個別ファイルまたはプロジェクト全体）
• 既存のコードコンポーネントの使用をプロンプト：ゼロから始める代わりに
• 実データでプロトタイプを拡張：デザインの検証と本番化を迅速化

仕組み

[!NOTE] この統合はMCPのリソース機能を活用しており、エージェントがMakeプロジェクトから直接コンテキストを取得できます。MCPリソースをサポートするクライアントでのみ利用可能です。

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

1. 有効なMakeリンクを提供して、エージェントにコンテキストの取得をプロンプト
2. Makeプロジェクトから利用可能なファイルのリストを受け取る
3. プロンプトが表示されたら、取得したいファイルをダウンロード

ワークフロー例

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

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

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

アイコンガイドライン

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