关于 Figma MCP Server
Figma MCP Server 用于分析 Figma 文件并提取节点层级与相关元数据,适合需要检查文件结构的开发者和 AI 客户端。它支持设置树深度,并提供 REST API 与 MCP 接口。
主要功能
- 01提取 Figma 节点层级
- 02设置节点树深度
- 03提供 REST API 和 MCP 协议
适用场景
- 01检查 Figma 文件的节点结构
- 02按需限制层级输出深度
MCP 相关
它向 MCP 客户端提供 Figma 文件分析能力,可根据 Figma URL 生成节点层级数据。项目也提供 REST API。
配置
本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。
暂未收录安装方式
我们还没有获取到这个服务的安装包或远程地址,请按项目 README 中的说明安装。
工具
还没有获取到工具列表
本地服务需要在你的电脑上运行后才能读取工具,维护者暂未提供工具列表。
详细介绍
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 协议直接使用该服务:
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
评论
支持 Markdown
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。