Figma MCP サーバー

Figma ファイル構造を分析するための MCP (Model Context Protocol) サーバー。

特徴

• Figmaファイルを分析してノード階層を抽出する

• REST APIとMCPプロトコルの両方をサポート

• 設定可能なノードツリーの深さ

Related MCP server: Figma MCP Server with Chunking

前提条件

• 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

ライセンス

マサチューセッツ工科大学