クロード・フィグマ MCP

Claude が Figma プラグインまたは Figma API を介して直接 Figma でデザインを作成および操作できるようにするモデルコンテキストプロトコル (MCP) サーバー。

概要

このプロジェクトでは、Claude が Figma と対話するための 2 つのアプローチが提供されています。

プラグインアプローチ：Figmaプラグインを使用してFigmaのUIでコマンドを実行します。
- ゼロからデザインを作成し、操作することができます
- FigmaアプリケーションでFigmaプラグインを実行する必要があります
APIアプローチ：Figma REST APIを直接使用
- 既存のFigmaファイルの取得とエクスポートが可能
- Figma を開かなくても動作しますが、作成機能は制限されています
- Figma APIキーが必要です

Related MCP server: mcp-figma

インストール

NPMの使用（推奨）

パッケージをグローバルにインストールします。

npm install -g claude-figma-mcp

または、npx を使用して直接実行します。

npx claude-figma-mcp

ローカルソースから実行

このリポジトリをクローンする
npm installで依存関係をインストールする
npm run buildで TypeScript コードをビルドします。
npm start (HTTP モード) またはnpm run start:cli (STDIO モード) でサーバーを実行します。

Claude デスクトップ統合の設定

標準的なアプローチ（NPM パッケージ）

Claude Desktop 構成ファイルに次のコードを追加します。

{ "mcpServers": { "figma-mcp": { "command": "npx", "args": [ "-y", "claude-figma-mcp", "--stdio" ] } } }

Figma APIアプローチ

Figma API を直接使用したい場合 (信頼性は高くなりますが、作成機能は少なくなります):

{ "mcpServers": { "figma-mcp": { "command": "npx", "args": [ "-y", "claude-figma-mcp", "--stdio", "--figma-api-key", "your_figma_api_key_here" ] } } }

簡素化されたサーバーオプション

標準サーバーに問題がある環境向けに、簡素化されたサーバーを提供します。

{ "mcpServers": { "figma-mcp": { "command": "node", "args": [ "/path/to/claude-figma-mcp/simple-mcp-server.js" ] } } }

Figmaプラグインの設定（プラグインアプローチのみ）

Figma を開き、メニュー → プラグイン → 開発 → マニフェストからプラグインをインポート... に移動します。
このリポジトリからfigma-plugin/manifest.jsonファイルを選択します
プラグインはFigmaのプラグインメニューで利用できるようになります。

使用法

プラグインアプローチ

MCPサーバーをHTTPモードで起動する
Figmaを開き、Claude MCP統合プラグインを実行します。
プラグインUIで「MCPサーバーに接続」をクリックします
Claudeでは、Figma MCPツールを使用してFigmaと対話します。

APIアプローチ

Figma APIキーを使用してMCPサーバーを起動します
Claudeでは、Figma MCPツールを使用してFigmaファイルを操作します。
Figmaを開く必要はありません。操作はAPI経由で直接行われます。

利用可能なツール

プラグインアプローチツール

create_project : 新しいFigmaプロジェクトを作成する
create_frame : 新しいフレーム/アートボードを作成する
create_rectangle : 長方形要素を作成する
create_text : テキスト要素を作成する
create_component : 事前定義された UI コンポーネント (ボタン、入力など) を作成します。
create_layout : 一般的なレイアウトパターン (ヘッダー、フッターなど) を作成します。
create_interaction : 要素間のインタラクティブなプロトタイピング接続を作成する
export_frame : フレームを画像としてエクスポートする

APIアプローチツール

get_file : Figmaファイルに関する情報を取得する
get_file_nodes : Figma ファイルから特定のノードを取得する
get_comments : Figma ファイルからコメントを取得する
post_comment : Figma ファイルにコメントを追加する
get_team_components : チームからコンポーネントを一覧表示する
export_image : フレームまたはノードを画像としてエクスポートする

クロードのプロンプトの例

プラグインアプローチの例

Can you create a login screen in Figma? It should have a logo at the top, email and password input fields, and a login button.

I need a dashboard layout in Figma with a header, sidebar navigation, and a main content area with 4 card components showing different statistics.

APIアプローチの例

Show me the contents of my Figma file with ID abcde12345

Export the frame named 'Homepage' from my Figma file abcde12345 as a PNG

構成

サーバーは、環境変数またはコマンドライン引数を使用して構成できます。

環境変数

PORT : HTTPサーバーポート（デフォルト: 3000）
WEBSOCKET_PORT : Figmaプラグイン通信用のWebSocketサーバーポート（デフォルト: 8080）
FIGMA_API_KEY : Figma API キー (API アプローチに必要)

コマンドライン引数

--port : HTTPサーバーのポート
--websocket-port : WebSocketサーバーのポート
--figma-api-key : Figma API キー
--stdio : stdio モードで実行 (Claude Desktop 統合用)

トラブルシューティング

Claude Desktop との接続の問題

デフォルトのサーバーに問題がある場合は、簡略化されたサーバーオプションを試してください。

node /path/to/claude-figma-mcp/simple-mcp-server.js

プラグインがサーバーに接続できません

確認する：

MCPサーバーはHTTPモードで実行されています
ポートはファイアウォールによってブロックされていません
WebSocketポート（デフォルト：8080）はサーバー設定とプラグインの両方で一致します

APIキーが認識されません

Figma API キーが次のとおりであることを確認します:

有効であり、必要な権限がある
環境変数またはコマンドライン引数のいずれかで正しく設定されている

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細については LICENSE ファイルを参照してください。

Claude Figma MCP