Figma MCP Server
2025.03.27
1
设计工具集成AI 辅助开发开发效率
Figma-Context-MCP 是一个基于 Model Context Protocol (MCP) 的服务，旨在为 AI 驱动的编码工具（如 Cursor、Windsurf、Cline 等）提供对 Figma 设计数据的访问。通过简化 Figma API 的响应，该服务仅提供最相关的布局和样式信息，从而提高 AI 工具的准确性和响应相关性。
View on GitHub
Overview
基本能力
产品定位
Figma-Context-MCP 是一个桥梁服务，连接 Figma 设计数据和 AI 编码工具，帮助开发者更高效地将设计转化为代码。
核心功能
- Figma 数据访问：通过 Figma API 获取设计文件的元数据。
- 数据简化与翻译：优化 API 响应，仅提供最相关的设计信息。
- 工具集成：支持与 Cursor、Windsurf、Cline 等工具的集成。
- 多模式运行：支持 HTTP/SSE 和命令行模式（stdio）。
适用场景
- 设计实现：将 Figma 设计快速转化为代码。
- AI 辅助开发：为 AI 工具提供设计上下文，提高代码生成准确性。
- 团队协作：在设计团队和开发团队之间建立更高效的协作流程。
工具列表
- get_figma_data：获取 Figma 文件或特定节点的信息。
- 参数：
fileKey（必需）、nodeId（可选）、depth（可选）。 - download_figma_images（开发中）：下载 Figma 文件中的 SVG 和 PNG 图像。
- 参数：
fileKey、nodes（包含nodeId、imageRef、fileName）、localPath。
常见问题解答
- 如何获取 Figma API 访问令牌？
- 参考 Figma 官方文档。
- 如何确认 Cursor 已成功连接？
- 检查 Cursor 设置中的连接状态，确认绿色圆点显示。
- 如何优化 AI 工具的响应？
- 提供具体的 Figma 节点链接（如帧或组），而非整个文件链接。
使用教程
使用依赖
- Node.js 环境：确保已安装 Node.js。
- Figma API 访问令牌：获取并准备好 Figma API 访问令牌。
安装教程
- 快速运行（无需安装）：
bash npx figma-developer-mcp --figma-api-key=<your-figma-api-key> - 从源码运行：
bash git clone https://github.com/GLips/Figma-Context-MCP cd Figma-Context-MCP pnpm install cp .env.example .env # 编辑 .env 文件，填入 Figma API 访问令牌 pnpm run dev
调试方式
- 检查服务器状态：
bash npx figma-developer-mcp --figma-api-key=<your-figma-api-key> # 确认输出日志显示 HTTP/SSE 服务已启动 - 使用检查工具：
bash pnpm inspect # 访问 http://localhost:5173 查看 MCP Inspector - 验证 Cursor 连接：
- 在 Cursor 设置中确认连接状态为绿色圆点。