Figma MCP PRO
用于AI优化Figma设计分析的专业模型上下文协议（MCP）服务器。简洁的5步工作流程，通过智能注释处理和资产下载实现全面的设计到代码转换。
🚀 主要特点
- 5步工作流程：框架选择→ 设计数据→ 评论→ 资产→ 参考分析
- AI优化：专门为AI代码生成格式化的结构化数据
- 10框架支持：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.JS
- 聪明的评论：基于协调的设计师评论与UI元素的匹配
- 资产下载：使用原始Figma导出设置进行批量下载
- CSS生成：从Figma属性（填充、边距、边框、效果）自动生成CSS
📦 安装
通过Smithery安装
通过以下方式自动安装Claude Desktop的figma mcp pro 史密瑟里:
npx -y @smithery/cli install @artemsvit/figma-mcp-pro --client claude手动安装
npm install -g figma-mcp-pro⚙️ 快速设置
1.获取Figma API密钥
从获取您的API令牌 Figma帐户设置 → 个人访问令牌
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_config.json - 克劳德码（VS码）：VS代码MCP设置
- 光标，风帆，TRAE：应用程序MCP配置设置
📝 工具参考
核心工具
show_frameworks
显示可用框架。先打电话选择目标框架。
get_figma_data
通过特定于框架的处理提取人工智能优化的设计数据。
- 输入：Figma URL+框架
- 输出：设计结构、CSS属性、布局数据
process_design_comments
使用AI实现提示将设计师评论与设计元素相匹配。
- 输入：Figma URL+框架
- 输出：用可操作的说明对元素映射进行注释
download_design_assets
下载具有原始Figma设置+参考图像的导出就绪资产。
- 输入：Figma URL+本地路径
- 输出：资产文件+参考.png用于可视化上下文
check_reference
分析设计理解和开发指导的参考文献.png。
- 输入：资产文件夹路径+框架
- 输出：设计分析和针对具体框架的开发建议
🎯 所得
设计数据
- 布局：填充、边距、间隙、自动布局属性
- 样式：颜色、边框、阴影、效果、排版
- 结构：组件层次结构、语义角色
- 响应式：灵活的大小、约束、断点
聪明的评论
- 坐标匹配：与特定设计元素相关的评论
- AI指令：“将悬停动画添加到按钮组件”
- 实施背景：元素细节+定位
资产下载
- 导出设置：尊重Figma配置的导出设置
- 原始名称：使用实际节点名称作为文件名
- 目视参考：reference.png显示完整的设计上下文
- 多种格式：支持SVG、PNG、JPG、PDF格式
🌟 框架优化
- 反应：TypeScript，钩子，自定义钩子，性能优化
- 视图：Composition API，TypeScript，Pinia商店，可组合
- Angular：独立组件、信号、现代模板、TypeScript
- 斯维尔特: Svelte 5 Runes， TypeScript， SvelteKit， 商店
- HTML/CSS/JS：设计标记、现代CSS、可访问性优先
- SwiftUI：状态管理、MVVM、可访问性、现代模式
- 框架：现代并发、SwiftUI互操作、自动布局
- 电子：安全强化、IPC模式、本地集成
- 陶里：Rust命令、事件系统、安全性、WebView
- NW.js：统一上下文、Node.js集成、Chromium API
📄 许可证
MIT许可证
🆘 支持
- 问题:
- NPM: figma mcp pro
