Figma MCP Server

Figma MCP サーバー

この Model Context Protocol サーバーを使うと、Cursor、Windsurf、Cline などの AI 搭載コーディングツールから Figma ファイルにアクセスできます。

Cursor が Figma のデザインデータにアクセスできる場合、スクリーンショットを貼り付けるなどの別の方法と比べて、デザインを一度で正確に作成する精度が大幅に向上します。

すぐに始めるには、詳しくは設定をご覧ください。

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

強化された CSS 抽出機能

この強化版 MCP サーバーでは、Figma のデザインから詳細な CSS プロパティを抽出して提供できるため、デザインをより正確にコードへ変換できます。

主な機能：

• 詳細な CSS プロパティ：すべての要素から正確な CSS 値を抽出します
• 完全なスタイル設定：色、寸法、境界線、シャドウ、タイポグラフィなどを含みます
• 正確なレンダリング：スクリーンショットではなく適切なスタイルを使うことで、Figma からコードへの変換精度が向上します
• 抽出の任意指定：レスポンスに詳細な CSS プロパティを含めるかどうかを設定できます

高度な CSS 機能：

• グラデーションのサポート：線形、放射状、円錐状のグラデーションを正確に抽出します
• 複数レイヤーの背景：適切な重ね順で複数の塗りつぶしをサポートします
• テキストのスタイル設定：フォントファミリー、サイズ、ウェイト、行の高さ、変形など、タイポグラフィのプロパティをすべて含みます
• エフェクトとフィルター：ボックスシャドウ、ぼかし効果、背景フィルターをサポートします
• 変形：回転と拡大縮小の変形を抽出します

使用例：

Figma データをリクエストする際、詳細な CSS プロパティを抽出するかどうかを指定できます。

// With detailed CSS properties
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: true // default is true
    }
  })
});

// Without detailed CSS properties (more lightweight)
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "get_figma_data",
    params: {
      fileKey: "your-file-key",
      nodeId: "your-node-id",
      extractCssProperties: false
    }
  })
});

デザイントークンの生成

この強化版には、Figma のデザインからデザイントークンを自動生成するツールも含まれています。生成したトークンはさまざまな形式でエクスポートし、プロジェクトで使用できます。

対応するトークンの種類：

• 色：塗りつぶしや、名前が付いた色要素から色を抽出します
• タイポグラフィ：フォントファミリー、サイズ、ウェイトなどを含む、完全なタイポグラフィトークンを作成します
• スペーシング：適切な名前が付けられた要素からスペーシングのパターンを特定します
• 境界線の角丸：角の半径の値を抽出します
• シャドウ：ボックスシャドウとエレベーションを取得します
• 不透明度：不透明度の値を抽出します
• グラデーション：再利用できるようにグラデーションの定義を保存します

エクスポート形式：

• CSS：CSS でそのまま使用できる :root {} 内の変数
• SCSS：SCSS のワークフローで使う変数とミックスイン
• TypeScript：TypeScript の型を持つ型安全な定数
• JSON：カスタム処理に使う生データ

使用例：

// Generate design tokens
const response = await fetch("http://localhost:3333/messages", {
  method: "POST",
  body: JSON.stringify({
    tool: "generate_design_tokens",
    params: {
      fileKey: "your-file-key",
      format: "css", // Options: "css", "scss", "ts", "json"
      outputPath: "./src/styles/design-tokens.css", // Optional
      prefix: "my-app-" // Optional prefix for variable names
    }
  })
});

デモ動画

Cursor で Figma のデザインデータを使って UI を構築するデモを見る

仕組み

1. Cursor のコンポーザーをエージェントモードで開きます。
2. Figma のファイル、フレーム、またはグループへのリンクを貼り付けます。
3. Figma ファイルを使って何をするか Cursor に依頼します。たとえば、デザインを実装するよう依頼します。
4. Cursor は Figma から関連するメタデータを取得し、それを使ってコードを作成します。

この MCP サーバーは Cursor での使用に特化して設計されています。Figma API のコンテキストを応答する前に、レスポンスを簡略化して翻訳し、最も関連性の高いレイアウトとスタイルの情報だけをモデルに提供します。

