Figma Context MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

Figmaデータをトークン効率の良いYAML/JSON形式で返します（生のAPI巨大レスポンスではありません）
コンポーネントインスタンスとそのオーバーライドを解決
デザイントークン（カラー、テキストスタイル、スペーシング）を名前付きで抽出
選択したノードの画像エクスポートによるビジュアルリファレンス
読み取り専用 — Figmaファイルへの書き込みは一切行いません

ライブデモ

実際の動作

figma.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add figma -- npx -y figma-developer-mcp

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Figma Context

FigmaフレームからReact/SwiftUI/Tailwindコードを生成する

👤 デザイン済み画面を実装するフロントエンド開発者 ⏱ ~30 min intermediate

使うタイミング： 画面やコンポーネントのFigmaフレームがあり、コードの最初の80%を忠実に生成したい場合に使用します。

前提条件

Figmaパーソナルアクセストークン — figma.com → Settings → Personal access tokens で発行。スコープは file_read に設定
FigmaファイルURL — FigmaファイルからURLをコピー。MCPがファイルキーとノードIDを自動抽出します

フロー

フレームデータを取得する

Get the Figma node at <paste figma URL with node-id>. Return its layout, text content, colors, and child structure.✓ コピーしました

→ 実際の値を含む階層的なノードデータが返される（'unable to fetch'ではなく）
データに基づいてコードを生成する

Generate a React + Tailwind component that matches this exactly. Use the actual hex colors and pixel values from the Figma data, not approximations.✓ コピーしました

