什么是 Figma Make？
Figma Make 是一个直接内置于 Figma 平台中的 AI 应用构建器，它只需接受一段文字提示，就能生成一个可运行、代码驱动的前端应用，而无需你离开 Figma 工作区或设置单独的工具。
它生成的是 React 应用，具备完整的源代码访问权限、自动版本历史和一个实时预览 URL；它与其他 AI 构建器的不同之处在于，你可以选择真正执行工作的底层模型：Claude Sonnet 4.6、Gemini 3 Flash、Gemini 3.1 Pro 或 GPT-5.5，而不是被锁定在单一模型中、看不到正在运行的内容。
输出结果不是线框图或设计文件，而是实际可编辑的代码，你可以检查、修改并推送到 GitHub。
Figma Make 适合谁？
- 已经在使用 Figma 的产品设计师。 Make 直接位于你正在使用的工具内，因此不需要学习新平台，也不需要在你已经支付的费用上再叠加新的订阅。
- 需要快速做出演示的非技术创始人。 一个复杂的、多屏应用，具备基于角色的访问权限和逼真的数据，能在不到 10 分钟内完成，这快到足以带去第一次投资人会议。
- 需要“展示”而不是“讲述”的产品经理。 Figma Make 产出的内容，你可以直接交给利益相关者并带着他们演示，而不是一份屏幕 PDF。
- 想要一个可运行脚手架的开发者。 生成的代码是干净的带 TypeScript 的 React，且免费计划即可访问完整源代码，这使它成为真正的起点，而不是一次性原型。
Figma Make 的优缺点
- 仅凭一个提示即可构建复杂的多屏应用
- 免费计划包含完整源代码访问
- 可选择 AI 模型：Claude、Gemini 或 GPT
- 自动版本历史会保存每次构建迭代
- 无需额外提示即可生成基于角色的身份验证
- 原生内置 GitHub 和 Supabase 集成
- 视觉编辑器和代码编辑器可在同一工作区内使用
- 首次构建会出现代码警告
- 每月免费额度很快就会用完
- 自定义域名需要付费 Figma 套餐
评分细分
以下评分反映的是 Figma Make 目前在公开测试版中的表现。对于处于这个阶段的产品来说，输出质量远高于我的预期，而且对于已经在付费 Figma 方案上的团队而言，价值几乎无可争议，因为无需额外付费。
| 功能 | 评分（满分 10 分） | 评分原因 |
|---|---|---|
| 易用性 | 9.5 | 零设置、提示词优先的入口、双编辑路径，以及 8 分钟的构建周期，使它成为上手门槛最低的 AI 构建器之一。 |
| 功能与实用性 | 9.8 | 基于角色的身份验证、Stripe 支付界面、多图表报表、管理控制台、模型选择，以及完整的 REST API 参考，全部都能从一个提示词生成。 |
| 设计与自定义 | 9.4 | 默认的视觉输出简洁且专业，即使在免费计划中也能使用点击选择的视觉编辑器和完整源代码访问。 |
| 性价比 | 9.4 | 免费层级的完整代码访问确实不常见，而付费计划用户则是在现有的 Figma 订阅中获得 Make，而不是额外增加一项收费。 |
| 性能与可靠性 | 9.9 | 8 分钟内就能生成一个包含 Stripe 界面和管理控制台的多屏、具备角色意识的应用，这是我测试过的最快“构建到可用输出”比率。 |
| 总体 | 9.6 | 一款出色的测试版产品，在输出质量和功能深度上已经超越了许多更成熟的 AI 应用构建器。 |
Figma Make 功能
- 10 分钟内完成提示词到应用的构建
- 支持 Claude、Gemini 和 GPT 等多模型选择
- 自动生成基于角色的用户身份验证
- 可点击选择的视觉编辑器，带内联样式控制
- 免费层即可访问完整 React 源代码
- 无需额外配置即可使用 GitHub 和 Supabase 集成
- 一键发布到 figma.site 子域名
我的 Figma Make 真实评测：测试后我发现了什么
起始界面会立刻让你直奔主题
落地页就是一个单独的提示词输入框，配有简短标语：“用 AI 让你的想法变成现实。从设计开始，借助提示词快速打造功能性原型。” 输入框下方有三个建议起点：
- 引导流程
- 数据仪表盘
- 渐变图库
你可以完全忽略这三个，直接输入任何你想要的内容。
我完整提交了这段提示词：
“创建一个面向房东和租户的房产管理平台。包括用户身份验证、房源列表、租约管理、租金支付、维护请求、文档上传、消息、通知、管理仪表盘、报表、Stripe 集成、PostgreSQL 数据库、REST API、响应式设计和部署说明。该应用应具备生产就绪性并可扩展。”
工具没有任何阻碍地接受了它，并直接开始构建。没有项目类型选择器，没有模板库，也没有任何架构预配置。
结论： 入口几乎与我测试过的任何 AI 构建器一样零摩擦。代价是，在构建前没有任何引导结构，所以含糊的提示词会产出含糊的结果。你能得到什么，完全取决于你输入了什么。
注册很快，而且不会在你看到输出前设置付费墙
在未登录前点击箭头按钮会触发一个“Welcome to Figma” 模态框。两个选项：
- 使用 Google 继续 （一键完成，少于 10 秒）
- 使用邮箱继续 （输入邮箱、验证，总计少于 30 秒）
两条路径都会把你带入 Figma Make 工作区，并且你的构建已经排队开始。此阶段没有计划选择屏幕，没有信用卡提示，也没有升级墙。免费 Starter 计划会自动激活。
如果你已经有 Figma 账户，该模态框不会出现，你会直接进入构建器。
构建耗时 8 分钟，并且会清楚告诉你它在做什么
工作区左侧是聊天栏，右侧是实时预览。预览会显示一个占位内容“Building your idea…”，随后在工具推进时显示“Working out the details…”。
让它不同于普通加载页面的，是聊天栏中的推理面板，它会实时记录工具的思考过程。
在我的构建过程中，推理面板显示：
- 工具在写入第一行代码之前先调用了一个主题工具
- 在处理提示词时它记录了“Worked with 3 files”
- 推理日志描述了完整方案：它先映射剩余功能（房源筛选、租约管理、付款历史、维护请求、消息、通知和管理仪表盘），并说明会先用类型定义来构建 React 组件，然后生成带有真实细节的模拟数据，最后处理基于角色的视图导航与状态管理，覆盖每个部分
- 下方出现状态消息：“Writing the component structure…”
这个顺序很重要。工具先规划类型定义，再编写任何 UI，然后加入真实感的模拟数据，最后围绕它构建导航。这是结构化的方法，不是随机生成。
构建时间线：下午 3:58 到 4:06。8 分钟。
聊天面板底部的模型选择器允许你在开始前选择用于构建的 AI，或在不同构建之间切换：
| 模型 | 说明 |
|---|---|
| Default | Figma 推荐（未披露具体模型） |
| Claude Sonnet 4.6 | 平衡，高效 |
| Gemini 3 Flash | 快速，迭代型 |
| Gemini 3.1 Pro | 深入，富创造性 |
| GPT-5.5 | 能力强，速度快 |
能够在工具内直接从快速迭代模型切换到更深度的模型，而无需离开工具或从头重建，这是一个很有价值的工作流优势。
在模型选择器旁边，还有一个 Build/Plan 模式切换：
| 模式 | 作用 |
|---|---|
| Build | 边创建边迭代 |
| Plan | 针对复杂工作先对齐并在写代码前规划架构 |
对于像我这样详细的提示词，Plan 模式很可能会生成更干净的首个构建，并减少警告。我使用了 Build 模式，并在第二轮处理了这些警告。
完成的输出自己命名为 PropVault，并且名副其实
最终生成的应用，工具未被要求便命名为 PropVault，是一个多屏房产管理平台，具有统一的视觉识别：深海军蓝侧边栏、简洁的排版，以及登录屏上的上下文社交证明。登录页展示：
- 左侧深色面板包含 PropVault 标志、标语（“Property management, simplified.”）以及三个模拟统计：86 properties managed、1,240 active tenants、$2.1M collected monthly
- 右侧面板包含 Sign In / Create Account 标签页、预填邮箱（marcus@propvault.io）和密码，以及三个角色选择按钮：Landlord、Tenant、Admin
- 页脚提示：“Demo: click a role above, then sign in”
左侧导航中的每个屏幕都会打开一个可用且有内容的页面。以下是完整应用中构建的内容：
| 屏幕 | 构建内容 |
|---|---|
| Dashboard | 四个 KPI 卡片（每月收入、入住率、待处理请求、总房产数）、带 “Live” 标记的 12 个月收入与支出折线图、最近活动流、带 Send Reminders 按钮的逾期付款提醒、带单独 Renew 按钮的即将到期租约 |
| Properties | 带筛选功能的房产列表 |
| Leases | 带状态跟踪的租约管理 |
| Payments | 带状态徽章的付款历史表，以及 Stripe 驱动的安全支付弹窗 |
| Maintenance | 看板（Open / In Progress / Completed），带优先级徽章和供应商分配；租户提交表单 |
| Messages | 双栏聊天界面，带真实感对话线程和回车发送支持 |
| Documents | 拖放上传区域、分类筛选标签、带悬停操作的文件网格 |
| Reports | 柱状图、横向入住率图、维护饼图、KPI 指标表、日期范围切换（3m / 6m / 12m） |
| Admin Console | 用户管理表、系统健康和集成面板、完整 REST API 参考、部署说明（PostgreSQL、Docker、Vercel、Stripe webhook 配置） |
每个屏幕中的数据都是模拟的。后端连接需要配置后才能真正存储或检索实时数据。经过 8 分钟后，你得到的是一个生产质量的前端脚手架，具备足够的屏幕覆盖和数据密度，可以作为工作演示来展示。
三个用户角色都被正确限定，而且每个角色的细节都令人印象深刻
基于角色的访问控制是 AI 构建器最常偷工减料的地方。Figma Make 没有这样。每个角色登录后都会进入完全不同的体验，拥有自己的导航、自己的数据视图和自己的权限范围。
| 角色 | 导航项 | 仪表盘重点 |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | 所有房产和租户的整个平台指标 |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | 仅此租户的个人指标 |
| Admin (Cassandra Voss) | All Landlord items plus Admin | 与 Landlord 仪表盘相同，但可访问 Admin Console |
Landlord 仪表盘细节：
- Monthly Revenue：$41,900（Apr 2024，较上月 +2.8%）
- Occupancy Rate：88%（76/86 units，较上月 +1.2%）
- Open Requests：5 个维护工单
- Total Properties：6 处房产，86 个总单元
- Revenue vs. Expenses 图表覆盖 May 到 April（12 个月）
- 最近活动流：收到租金、逾期付款、新维护请求、即将到期租约、租户消息
- 提醒横幅：“2 overdue payments require attention”，并列出 Tomás Reyes（$2,100）和 Fatima Al-Sayed（$2,650），附带 Send Reminders 操作按钮
Tenant 仪表盘细节（Priya Nair）：
- Next Payment：$1,850，截止 April 1, 2024
- Lease Status：Active，结束于 August 31, 2024
- Open Requests：1（HVAC repair pending）
- Messages：2 unread
- 付款历史显示 Maple Grove #4B、$1,850、Paid
- 维护请求显示 “HVAC not cooling”，带 In Progress 徽章，日期为 March 28, 2024
Tenant 角色下的 Payments 屏幕在点击“Pay Now”时会打开一个 Stripe 品牌的弹窗：
- 标题：“Secure Payment. Powered by Stripe.”
- 付款条目：April Rent, Maple Grove #4B, $1,850.00
- Card Number 字段（预格式化）
- Expiry（MM/YY）和 CVC 字段
- 支付按钮预标注为：“Pay $1,850.00”
- 页脚：“256-bit SSL encryption · PCI DSS compliant”
Admin Console（Cassandra Voss）：
Admin Console 有四个标签页（Users、System、API Docs、Deployment），并默认打开用户管理表。
每一行都有编辑和移除操作按钮。右上角有一个 Invite User 按钮。Tomás Reyes 被正确标记为 Delinquent，这与 Landlord 仪表盘上的逾期付款提醒一致。
编辑使用两种并行工具，而且两者都可免费使用
构建完成后，有两条编辑路径同时可用，而且都不受付费计划限制。
路径 1：视觉编辑器
- 点击实时预览中的任意元素即可选中它，并打开浮动编辑栏
- 编辑栏包含：字体家族选择器、字号（带减号和加号控制）、粗体、斜体、文本对齐、宽度控制、间距以及元素删除
- 所选元素会同时加入聊天输入框，因此点击元素并输入聊天内容会发送一个已包含该元素上下文的更改请求
- 选择容器时，上方会显示准确的组件类型和嵌套关系（例如，“div x 4”），无需打开代码即可获得精确的布局上下文
视觉选择器与聊天输入之间的联动，是这个编辑工作流中最实用的部分。
你不必在两者之间二选一。你可以点击以识别元素，然后在聊天中描述你想要的修改，AI 会在完全理解你所选组件的情况下应用它。
路径 2：代码编辑器
点击工作区顶部的代码图标即可打开完整 React 源代码。文件结构：
src/
app/
components/
App.tsx (1,300+ lines)
styles/
fonts.css
globals.css
index.css
tailwind.css
theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx 采用命名视图函数组织（DashboardView、ReportsView、MaintenanceView 等），并用分节注释分隔每个屏幕。
代码可读、结构清晰，并可直接在浏览器中编辑。无需下载或外部 IDE。这个完整源代码访问权限在免费计划中就可使用。
通过视觉编辑器、聊天或代码编辑器做出的更改，都会进入同一个实时预览并立即反映出来。
首次构建有 10 个以上警告，但可一键准确修复
初始构建完成后，聊天面板底部出现了一个横幅：“10+ warnings”，旁边有一个“Fix for me”按钮和关闭图标。
打开浏览器控制台（可通过工作区中的控制台图标访问）后，看到问题源于 Recharts 图表库中的重复 SVG gradient IDs。
原因：Dashboard 和 Reports 部分都为 SVG 元素注册了相同的通用渐变名称（revGrad、expGrad）。Recharts 会将渐变按 ID 注册到 SVG 命名空间中，因此来自多个图表实例的通用名称会在同一文档中冲突。控制台显示了一长串压缩后的 JavaScript 引用，全部都追溯到这个冲突。
点击“Fix for me”会触发第二次构建。工具识别了三个具体问题并进行了有针对性的修复：
- Dashboard AreaChart：将渐变 ID 从通用的 revGrad / expGrad 重命名为唯一标识 dash-area-rev / dash-area-exp，以防止命名空间冲突
- Occupancy BarChart：将 cell keys 从数字索引（key={i}）改为使用房产名称的稳定字符串 key（key={\occ-${entry.property}`}`），以便每个单元格拥有稳定且唯一的 key
- Maintenance PieChart：使用条目名称应用相同的 key 修复（key={\pie-${entry.name}`}`）
这次构建自动保存为 Version 2。版本历史面板（通过点击工作区顶部的版本标签访问）显示了清晰的日志：
| 版本 | 标签 | 时间 |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
第二次处理后，控制台只剩下干净的 vite 热重载消息，警告横幅也消失了。回滚到 Version 1 只需在版本历史面板中点击一次。
从首次构建到控制台干净的完整修复周期共 13 分钟，而且无需手动编辑代码。
设置面板比你对测试版工具的预期更深入
设置面板可通过工作区右上角的齿轮图标打开。下拉菜单将选项分为两组：
Make settings:
- General
- Domains
- Fonts
- Chat preferences
- Audio
Integrations:
- GitHub
- Supabase
- Adjust guidelines
General settings 涵盖发布状态和 SEO 配置：
| 设置 | 详情 |
|---|---|
| Status | Not published（页面内提供 Publish 按钮） |
| Title | 可编辑项目名称 |
| Meta description | 根据构建上下文自动填充 |
| Language | ISO 语言代码字段 |
| Google Analytics ID | 连接 GA4 资源以进行流量追踪 |
| Exclude from search engine results | 复选框，免费计划下默认勾选 |
| Clear chat context | 永久清除 Make 的对话记忆；聊天历史日志仍可见 |
Clear chat context 选项值得理解。它会擦除 AI 对构建对话的记忆，但不会删除可见的聊天日志。当较长的构建线程让 AI 在新的修改请求中持续依赖早先上下文时，这会很有用。
Domains settings 显示：
- Base domain: example.figma.site（免费的子域名，发布后上线）
- Connected domains: 可添加来自第三方提供商的自定义域名（需要付费方案）
Integrations:
- GitHub：代码导出和仓库同步
- Supabase：连接真实后端和数据库，以替换模拟数据层
- Adjust guidelines：设置 AI 在进行更改时遵循的自定义说明，涵盖诸如组件库规范、命名标准或你希望在每次构建和迭代中都遵守的设计约束
Adjust guidelines 选项是一个很有意义的补充，而工具其他部分并不会突出显示它。它允许你在构建开始前定义 AI 应如何行为，而不是在事后纠正不希望出现的模式。
发布只需一步，免费计划的 URL 看起来像一个真正的独立应用
点击右上角的 Publish 按钮会打开一个面板，涵盖上线所需的一切：
| 字段 | 详情 |
|---|---|
| Title | 可编辑项目名称 |
| URL | example.figma.site |
| Status | Not published |
| Feature on Community | 切换是否将应用列入 Figma Community 画廊 |
Feature on Community 切换项会展开一个预览区，展示应用在 Figma Community 中与其他已发布应用并列时的外观。
从这里：
- 你最多可以选择五个标签来对应用分类（选项包括 Apps、Dashboards，以及通过“Show more”提供的更多内容）
- “Show chat history” 复选框控制构建对话是否对社区查看者可见
- 有一条提示确认：“By publishing to Community, you agree to Figma’s Creator Agreement”
发布后，figma.site URL 会在独立浏览器视图中打开该应用。没有 Figma 编辑器外壳，没有水印，也看不到围绕应用的“built with Figma Make”徽标。它加载并运行得像一个真正的独立网页应用，而不是一个嵌入框架的原型。
免费计划发布包括：
- 一个可分享的 figma.site 子域名 URL
- 无可见 Figma 品牌元素的独立应用视图
- 可将应用展示在 Figma Community 中
付费计划发布增加：
- 来自第三方提供商的自定义域名
- 更多 AI 额度用于额外构建和迭代
Figma Make 的价格与方案
Figma Make 并不是单独销售的产品。访问权限包含在 Figma Full seat 方案中，并且 AI 额度与所有 Figma AI 功能共享，而不仅仅是 Make。在 Figma Make 中进行一次构建，会从与 Figma Design 的 AI 工具、图像编辑以及平台上其他任何 AI 驱动操作相同的月度配额池中扣除。
免费 Starter 计划包含 Figma Make 访问权限，但每月额度上限低到足以让一次复杂构建消耗掉很大一部分。Starter 计划适合用来评估工具和进行一次性测试，不适合把 Make 作为常规构建流程的一部分。
付费方案围绕座位类型展开。Professional、Organization 和 Enterprise 层级的 Full seat 每月都提供明显更多的 AI 额度，而且每个层级的月度配额都会递增。如果你已经因为 Design 访问而在付费 Figma 方案上，Make 就已经包含在你现有的额度池里，无需额外付费。
额外的 AI 额度可作为所有付费方案的附加项购买，这对于每周运行多次 Make 构建、同时又常规使用 Figma AI 的团队来说值得考虑。
没有单独的免费试用，Starter 计划本身就是免费的入门方案；Figma 公开条款中也没有写明退款保证。年度方案取消不会退还剩余期限的费用。Professional 方案的取消可以在 Admin Dashboard 中处理；Organization 和 Enterprise 方案的取消则需要联系销售团队。
按实际使用匹配方案： Starter 计划足以覆盖评估和偶尔使用。Professional Full seat 是希望每月使用 Make 超过一两次而又不在项目中途撞上额度上限的团队所需的最低现实起点。
Figma Make 的替代方案
目前最直接的竞争对手是 Figma Make 的 Lovable。Figma Make 在 Figma 工作区内生成前端应用，而 Lovable 则是一个专门的 AI 应用构建器，覆盖完整技术栈：前端、后端、数据库、身份验证，以及一键部署，来自一个拥有超过 800 万报告用户的独立平台。
对于那些并不在付费 Figma 方案中的人，或者需要一个连接生产环境数据而不是精致原型的人来说，Lovable 能以更少配置、更快速度把你带到已部署、已连接数据的应用。
| 功能 | Figma Make | Lovable |
|---|---|---|
| 易用性 | 提示词优先，无需设置 | 提示词优先，无需设置 |
| 最适合 | 已经在使用 Figma 付费方案的设计师和团队 | 构建并部署 MVP 的非技术创始人 |
| 后端与数据 | 仅前端；可通过集成使用 Supabase | 从一开始就内置 Supabase 后端 |
| 设计灵活性 | 视觉编辑器、聊天编辑和完整源代码访问 | 基于聊天的编辑，并提供代码导出 |
| 定价模式 | 捆绑在 Figma Full seat 中；共享 AI 额度池 | 独立订阅，拥有自己的额度系统 |
最终结论：Figma Make 值得买吗？
对于已经在支付 Figma Full seat 费用的人来说，答案很直接：值得，而且幅度很大。输出质量使 Figma Make 领先于许多上市更久的 AI 应用构建器。
一个提示词就生成了一个多屏、基于角色的房产管理平台，包含 Stripe 支付弹窗、实时分析仪表盘、Kanban 维护看板、双栏消息界面，以及带用户管理表、REST API 文档和部署说明的完整管理控制台。以上全部都在 8 分钟内完成，免费计划还提供完整源代码访问和一个干净的独立发布 URL。对于测试版产品来说，这一点都不普通。
对于目前不在 Figma 体系内的团队，是否采用就需要诚实审视你真正需要什么。要获得 Figma Make 的有效额度访问，需要一个付费 Figma 方案中的 Full seat，这比任何独立 AI 构建器所需的都是更广泛的平台投入。如果主要目标是用实时数据库和真实用户交付一个可工作的 Web 应用，而不是做一个原型，那么 Lovable 以更少配置和更少对设计平台订阅的依赖，能更快达成目标。
目前最能从 Figma Make 中受益的受众，是那些希望在静态 Figma 原型与可测试、代码驱动的交互式构建之间缩短差距的设计师和产品团队，而且不想更换工具或等待开发者来实现的人。对于这个特定用途，Figma Make 是当前最好的选择。
