金大哥 - Figma Node Explorer MCP 详情

article

README

🚀 Figma MCP 服务器

Figma MCP 服务器是一个用于分析 Figma 文件结构的 Model Context Protocol (MCP) 服务器，它能够提取 Figma 文件的节点层次结构，支持 REST API 和 MCP 协议，并且节点树深度可配置。

🚀 快速开始

Figma MCP 服务器可帮助你轻松分析 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

最后一个参数是可选的深度参数。

高级用法

在开发模式下运行

npm run dev

测试

npm test

📚 详细文档

配置

复制示例环境文件并添加你的 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

Docker

提供了用于容器化部署的 Dockerfile：

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

📄 许可证

本项目采用 MIT 许可证。

Figma Node Explorer