Figma MCP Server
2025.03.11
0
TypeScript设计工具前端开发AI 辅助开发效率
Figma MCP Server 是一个基于 Model Context Protocol 的服务，旨在为 AI 驱动的编码工具（如 Cursor、Windsurf、Cline 等）提供对 Figma 设计数据的访问。通过该服务，AI 工具可以更准确地理解和实现设计，而不仅仅是依赖截图。该服务还提供了增强的 CSS 提取和设计令牌生成功能，帮助开发者更高效地将设计转换为代码。
View on GitHub
Overview
基本能力
产品定位
Figma MCP Server 是一个连接 Figma 设计和 AI 编码工具的桥梁，旨在提高设计到代码的转换效率和准确性。
核心功能
- 增强的 CSS 提取：
- 提取详细的 CSS 属性，包括颜色、尺寸、边框、阴影、字体等。
- 支持渐变、多层背景、文本样式、效果和滤镜等高级 CSS 特性。
- 设计令牌生成：
- 自动生成设计令牌，支持颜色、字体、间距、边框半径等多种类型。
- 支持导出为 CSS、SCSS、TypeScript 和 JSON 格式。
- 简化 Figma API 响应：
- 仅提供最相关的布局和样式信息，减少 AI 工具的上下文负担。
适用场景
- AI 辅助编码：帮助 AI 工具（如 Cursor）更准确地实现设计。
- 设计系统管理：自动生成设计令牌，用于前端开发。
- 快速原型开发：通过 Figma 设计快速生成代码原型。
工具列表
- get_figma_data：获取 Figma 文件或节点的信息，支持提取 CSS 属性。
- generate_design_tokens：从 Figma 设计生成设计令牌，支持多种导出格式。
常见问题解答
- 如何获取 Figma API 密钥？
- 参考 Figma 官方文档。
- 如何连接 Cursor？
- 在 Cursor 的设置中配置 MCP 服务器地址。
- 如何调试响应？
- 使用
pnpm inspect命令启动 MCP 检查器。
使用教程
使用依赖
- 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 curl http://localhost:3333/messages - 使用检查器：
bash pnpm inspect - 验证 Cursor 连接：
- 在 Cursor 的设置中确认 MCP 服务器连接状态。