mcp-figma

Figma MCP サーバー

Figma APIと連携するためのMCPサーバー。このサーバーは、モデルコンテキストプロトコル（MCP）を介してFigma APIメソッドの完全なセットを提供します。大きなFigmaファイルの場合、figma_get_fileのdepthを1に設定し、必要に応じて増やすように指示する必要があるかもしれません。

ツール

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

ユーザーメソッド

figma_get_me - 現在のユーザーを取得する

ファイルメソッド

figma_get_file - キーでFigmaファイルを取得する
figma_get_file_nodes - Figma ファイルから特定のノードを取得します
figma_get_images - Figma ファイルから画像をレンダリングする
figma_get_image_fills - Figma ファイル内の画像の塗りつぶしを取得します
figma_get_file_versions - Figmaファイルのバージョン履歴を取得する

コメントメソッド

figma_get_comments - Figmaファイル内のコメントを取得する
figma_post_comment - Figmaファイルにコメントを追加する
figma_delete_comment - Figma ファイルからコメントを削除する
figma_get_comment_reactions - コメントへの反応を取得する
figma_post_comment_reaction - コメントに反応を追加する
figma_delete_comment_reaction - コメントから反応を削除する

チームとプロジェクトの方法

figma_get_team_projects - チーム内のプロジェクトを取得する
figma_get_project_files - プロジェクト内のファイルを取得する

コンポーネントメソッド

figma_get_team_components - チーム内のコンポーネントを取得する
figma_get_file_components - ファイル内のコンポーネントを取得する
figma_get_component - キーでコンポーネントを取得する
figma_get_team_component_sets - チーム内のコンポーネントセットを取得する
figma_get_file_component_sets - ファイル内のコンポーネントセットを取得する
figma_get_component_set - キーでコンポーネントセットを取得する

スタイルメソッド

figma_get_team_styles - チーム内のスタイルを取得する
figma_get_file_styles - ファイル内のスタイルを取得する
figma_get_style - キーでスタイルを取得する

Webhook メソッド (V2 API)

figma_post_webhook - Webhookを作成する
figma_get_webhook - IDでWebhookを取得する
figma_update_webhook - Webhookを更新する
figma_delete_webhook - Webhookを削除する
figma_get_team_webhooks - チームのウェブフックを取得する

ライブラリ分析方法

figma_get_library_analytics_component_usages - ライブラリ分析コンポーネントの使用状況データを取得する
figma_get_library_analytics_style_usages - ライブラリ分析スタイルの使用状況データを取得する
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ファイルをご覧ください。