Figma MCP サーバー
Figma ファイル構造を分析するための MCP (Model Context Protocol) サーバー。
特徴
Figmaファイルを分析してノード階層を抽出する
REST APIとMCPプロトコルの両方をサポート
設定可能なノードツリーの深さ
Related MCP server: FigmaMind MCP Server
前提条件
Node.js 16以上
npmまたはyarn
Figma APIキー
インストール
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 アカウント設定から Figma API キーを取得できます: https://www.figma.com/developers/api#access-tokens
使用法
REST APIサーバーとして
サーバーを起動します。
npm start
これにより、ポート 3000 (または.envファイルで指定されたポート) で Express サーバーが起動します。
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サーバーとして
サーバーは、MCP プロトコルを介して LLM によって直接使用できます。
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
ドッカー
コンテナ化されたデプロイメント用に Dockerfile が提供されています。
docker build -t figma-mcp-server .
docker run -p 3000:3000 --env-file .env figma-mcp-server
ライセンス
マサチューセッツ工科大学