Figma MCP Server
2025.03.17
0
TypeScript设计工具集成AI 辅助开发开发效率
Figma MCP Server 是一个基于 Model Context Protocol 的服务，旨在为 Cursor、Windsurf、Cline 等 AI 驱动的编码工具提供对 Figma 文件的访问。通过简化 Figma API 的响应，仅提供最相关的布局和样式信息，使 AI 更准确地实现设计。
View on GitHub
Overview
基本能力
产品定位
Figma MCP Server 是一个连接 Figma 设计和 AI 编码工具的桥梁，通过提供设计数据的上下文，帮助 AI 更准确地实现设计。
核心功能
- 获取 Figma 数据：通过
get_figma_data工具获取 Figma 文件或特定节点的信息。 - 下载 Figma 图像：通过
download_figma_images工具下载 Figma 文件中的 SVG 和 PNG 图像。 - 简化 API 响应：优化 Figma API 的响应，仅提供最相关的设计信息。
适用场景
- AI 辅助设计实现：在 Cursor 等工具中直接基于 Figma 设计生成代码。
- 设计数据集成：将 Figma 设计数据集成到开发流程中，提高开发效率。
工具列表
- get_figma_data：获取 Figma 文件或节点的信息。
- 参数：
fileKey（必需）、nodeId（可选）、depth（可选）。 - download_figma_images：下载 Figma 文件中的图像。
- 参数：
fileKey（必需）、nodes（必需）、localPath（必需）。
常见问题解答
- 如何获取 Figma API 密钥：参考 Figma 官方文档。
- 如何连接 Cursor：在 Cursor 的设置中配置 MCP 服务器地址。
使用教程
使用依赖
- Node.js：确保已安装 Node.js。
- Figma API 密钥：获取 Figma API 访问令牌。
安装教程
- 快速运行（NPM）：
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 pnpm run dev
调试方式
- 检查响应：使用
inspect命令启动 MCP 检查器。bash pnpm inspect - 验证连接：在 Cursor 中确认 MCP 服务器连接状态。