Figma MCP Server

Figma MCP サーバー

Figma ファイルの構造を解析する MCP（Model Context Protocol）サーバーです。

機能

• Figma ファイルを解析し、ノード階層を抽出します
• REST API と MCP プロトコルの両方をサポートします
• ノードツリーの深さを設定できます

前提条件

• 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 API キーは、Figma アカウント設定から取得できます：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

Docker

コンテナ化されたデプロイ用に Dockerfile が用意されています。

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

ライセンス

MIT