→ 実際の値を参照したコード（例：bg-[#1A2B3C]でありbg-blue-500ではない）
エクスポートとクロスチェックする

Export the same frame as a PNG. Compare to your generated component's expected render and call out any differences.✓ コピーしました

→ 具体的な差分（アイコンの欠落、パディングのずれ等）が示される（'似ている'ではなく）

結果： ゼロから作り直すのではなく、微調整するだけで済むピクセル忠実な初稿が得られます。

注意点

オートレイアウトと絶対配置ではflex/gridへのマッピングが異なる — Figmaフレームがオートレイアウトを使用している場合はflexboxを、そうでない場合はabsoluteを優先するようClaudeに指示してください
ベクターアイコンがSVGパスとしてそのままインライン化される — アイコンは/icons/*.svgに個別に抽出し、コンポーネントとして参照させてください

組み合わせ： filesystem · github

Figmaデザイントークンをコードベースに同期する

👤 デザインシステムのメンテナー ⏱ ~20 min intermediate

使うタイミング： デザイナーがFigmaでパレットやタイポグラフィを更新し、トークンJSONを反映させる必要がある場合に使用します。

フロー

公開済みスタイルを取得する

From Figma file <key>, list every published color style, text style, and effect style. Group by category.✓ コピーしました

→ 名前と値を含む完全なトークンリスト
コードベースと差分を比較する

Read /design-tokens/tokens.json. Show me which tokens changed in Figma since this file was last synced (added, removed, value changed).✓ コピーしました

→ トークンごとの差分（旧値/新値）
変更を適用してPRを作成する

Update tokens.json to match Figma. Open a PR titled 'sync: design tokens YYYY-MM-DD' with the diff in the description.✓ コピーしました

→ レビュー可能な差分を含むPRが作成される

結果： コード側のトークンがFigmaと常に同期され、「なぜブランドカラーが微妙にずれているのか」というチケットがなくなります。

注意点

リネームされたトークンが削除+追加として表示される — Claudeに同じ値・類似名のパターンからリネームをヒューリスティックに検出させ、人間のレビュー用にフラグを立てさせてください

組み合わせ： filesystem · github

Figmaファイルから開発スペック（スペーシング、サイズ、コピー）を抽出する

👤 Dev Modeなしで Figmaハンドオフをトリアージするエンジニア ⏱ ~15 min beginner

使うタイミング： Figma Dev Modeがないが、画面のピクセルスペックが必要な場合に使用します。

フロー

画面を取得する

For Figma node <id>, give me a flat list of every leaf element with its absolute position, size, and any text content.✓ コピーしました

→ x/y/w/hを含む要素のテーブル形式ダンプ
スペックドキュメントを作成する

Turn that into a developer-facing spec: section by section, with spacing values (margin/padding) inferred from positions.✓ コピーしました

→ 具体的なCSS相当の値を含むスペックドキュメント
エッジケースを確認する

What happens when a text exceeds the designed width? Does the design specify wrap behavior, truncation, or growth? If unspecified, flag for the designer.✓ コピーしました

→ 暗黙の仮定ではなく、未解決の質問リスト

結果： 全員分のDev Modeシートを購入することなく、実装可能なスペックが得られます。

注意点

デザイナーがトークン値ではなく任意のスペーシング（13px、17pxなど）を使用している — Claudeに最も近いトークン値に丸めさせつつ、差異をログに記録させ、デザイナーが修正できるようにしてください

組み合わせ： filesystem

組み合わせ

他のMCPと組み合わせて10倍の力を

figma + filesystem

Figmaからコードを生成し、コンポーネントファイルに直接書き込む

Pull Figma node <id>. Generate a React component matching it exactly, write it to src/components/Card.tsx using filesystem MCP.✓ コピーしました

figma + github

新しいコンポーネントとFigmaリンクをPR説明に含めてPRを作成する

Generate the Card component from Figma <url>, commit, push, and open a PR with both the code change and the source Figma link.✓ コピーしました

figma + chrome-devtools

ビルドしてブラウザで表示し、スクリーンショットを撮ってFigmaエクスポートと視覚的に比較する

Build the new component. Render it at localhost:3000/preview/card. Take a screenshot. Compare visually against the Figma PNG export and list any visual differences.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
get_figma_data	fileKey: str, nodeId?: str, depth?: int	フレームまたはファイル全体をエージェントフレンドリーな形式で取得する	1 Figma API call (free tier: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	デザインアセット（アイコン、イラスト、スクリーンショット）をローカルにエクスポートする	1 Figma render call per node

コストと制限

運用コスト

APIクォータ: Figma無料プラン：1,500リクエスト/分。インタラクティブな使用には十分です。
呼び出しあたりのトークン: コンパクトモードではフレームあたり約1〜5kトークンに収まります。ファイル全体は肥大化する可能性があるため、nodeIdで制限してください。
金額: MCPは無料です。Figma APIアクセスはどのFigmaアカウントでも無料です。
ヒント: 可能な限りnodeIdを指定してください。ファイル全体の取得は無駄が多くなります。

セキュリティ

権限、シークレット、影響範囲

最小スコープ： file_read

認証情報の保管： パーソナルアクセストークンを環境変数FIGMA_API_KEYに設定してください。コミットしないこと。

データ送信先： すべての呼び出しはapi.figma.comに送信されます

絶対に付与しない：

file_write — MCPには不要です。書き込み権限のあるトークンを使用すると、意図しない編集のリスクがあります

パーソナルアクセストークンは強力です。読み取り専用にスコープを絞ったトークンを使用し、定期的にローテーションしてください。
Figmaファイルの内容（デザイン）はコンテキストとしてLLMプロバイダーに送信されます。ファイルが機密性の高い場合は、ファイル全体ではなくノード単位での取得を推奨します。

トラブルシューティング

よくあるエラーと対処法

403 Forbidden

トークンにそのファイルへのアクセス権がありません。ファイルがトークンのアクセス可能なチーム/ワークスペースにあるか確認してください。共有コミュニティファイルの場合は、別のトークンを使用してください。

確認： curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

https://www.figma.com/file/<KEY>/...またはhttps://www.figma.com/design/<KEY>/...の形式を使用してください。URLパースに失敗する場合はfileKeyを明示的に指定してください。

Response is enormous and blows context

nodeIdを指定してフレームにスコープを絞るか、depth: 2で探索深度を制限してください。

Image export fails with 'unsupported node type'

一部のノードタイプ（セクション、スライス）はエクスポートできません。実際のフレームまたはコンポーネントを選択してください。

代替案

Figma Context 他との比較

代替案	代わりに使う場面	トレードオフ
Figma official Dev Mode MCP (beta)	Figma Dev Modeを持っており、公式インテグレーションを利用したい場合	より新しく、Dev Modeサブスクリプションが必要。時間とともにFigma機能のより深いサポートが期待される
Figma REST API directly via shell	完全なAPIサーフェス（変数、ブランチ、コメント）を利用したい場合	生のAPIレスポンスは巨大で、LLMが処理しにくい

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る