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