Figma-Context-MCP-AIR

Figma Context MCP AIR

AI コーディングエージェントから Figma のデザインデータにアクセスできます。
あらゆるフレームワークで、ピクセル単位で正確なデザインを一度で実装できます。

---

これは何ですか？

figma-context-mcp-air は、AI コーディングツール（Cursor、Claude、Windsurf など）から Figma のデザインデータに直接アクセスできる Model Context Protocol（MCP） サーバーです。

デザインからコードまでのワークフロー全体をカバーする 9 つのツールを提供します。

ツール	説明
get_figma_data	レイアウト、テキスト、ビジュアル、コンポーネントを含む完全なデザインデータ（YAML/JSON）
get_design_context	公式 Figma MCP ツールの命名規則に合わせた、get_figma_data の別名
download_figma_images	Figma ノードの PNG/SVG アセットをローカルファイルシステムにダウンロード
get_screenshot	AI が視覚的に確認できるよう、Figma ノードを base64 PNG としてキャプチャ
get_metadata	完全なデータを抽出する前にノードをすばやく見つけるための、簡潔な XML レイヤー階層
get_variable_defs	色、タイポグラフィ、間隔、エフェクト、スタイルなど、すべてのデザイントークン
whoami	Figma の認証を確認し、プランの種類をチェック
create_design_system_rules	プロジェクト用のフレームワーク固有のデザインシステムドキュメントを生成
get_figjam	FigJam ボードのコンテンツ（付箋、コネクター、図形）を XML として抽出

AI にデータを返す前に、サーバーは Figma API の生レスポンスを簡素化してフィルタリングし、コード生成に必要なレイアウトとスタイル情報のみを残します。これによりノイズが減り、AI の精度が大幅に向上します。

---

はじめに

このサーバーを使用するには、Figma Personal Access Token が必要です。
Figma API アクセストークンの作成方法 →

MacOS / Linux

これを MCP クライアントの設定ファイル（例：~/.cursor/mcp.json、claude_desktop_config.json）に追加します。

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp-air", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-context-mcp-air", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

環境変数の使用

フラグとして渡す代わりに、env フィールドで FIGMA_API_KEY を設定することもできます。

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp-air", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

---

仕組み

1. AI コーディングツールのチャットを開きます（例：Cursor のエージェントモード）。
2. Figma ファイル、フレーム、またはコンポーネントへのリンクを貼り付けます。
3. AI にデザインの実装を依頼します。
4. AI は get_design_context（または get_figma_data）を呼び出して構造化されたデザインデータを取得し、その後コードを記述します。

より高度なワークフローでは、AI は次のことができます。

• get_screenshot を呼び出して、実装前にノードを視覚的に確認する
• get_variable_defs を呼び出してデザイントークンを抽出し、CSS 変数に対応付ける
• get_metadata を呼び出して、完全なデータを取得する前にレイヤーの概要をすばやく確認する
• create_design_system_rules を呼び出して、プロジェクト固有のコーディングガイドラインを生成する

---

設定オプション

CLI フラグ	環境変数	デフォルト	説明
--figma-api-key	FIGMA_API_KEY	(必須)	Figma Personal Access Token
--figma-oauth-token	FIGMA_OAUTH_TOKEN	—	OAuth Bearer トークン（PAT の代替）
--port	PORT	3333	HTTP サーバーのポート（HTTP モードのみ）
--json	OUTPUT_FORMAT=json	YAML	YAML の代わりに JSON を返す
--skip-image-downloads	SKIP_IMAGE_DOWNLOADS	false	download_figma_images ツールを無効にする
--image-dir	—	—	ダウンロードした画像の保存先ディレクトリを指定
--stdio	NODE_ENV=cli	—	stdio モードで実行（MCP クライアントで必須）

---

ツールリファレンス

get_figma_data / get_design_context

ファイルまたは特定のノードのFigmaデザインデータを取得し、簡素化します。レイアウト（フレックスボックス／グリッド）、タイポグラフィ、色、境界線、エフェクト、コンポーネントのメタデータをYAMLまたはJSONで返します。

パラメーター：

• fileKey (required) — FigmaのURLに含まれるキー：figma.com/design/<fileKey>/...
• nodeId (optional) — URLに含まれるノードID：?node-id=<nodeId>。形式は 1234:5678 を使用します。
• depth (optional) — 走査する階層の深さです。明示的に必要な場合のみ使用してください。

---

download_figma_images

FigmaノードのPNGまたはSVGレンダリングをローカルファイルシステムにダウンロードします。

パラメーター：

• fileKey (required)
• nodes (required) — { nodeId, fileName } オブジェクトの配列
• localPath (required) — 画像の保存先ディレクトリ
• pngScale (optional) — PNGエクスポートのスケール係数（デフォルト：1）
• svgOptions (optional) — SVGエクスポートのオプション（テキストのアウトライン化、IDの含有、ストロークの簡略化）

---

get_screenshot

Figmaノードを2xのPNGとしてキャプチャし、ディスクに保存します。ビジュアル検証に便利です。

パラメーター：

• fileKey (required)
• nodeId (required)
• localPath (optional) — 保存先ディレクトリ（デフォルト：./screenshots）
• fileName (optional) — 拡張子を含まない出力ファイル名

---

get_metadata

ノード階層の簡易XML表現（depth=2）を返します。デザインコンテキスト全体を取得する前に、レイヤーをすばやく確認するために使用します。

パラメーター：

• fileKey (required)
• nodeId (required)

---

get_variable_defs

Figmaファイルからすべてのデザイントークンを取得します。変数コレクション（色、スペーシング、タイポグラフィ）と公開済みスタイル（エフェクト、テキストスタイル、塗りスタイル）が含まれます。CSSカスタムプロパティの構文でデータを返します。

パラメーター：

• fileKey (required)

---

whoami

認証済みユーザーのFigmaアカウント情報（名前、メールアドレス、プランの種類）を返します。APIキーが機能しているかの確認に便利です。

パラメーター： なし

---

create_design_system_rules

プロジェクト固有のデザインシステムルールをまとめた包括的なMarkdownテンプレートを生成します。使用する言語とフレームワークの組み合わせに合わせて調整されます。出力を CLAUDE.md またはプロジェクトのAI向け指示ファイルに保存してください。

パラメーター：

• clientLanguages (required) — 例："typescript,javascript"
• clientFrameworks (required) — "react"、"vue"、"svelte"、"angular"、または"unknown"

---

get_figjam

FigJamボードのコンテンツ（付箋、コネクター、図形、セクション）を、スクリーンショットURLを含むXMLとして抽出します。

パラメーター：

• fileKey (required)
• nodeId (optional) — FigJamボード内の特定のセクションまたはフレーム

---

開発

# Install dependencies
pnpm install

# Build
pnpm build

# Development mode (HTTP, with watch)
pnpm dev

# Development mode (stdio)
pnpm dev:cli

# Run tests
pnpm test

# Type check
pnpm type-check

# Lint
pnpm lint

---

コントリビューション

コントリビューションを歓迎します！プルリクエストを送信する前に、CONTRIBUTING.mdをお読みください。

大規模な機能を追加する場合は、まずイシューを作成して、実装方針について話し合ってください。

---

ライセンス

MIT — LICENSEを参照してください。

---

謝辞

このプロジェクトはGLips/Figma-Context-MCP（Framelink MCP サーバー）のフォークであり、公式Figma MCPツールの全機能に対応する追加ツールを実装しています。