🚀 Figma MCP PRO
Figma MCP PRO 是一款专业的模型上下文协议（MCP）服务器，专为 AI 优化的 Figma 设计分析打造。它拥有简洁的 5 步工作流程，可实现全面的设计到代码转换，还支持智能注释处理和资源下载。
🚀 快速开始
Figma MCP PRO 提供了一套完整的解决方案，用于将 Figma 设计高效转化为代码。通过其 5 步工作流程，结合 AI 优化和多框架支持，能大大提升设计到开发的效率。
✨ 主要特性
- 5 步工作流程：框架选择 → 设计数据 → 注释 → 资源 → 参考分析
- AI 优化：为 AI 代码生成专门格式化的结构化数据
- 支持 10 种框架：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.js
- 智能注释：基于坐标将设计师注释与 UI 元素匹配
- 资源下载：按照 Figma 原始导出设置批量下载
- CSS 生成：根据 Figma 属性（内边距、外边距、边框、效果）自动生成 CSS
📦 安装指南
npm install -g figma-mcp-pro
⚙️ 快速设置
1. 获取 Figma API 密钥
从 Figma 账户设置 → 个人访问令牌中获取 API 令牌。
2. 复制并粘贴 MCP 配置
📋 使用下面代码块的复制按钮，然后将 your-api-key-here 替换为你实际的 API 密钥：
{
"mcpServers": {
"Figma MCP PRO": {
"command": "npx",
"args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
"env": {
"DEBUG": "true"
}
}
}
}
配置文件位置：
- Claude Desktop：
claude_desktop_config.json - Claude Code (VS Code)：VS Code MCP 设置
- Cursor, Windsurf, TRAE：应用程序 MCP 配置设置
📝 工具参考
核心工具
show_frameworks
显示可用的框架。建议先调用此命令以选择目标框架。
get_figma_data
提取经过 AI 优化的设计数据，并进行特定框架的处理。
- 输入：Figma URL + 框架
- 输出：设计结构、CSS 属性、布局数据
process_design_comments
将设计师注释与设计元素匹配，并提供 AI 实现提示。
- 输入：Figma URL + 框架
- 输出：注释到元素的映射及可执行指令
download_design_assets
按照 Figma 原始设置下载可导出的资源，并包含参考图像。
- 输入：Figma URL + 本地路径
- 输出：资源文件 + 用于视觉参考的 reference.png
check_reference
分析 reference.png 以理解设计并提供开发指导。
- 输入：资源文件夹路径 + 框架
- 输出：设计分析和特定框架的开发建议
🎯 使用成果
设计数据
- 布局：内边距、外边距、间隙、自动布局属性
- 样式：颜色、边框、阴影、效果、排版
- 结构：组件层次结构、语义角色
- 响应式：灵活尺寸、约束、断点
智能注释
- 坐标匹配：注释与特定设计元素关联
- AI 指令：如“为按钮组件添加悬停动画”
- 实现上下文：元素详细信息 + 定位
资源下载
- 导出设置：遵循 Figma 配置的导出设置
- 原始名称：使用实际节点名称作为文件名
- 视觉参考：reference.png 展示完整设计上下文
- 多格式支持：支持 SVG、PNG、JPG、PDF
🌟 框架优化
- React：TypeScript、Hooks、自定义 Hooks、性能优化
- Vue：组合式 API、TypeScript、Pinia 存储、可组合函数
- Angular：独立组件、信号、现代模板、TypeScript
- Svelte：Svelte 5 符文、TypeScript、SvelteKit、存储
- HTML/CSS/JS：设计令牌、现代 CSS、无障碍优先
- SwiftUI：状态管理、MVVM、无障碍、现代模式
- UIKit：现代并发、SwiftUI 互操作性、自动布局
- Electron：安全强化、IPC 模式、原生集成
- Tauri：Rust 命令、事件系统、安全、WebView
- NW.js：统一上下文、Node.js 集成、Chromium API
📄 许可证
本项目采用 MIT 许可证。
🆘 支持
- 问题反馈：GitHub Issues
- NPM 包：figma-mcp-pro