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 アカウント設定から 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

ライセンス

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

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

analyze_figma_file

REST API または MCP プロトコル経由でアクセス可能なノード階層を抽出することで、Figma ファイル構造の分析を容易にします。

Related Resources

Reddit Discussion about this server

Related MCP Servers

mcp-figma
thirdstrandstudio
-
security
A
license
-
quality
Figma MCP with full API functionality
Last updated -
168
32
TypeScript
MIT License
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server with Chunking
ArchimedesCrypto
A
security
A
license
A
quality
A Model Context Protocol server for interacting with the Figma API that handles large Figma files efficiently through memory-aware chunking and pagination capabilities.
Last updated -
7
2
TypeScript
MIT License
Gravity Global Figma MCP
nguyenlegravityglobal
A
security
F
license
A
quality
A tool that integrates Figma with Cursor through the Model Context Protocol, allowing users to retrieve, optimize, and convert design data from Figma files into structured CSS and design tokens.
Last updated -
1
JavaScript

View all related MCP servers

Figma MCP Server