Figma Node Explorer

🚀 Figma MCP 服務器

Figma MCP 服務器是一個用於分析 Figma 文件結構的 Model Context Protocol (MCP) 服務器，它能夠提取 Figma 文件的節點層次結構，支持多種協議，具有可配置性，為 Figma 文件的分析提供了便利。

🚀 快速開始

本服務器可用於分析 Figma 文件結構，你可以按照以下步驟進行安裝和使用。

✨ 主要特性

• 🔍 分析 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

💻 使用示例

作為 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 服務器

服務器可以直接通過 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

最後一個參數是可選的深度參數。

📚 詳細文檔

配置

複製示例環境文件並添加你的 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

開發

在開發模式下運行

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 許可證。