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

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

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

Cursor

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

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サーバー設定と、一般的なワークフロー用のAgent Skillsが含まれています。

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

claude plugin install figma@claude-plugins-official

AnthropicのClaude Codeプラグインと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を実行して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（およびオプションのコードベースグラウンディング）をFigmaJamプロジェクト計画ボードに変換します

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. 小さなセクションまたは個々のコンポーネント（カード、ヘッダー、サイドバーなど）のコードを生成します
2. 遅い、または動かなくなったと感じる場合は、選択範囲のサイズを縮小します

これにより、ユーザーとモデルの両方にとってコンテキストを管理しやすく保ち、結果をより予測可能にできます。

出力に何かが正しく見えない場合は、基本に立ち返ることが役立つことがよくあります：Figmaファイルの構造、プロンプトの書き方、送信されるコンテキスト。上記のベストプラクティスに従うことで大きな違いが生まれ、より一貫性のある再利用可能なコードにつながることがよくあります。

エージェントにコンテキストをもたらす

Make + MCP統合により、プロトタイプをデザインから本番環境へ移行するプロセスがよりスムーズになります。MakeプロジェクトをMCP経由でエージェントに直接接続することで、リソースを抽出し、コードベースで再利用できます。これにより、プロトタイプを実際のアプリケーションへ拡張する際の摩擦が軽減され、デザインの意図が実装まで忠実に引き継がれることが保証されます。

この統合により、以下のことが可能になります：

• プロジェクトコンテキストの取得：Makeから直接（個別ファイルまたはプロジェクト全体）
• 既存コードコンポーネントの利用を促す：ゼロから始める代わりに
• 実データでのプロトタイプ拡張：デザインの検証と本番化を迅速化

仕組み

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

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

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

ワークフロー例

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

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

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

アイコンガイドライン

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