Figma MCP PRO

面向AI优化的Figma设计分析的专业模型上下文协议（MCP）服务器。通过智能注释处理和资源下载，实现全面的设计到代码转换的五步工作流程。

🚀 主要特性

• 五步工作流程：框架选择 → 设计数据 → 注释 → 资源 → 参考分析
• AI优化：特别格式化的结构化数据用于AI代码生成
• 支持10种框架：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.js
• 智能注释：基于坐标的设计师注释与UI元素匹配
• 资源下载：批量下载，保留原始Figma导出设置
• CSS生成：从Figma属性自动生成CSS（填充、边距、边框、效果）

📦 安装

通过Smithery安装

要通过Smithery自动安装figma-mcp-pro到Claude Desktop：

npx -y @smithery/cli install @artemsvit/figma-mcp-pro --client claude

手动安装

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指令："为Button组件添加悬停动画"
• 实现上下文：元素详情 + 定位信息

资产下载

• 导出设置：尊重Figma的配置导出设置
• 原始名称：使用实际节点名称作为文件名
• 视觉参考：reference.png展示完整设计上下文
• 多种格式：支持SVG、PNG、JPG、PDF

🌟 框架优化

• React：TypeScript、Hooks、自定义Hooks、性能优化
• Vue：组合API、TypeScript、Pinia存储、Composables
• Angular：独立组件、Signals、现代模板、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-m- cp-pro