Figma Mcp Pro

Figma MCP PRO

专业的模型上下文协议（MCP）服务，用于针对 AI 优化的 Figma 设计分析。通过简洁的 5 步工作流，全面完成设计转代码，并支持智能评论处理和资源下载。

🚀 主要功能

• 5 步工作流：框架选择 → 设计数据 → 评论 → 资源 → 参考分析
• 针对 AI 优化：专为 AI 代码生成设计的结构化数据
• 支持 10 种框架：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.js
• 智能评论：基于坐标将设计师评论匹配到 UI 元素
• 资源下载：根据 Figma 原始导出设置批量下载
• CSS 生成：根据 Figma 属性自动生成 CSS（内边距、外边距、边框、效果）

📦 安装

通过 Smithery 安装

通过 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 密钥

从 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：Composition API、TypeScript、Pinia stores、Composables
• Angular：独立组件、Signals、现代模板、TypeScript
• Svelte：Svelte 5 runes、TypeScript、SvelteKit、Stores
• HTML/CSS/JS：设计令牌、现代 CSS、无障碍优先
• SwiftUI：状态管理、MVVM、无障碍、现代模式
• UIKit：现代并发、SwiftUI 互操作、Auto Layout
• Electron：安全加固、IPC 模式、原生集成
• Tauri：Rust 命令、事件系统、安全、WebView
• NW.js：统一上下文、Node.js 集成、Chromium API

📄 许可证

MIT 许可证

🆘 支持

• 问题反馈：GitHub Issues
• NPM：figma-mcp-pro