Figma Context MCP

简介

Figma Context MCP 是一个连接 Figma 设计稿与 AI 编码助手的 MCP 服务器，能够将 Figma 文件中的设计信息（布局结构、颜色、字体、间距、组件）提取为 AI 可理解的上下文，大幅提升设计转代码的准确性。

核心功能

• 设计稿解析：读取 Figma 文件的节点树、布局和样式信息
• 样式提取：精准获取颜色值、字体大小、边距、圆角等设计 token
• 组件识别：识别 Figma 组件实例和变体
• 代码生成辅助：为 AI 提供精确的设计规范上下文，减少设计还原偏差
• 图片资源下载：自动导出设计稿中的图片资源
• 多框架支持：辅助生成 React、Vue、HTML/CSS 等代码

适用场景

• 设计师交付给开发后的设计稿还原
• AI 辅助前端开发，一键生成高保真代码
• 设计系统一致性检查
• 组件库批量生成代码
• 设计走查自动化

安装配置

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_FIGMA_API_KEY>", "--stdio"]
    }
  }
}

需要在 Figma 账户设置中生成 Personal Access Token。