Figma Dev Mode

产品介绍

Figma Dev Mode MCP 是 Figma 官方推出的设计到代码集成工具，让 AI 编程助手能够直接访问 Figma 设计文件，获取组件的尺寸、颜色、字体、间距等设计变量，生成准确的代码实现，大幅减少设计到开发的翻译成本。

核心功能

• 设计稿读取：获取 Figma 文件中选中节点的完整设计信息
• 代码生成：自动生成 React/Vue/CSS/HTML 代码片段
• 设计变量提取：提取颜色、字体、间距、圆角等 Design Token
• 组件信息：查看组件属性、变体、交互状态
• 图片资源：获取设计稿中的图片资源链接
• Dev Mode 集成：与 Figma Dev Mode 无缝协作

安装配置

需要 Figma 访问令牌，在 Figma 账户设置中生成 Personal Access Token。

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp-server"],
      "env": {
        "FIGMA_API_KEY": "figd_your_personal_access_token"
      }
    }
  }
}

典型使用场景

• AI 根据 Figma 设计稿直接生成前端代码
• 提取设计系统的颜色、字体等 Token
• 检查代码实现与设计稿的差异
• 自动生成组件文档和 Props 类型

平台支持

全平台支持，Figma 官方维护。需要 Figma 付费计划中的 Dev Mode 功能。