Claude Figma MCP

クロード・フィグマ MCP

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

概要

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

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

インストール

NPMの使用（推奨）

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

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

ローカルソースから実行

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

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

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

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

Figma APIアプローチ

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

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

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

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

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

使用法

プラグインアプローチ

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

APIアプローチ

1. Figma APIキーを使用してMCPサーバーを起動します
2. Claudeでは、Figma MCPツールを使用してFigmaファイルを操作します。
3. 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 : フレームまたはノードを画像としてエクスポートする

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

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

APIアプローチの例

構成

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

環境変数

• 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 との接続の問題

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

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

確認する：

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

APIキーが認識されません

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

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

貢献

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

ライセンス

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