Framelink Figma MCP

Framelink Figma MCP（原 Figma-Context-MCP）是社区最受欢迎的 Figma 设计转代码 Model Context Protocol 服务器，让 AI 编码助手能够直接读取 Figma 文件并生成像素级准确的前端代码。

核心功能

• 设计数据提取：读取 Figma 文件/Frame/Group 的完整布局、样式、颜色、字体、间距信息
• 智能简化：自动去除设计稿中的冗余节点和不可见元素，输出 token 高效的结构
• 多格式输出：支持树形结构、YAML 等多种输出格式，适配不同 AI 代理的上下文窗口
• 样式规范化：自动将 Figma 中的绝对定位转换为 Flexbox/Grid 布局建议
• 组件识别：智能识别可复用组件，建议组件拆分策略
• 资源导出：自动导出图标、图片资源并生成对应的导入代码
• 宽高比防护：检测布局变形风险，提醒调整尺寸约束

适用场景

• AI 前端助手一键将 Figma 设计稿转换为 React/Vue/HTML 代码
• 设计系统自动化：从 Figma 生成设计 Token（颜色、字体、间距变量）
• UI 组件还原：快速原型开发，缩短设计到开发的交付周期
• 设计走查：AI 比对实现代码与 Figma 设计稿的差异
• 批量设计稿转换：批量处理多个页面/状态的代码生成

安装方式

// Claude Desktop / Cursor 配置
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_API_KEY"]
    }
  }
}

开源地址：https://github.com/GLips/Figma-Context-MCP （MIT 许可证）