-
securityA
license-
qualityFigma MCP with full API functionality
Last updated -
113
41
MIT License
Figma MCP 服务器
用于分析 Figma 文件结构的 MCP（模型上下文协议）服务器。
特征
分析 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 服务器
LLM 可以通过 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
执照
麻省理工学院
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
Tools
通过提取节点层次结构来促进对 Figma 文件结构的分析，可通过 REST API 或 MCP 协议访问。
Related Resources
Related MCP Servers
- -securityFlicense-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.Last updated -
- AsecurityAlicenseAqualityA 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 -73MIT License
- -securityFlicense-qualityA server that converts Figma designs into pseudo-code structures optimized for LLMs to understand design context, allowing easy extraction of visual elements and code-like representations from Figma files.Last updated -45