Figma Make 评测：设计稿一键变代码的新姿势

Figma Make 是 Figma 在 2026 年推出的 AI 应用生成功能。它直接长在 Figma 里：你用文字描述要做的页面，它生成可交互的设计稿，然后通过 MCP 协议让 Cursor、Claude Code 这类 AI 编码工具直接读你的设计稿生成代码。本文实测它的真实能力，以及对国内设计师和开发者的价值。

Figma Make 是什么

简单说：它在 Figma 里加了一个 AI 生成层。你描述「需要什么样的页面」，它生成完整布局，包含组件、交互、样式。

但真正的突破是 MCP（Model Context Protocol）集成。AI 编码工具可以直接读你的 Figma Make 设计稿，生成像素级匹配的生产代码。这意味着：

• 设计师在 Figma 里出图
• 工程师在 Cursor 里说「按这个设计稿生成 React 代码」
• AI 读 Figma 设计数据，生成代码
• 设计意图在交付过程中不丢失

这是真正的设计-代码闭环。

核心功能实测

Prompt 生成 UI

输入「一个 dashboard，左侧导航栏，中间是营收/用户/转化率三个指标卡片，下面是最近活动流」，Make 会生成完整布局，间距、字体、颜色都合理。

输出不是线框图，而是带样式、带交互元素的可点击原型。

MCP 设计转代码桥接

这是 Figma Make 对 vibe coding 工作流最大的贡献。连接 AI 编码工具到 Figma 后，编码助手能：

• 读完整的 Figma Make 设计布局
• 理解组件层级、间距、样式
• 生成像素级匹配的 React、Next.js 代码
• 在你迭代代码时保持设计一致性

设计系统识别

Figma Make 能引用你已有的 Figma 组件库和设计 token。生成布局时会用你的品牌色、字体规则、间距系统、已有组件。这意味着 AI 生成的页面看起来跟你产品里其他页面一致，而不是「AI 生成的模板感」。

对有成熟设计系统的团队，这是 Figma Make 比 v0 或 Bolt.new 这种独立工具的核心优势。

价格

Figma Make 包含在标准 Figma 计划里：

注意：Figma 在 2026 年 3 月之后强制 AI credit 限制。重度用户可能需要额外购买 $120-240/月（约 ¥864-1728/月）的 credit 包。生成频率高的团队，预算会失控。

国内设计师能用吗

Figma 在国内访问基本无障碍（虽然偶尔卡），是国内设计团队的主流工具。Figma Make 作为 Figma 内置功能，访问体验跟 Figma 本身一致。

几个注意点：

1. 支付：Figma 支持支付宝（国际版），国内信用卡通常也能用
2. 网络：MCP 连接 Cursor 需要稳定网络，国内裸连有时会断
3. 数据存储：Figma 文件存在海外，敏感设计稿不建议放
4. 替代方案：国内蓝湖、墨刀也在做类似 AI 功能，但 MCP 集成方面 Figma 仍领先

掘金上有不少设计师在分享 Figma Make 工作流，主要是产品设计师和前端工程师在用。

优点和缺点

优点：Figma 原生集成、MCP 设计转代码保真度高、自动用品牌组件和 token、可交互原型用于干系人验证、Figma 的分享和评论全适用、对话式调整。

缺点：必须订阅 Figma、AI credit 重度用户需要 $120-240/月（约 ¥864-1728/月）credit 包、只出设计需要 MCP 配合编码工具、应用逻辑有限。

vs 其他方案

总结

Figma Make 代表 vibe coding 的设计优先路径：从文字生成设计，再通过 MCP 桥接到代码。对看重设计品质和品牌一致性的团队，这一额外步骤换来显著的设计-开发摩擦减少。

MCP 集成是真正的颠覆点：让 Figma 从「开发者参考的设计工具」变成「开发者 AI 助手直接读取的设计工具」。想看更多 vibe coding 工具对比，可读 Cline 评测 2026。