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ファイルをご覧ください。

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

完全なAPI機能を備えたFigma MCP

Related Resources

Reddit Discussion about this server

Related MCP Servers

Figma MCP Server
TimHolden
A
security
F
license
A
quality
Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
2
106
TypeScript
Figma MCP Server
moonray
A
security
A
license
A
quality
Facilitates the analysis of Figma file structures by extracting node hierarchies, accessible via REST API or MCP protocol.
Last updated -
1
2
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Claude Figma MCP
tonycueva
-
security
F
license
-
quality
A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
Last updated -
TypeScript

View all related MCP servers