モデルに提供するコンテキストの量を減らすことで、AI の精度が向上し、より関連性の高い応答が得られます。

インストール

NPM でサーバーをすぐに実行する

リポジトリをインストールまたはビルドせずに、NPM を使ってサーバーをすぐに実行できます。

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Figma API アクセストークンの作成方法については、こちらをご覧ください。

設定ファイルを使用するツール向けの JSON 設定

Windsurf、Cline、Claude Desktop など、多くのツールは設定ファイルを使用してサーバーを起動します。

figma-developer-mcp サーバーは、設定ファイルに以下を追加して設定できます。

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

ローカルソースからサーバーを実行する

1. リポジトリをクローンします
2. pnpm install で依存関係をインストールします
3. .env.example を .env にコピーし、Figma API アクセストークンを入力します。読み取りアクセスのみが必要です。
4. コマンドライン引数のセクションにある任意のフラグを指定して、pnpm run dev でサーバーを実行します。

設定

サーバーは、環境変数（.env ファイル経由）またはコマンドライン引数を使用して設定できます。コマンドライン引数は環境変数より優先されます。

環境変数

• FIGMA_API_KEY：Figma API アクセストークン（必須）
• PORT：サーバーを実行するポート（デフォルト：3333）

コマンドライン引数

• --version：バージョン番号を表示します
• --figma-api-key：Figma API アクセストークン
• --port：サーバーを実行するポート
• --stdio：デフォルトの HTTP/SSE ではなく、コマンドモードでサーバーを実行します
• --help：ヘルプメニューを表示します

Cursor への接続

サーバーを起動する

> npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# Initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages

Cursor を MCP サーバーに接続する

サーバーが実行されたら、Cursor の設定の「機能」タブで、Cursor を MCP サーバーに接続します。

サーバーを接続したら、作業を始める前に Cursor が有効な接続を確立していることを確認できます。緑色の点が表示され、ツールが表示されていれば、準備完了です！

Figma デザインで Composer の使用を開始する

MCP サーバーを接続したら、Composer がエージェントモードである限り、Cursor の Composer でツールを使用できます。

Composer に Figma ファイルへのリンクを貼り付け、Cursor にそのファイルを使った操作を依頼すると、get_figma_data ツールが自動的に呼び出されます。

ほとんどの Figma ファイルは大きいため、ファイル内の特定のフレームまたはグループへのリンクを指定するとよいでしょう。要素を 1 つ選択した状態で CMD + L を押すと、その要素へのリンクをコピーできます。コンテキストメニューからもリンクを取得できます。

特定の要素へのリンクを取得したら、Composer に貼り付けて、Cursor にその要素を使った操作を依頼できます。

レスポンスを検査する

MCP サーバーからのレスポンスを簡単に検査するには、inspect コマンドを実行します。このコマンドは、ツール呼び出しの実行とレスポンスの確認に使用できる @modelcontextprotocol/inspector の Web UI を起動します。

pnpm inspect
# > [email protected] inspect
# > pnpx @modelcontextprotocol/inspector
#
# Starting MCP inspector...
# Proxy server listening on port 3333
#
# 🔍 MCP Inspector is up and running at http://localhost:5173 🚀

利用可能なツール

サーバーは、以下の MCP ツールを提供します。

get_figma_data

Figma ファイルの情報を取得します。

パラメーター：

• fileKey（string）：取得する Figma ファイルのキー
• nodeId（string、optional）：取得するノードの ID
• depth（number、optional）：ノードツリーをたどる深さ
• extractCssProperties（boolean、optional）：各ノードの詳細な CSS プロパティを抽出するかどうか（デフォルト：true）

generate_design_tokens

Figma ファイルからデザイントークンを生成し、指定した形式でエクスポートします。

パラメーター：

• fileKey（string）：取得する Figma ファイルのキー
• nodeId（string、任意）：取得するノードの ID
• depth（number、任意）：ノードツリーをたどる深さ
• format（string、任意）：デザイントークンの出力形式（選択肢："css"、"scss"、"ts"、"json"、デフォルト："css"）
• outputPath（string、任意）：デザイントークンの保存先ファイルパス
• prefix（string、任意）：変数名に付ける任意のプレフィックス（例："my-app-"）