Figma MCP Pro

🚀 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