Figma Node Explorer

🚀 Figma MCP サーバー

Figma ファイルの構造を分析するための Model Context Protocol (MCP) サーバーです。このサーバーは、Figma ファイルのノード階層構造を抽出し、REST API と MCP プロトコルをサポートし、ノードツリーの深さを設定可能です。

✨ 主な機能

• Figma ファイルを分析してノード階層構造を抽出します。
• REST API と MCP プロトコルをサポートします。
• ノードツリーの深さを設定可能です。

📦 インストール

npm からインストール

npm install -g figma-mcp-server

ソースコードからインストール

git clone https://github.com/yourusername/mcp-figma.git
cd mcp-figma
npm install
npm run build

📚 ドキュメント

設定

サンプル環境ファイルをコピーし、Figma API キーを追加します。

cp .env.example .env

次に、.env ファイルを編集し、Figma API キーを追加します。

FIGMA_API_KEY=your_figma_api_key_here

Figma API キーは、Figma アカウント設定から取得できます：https://www.figma.com/developers/api#access-tokens

使用方法

REST API サーバーとして

サーバーを起動します：

npm start

これにより、Express サーバーがデフォルトのポート 3000（または .env ファイルで指定されたポート）で起動します。

API エンドポイント

• GET /health - ヘルスチェックエンドポイント
• GET /openapi.json - OpenAPI 仕様
• GET /mcp.json - MCP 記述ファイル
• POST /analyze - Figma ファイルを分析します。

分析エンドポイントへのサンプルリクエスト：

curl -X POST http://localhost:3000/analyze \
  -H "Content-Type: application/json" \
  -d '{"figmaUrl": "https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID", "depth": 2}'

MCP サーバーとして

サーバーは、LLM から MCP プロトコルを介して直接使用できます：

figma-mcp-server --cli

または、ソースコードから実行する場合は：

npm run start -- --cli

クライアントサンプル

簡単なクライアントサンプルが提供されています。使用するには：

node client-example.js https://www.figma.com/file/FILE_ID/PROJECT_NAME?node-id=NODE_ID 2

最後のパラメータは、オプションの深さパラメータです。

開発

開発モードで実行

npm run dev

テスト

npm test

Docker

コンテナ化デプロイ用の Dockerfile が提供されています：

docker build -t figma-mcp-server .
docker run -p 3000:3000 --env-file .env figma-mcp-server

📄 ライセンス

MIT