Figma MCP Server

Figma MCP サーバー

Figma API と連携するための MCP サーバーです。このサーバーは、Model Context Protocol を通じて Figma API のすべてのメソッドを提供します。大きな Figma ファイルでは、まず figma_get_file に depth = 1 を指定し、必要に応じて値を増やすよう指示する必要がある場合があります。

ツール

このサーバーは、すべての Figma API メソッドを MCP ツールとして実装しています。

ユーザーメソッド

1. figma_get_me - 現在のユーザーを取得します

ファイルメソッド

2. figma_get_file - キーを指定して Figma ファイルを取得します
3. figma_get_file_nodes - Figma ファイルから指定したノードを取得します
4. figma_get_images - Figma ファイルから画像をレンダリングします
5. figma_get_image_fills - Figma ファイル内の画像塗りつぶしを取得します
6. figma_get_file_versions - Figma ファイルのバージョン履歴を取得します

コメントメソッド

7. figma_get_comments - Figma ファイル内のコメントを取得します
8. figma_post_comment - Figma ファイルにコメントを追加します
9. figma_delete_comment - Figma ファイルからコメントを削除します
10. figma_get_comment_reactions - コメントへのリアクションを取得します
11. figma_post_comment_reaction - コメントにリアクションを追加します
12. figma_delete_comment_reaction - コメントへのリアクションを削除します

チームとプロジェクトのメソッド

13. figma_get_team_projects - チーム内のプロジェクトを取得します
14. figma_get_project_files - プロジェクト内のファイルを取得します

コンポーネントメソッド

15. figma_get_team_components - チーム内のコンポーネントを取得します
16. figma_get_file_components - ファイル内のコンポーネントを取得します
17. figma_get_component - キーを指定してコンポーネントを取得します
18. figma_get_team_component_sets - チーム内のコンポーネントセットを取得します
19. figma_get_file_component_sets - ファイル内のコンポーネントセットを取得します
20. figma_get_component_set - キーを指定してコンポーネントセットを取得します

スタイルメソッド

21. figma_get_team_styles - チーム内のスタイルを取得します
22. figma_get_file_styles - ファイル内のスタイルを取得します
23. figma_get_style - キーを指定してスタイルを取得します

Webhook メソッド（V2 API）

24. figma_post_webhook - Webhook を作成します
25. figma_get_webhook - ID を指定して Webhook を取得します
26. figma_update_webhook - Webhook を更新します
27. figma_delete_webhook - Webhook を削除します
28. figma_get_team_webhooks - チームの Webhook を取得します

ライブラリアナリティクスメソッド

29. figma_get_library_analytics_component_usages - ライブラリアナリティクスのコンポーネント使用状況データを取得します
30. figma_get_library_analytics_style_usages - ライブラリアナリティクスのスタイル使用状況データを取得します
31. figma_get_library_analytics_variable_usages - ライブラリアナリティクスの変数使用状況データを取得します

インストール

Smithery 経由でのインストール

Smithery を使って、Claude Desktop に mcp-figma を自動的にインストールするには、次の手順に従います。

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

前提条件

• Node.js（v16 以降）
• npm または yarn

パッケージのインストール

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

セットアップ

この MCP サーバーを使用するには、Figma API トークンを設定する必要があります。設定方法は次の 3 つです。

1. 環境変数

プロジェクトのルートに .env ファイルを作成するか、環境変数を直接設定します。

FIGMA_API_KEY=your_figma_api_key

2. コマンドライン引数

サーバーの起動時に、コマンドライン引数として Figma API トークンを渡すことができます。

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

Claude Desktop での使用方法

次の内容を claude_desktop_config.json に追加します。

npx を使用する場合

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

Node.js を直接使用する場合（環境変数を使用）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

Node.js を直接使用する場合（コマンドライン引数を使用）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

/path/to/mcp-figma をリポジトリの実際のパスに置き換えてください。

使用例

Figma ファイルを取得する

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

ファイルのコメントを取得する

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

Webhookを作成する

// Create a webhook
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

開発

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

ライセンス

このMCPサーバーはMITライセンスの下でライセンスされています。MITライセンスの利用規約に従うことを条件に、ソフトウェアを自由に使用、変更、配布できます。詳しくは、プロジェクトリポジトリのLICENSEファイルをご覧ください。