cdn.sanity.io

不离开Figma也能做出真正的应用 — Figma Make实战指南

Figma Make, 氛围编程, 设计师开发应用, Supabase集成, AI原型工具设计

Prompt, prototype, perfect: Figma Make is now available to all users

Figma releases new AI-powered tools for creating sites, app prototypes, and marketing assets

Create a Supabase backend using Figma Make

在Figma里设计完之后，是不是总要等开发来实现？做出的原型太静态，说服不了团队？Figma Make在7月24日向所有付费用户正式开放了。现在可以在Figma里用几行提示词，做出有登录、数据库、真实运行的应用。

3秒概览

自然语言提示词 → Figma内生成React应用 → 连接Supabase后端 → 自动应用设计库 → 链接即时分享

这到底是个什么工具？

Figma Make是一个vibe coding工具，可以用自然语言提示词在Figma内部直接生成可运行的应用。 2025年5月在Config 2025上以测试版亮相，7月24日向Professional、Organization和Enterprise计划全体用户正式开放。不需要会写代码，不需要是开发者。

跟Bolt、Lovable、v0有一个根本区别：其他工具把Figma文件当"参考资料"，而Figma Make以Figma设计库本身作为唯一数据源（Source of Truth）。团队的颜色规范、字体样式、组件风格会自动应用到生成的应用中。

GA版本新增了两个核心功能：

Figma设计库导入
可以把现有的Figma设计系统——颜色、字体、核心样式——直接导入Make文件。团队的品牌规范会自动应用到生成的应用里。
Supabase后端连接
在提示词中写明需要存储数据，AI会自动建议连接Supabase。点击确认后，生产级Postgres数据库、邮件/社交登录（GitHub·Google）、文件存储全部自动配置好。虚拟数据变成真实数据库。

1.5小时

原本需要数天的网格布局原型完成时间

5小时

Supabase集成全栈应用完成案例

3,000

Professional计划月积分（约50-70个提示词）

Figma内部团队的真实案例也公开了。研究员Rie McGwier用Make做了一个把数学模型和UI结合的调研流量计算工具， PM Tara Nadella做了设计系统合规检查的原型来验证假设，产品设计师Kelly Hu和Giorgio Caviglia把原本要花好几天的网格布局原型，用Make在1.5小时内完成了。

Figma Make在底层生成的是什么

React + Tailwind代码。连接Supabase后，Postgres数据库、邮件/社交认证、文件存储、Edge Functions、向量嵌入全部自动配置。工程师可以接手后继续扩展。

跟Bolt·Lovable有什么本质区别？

vibe coding工具已经很多了，Figma Make的定位很清晰：起点不同。

	Bolt / Lovable / v0	Figma Make
设计来源	AI重新生成（Figma只是参考）	现有Figma库即为唯一数据源
工作空间	需要切换到其他平台	在Figma内完成全部工作
设计系统	需要单独配置	团队库自动应用
分享原型	需要部署URL	直接分享Figma链接
团队协作	各平台独立协作功能	沿用现有Figma协作方式

一位资深UX设计负责人的评论说得很准："Bolt或Replit的产品是代码。Figma Make的产品是设计。" 把设计当成产品本身而不是交接的起点，这个视角是跟其他工具根本上的差异。

实际使用评测中也有共同指出的局限。

项目	现状
代码结构	单文件——大型生产应用有局限
GitHub集成	暂不支持（2025年现状）
Make→Figma Design反向转换	不可（单向）
Supabase适用场景	简单CRUD没问题，复杂关系型数据库有限制
积分透明度	用户反映消耗追踪不够清晰

"设计是个损耗很大的过程，因为语言是只滑溜的动物。"
— Gui Seiz，Figma设计总监

Figma设计总监Gui Seiz把它定义为思维方式的转变："它鼓励你去玩、去冒险、去找到更有趣的解决方案。" 用可运行的原型来代替语言描述，团队对齐会快很多。

怎么开始：最核心的步骤

打开Make文件
在Figma里新建文件，选择文件类型"Make"。Professional计划以上立即可用。Starter计划用户可以创建Make文件，但共享/发布需要Full Seat。
用提示词生成第一个界面
描述你想要的应用。越具体越好——"用户输入目标，AI分解成分步计划的应用"比"目标管理应用"效果好得多。附上参考图片也可以匹配视觉风格。
连接Figma设计库
在侧边栏打开Design Libraries，导入现有团队库。之后生成的UI会自动应用团队的颜色、字体和样式。
连接Supabase（可选）
在提示词里写需要存储数据，AI会建议连接Supabase。确认后数据库、认证和存储自动配置好。Supabase有免费套餐。
分享链接获取团队反馈
点击Share生成链接，团队成员或客户可以直接体验交互式原型，不需要Figma账号。可以在这个阶段进行实际的可用性测试。