What Is Figma Make?Figma Make 是什么？
Figma Make is Figma's AI-powered prompt-to-app tool, announced at Config 2025 on May 7, 2025 alongside Figma Sites, Draw and Buzz, and rolled out to paid Full seats from around July 2025 (general availability per the assignment brief and the keyword file; Figma's own rollout notes describe a staged rollout to paid Full seats with AI features enabled). You describe what you want — or start from an existing design — and Make generates a working prototype or app with real code, inside your Figma file, instead of a clickable mockup. It is the design-side answer to vibe coding: the designer stays in Figma, and the output is code, not just pixels.Figma Make 是 Figma 的 AI 提示词转应用工具，2025-05-07 Config 2025 与 Figma Sites、Draw、Buzz 一同发布，约 2025-07 起向付费席位全面开放（GA 口径来自任务简报与选题库；Figma 自己的上线说明描述为面向已开 AI 功能的付费 Full 席位分阶段 rollout）。你描述想要的东西——或从已有设计出发——Make 就在你的 Figma 文件里生成带真实代码的可用原型或应用，而不是只能点的假图。它是设计侧对 vibe coding 的回答：设计师留在 Figma 里，产出的是代码、不只是像素。
The October 2026 update is the reason this page exists now. At Config India on October 15, 2026 (Figma's first Config in India, Bengaluru), Figma moved code layers into open beta — interactive, code-backed prototypes on the canvas, built by converting a design frame, importing a GitHub repo, capturing your website with the Figma Chrome extension, or prompting from scratch — alongside Specs in open beta on paid plans (Markdown context for humans and agents), Payload as Make's native backend (CMS, database, media, APIs, auth, admin panel, hosted by Figma; Supabase stays available as a third-party connection), Guidelines in open beta, and Figma MCP updates including 20 new partners. Two pricing facts matter: creating and editing inside a code layer is free on paid plans through November 4, 2026, after which code-layer tasks draw AI credits like other agent features; and the Figma agent itself became generally available on October 6, 2026 and uses credits. Related vibe-coding coverage: v0. Prices per Figma's official site.2026-10 这次更新是本页现在存在的理由。2026-10-15 Config India（Figma 首次在印度办 Config，班加罗尔）上，Figma 把 code layers 推入公开 beta——画布上的交互式代码支撑原型，可经转换设计画框、导入 GitHub 仓库、用 Figma Chrome 扩展抓取你的网站、或从零提示词生成——同时推出 Specs 公开 beta（付费档）（给人与智能体的 Markdown 上下文）、Payload 作为 Make 原生后端（CMS、数据库、媒体、API、登录、管理后台，Figma 托管；Supabase 仍可作为第三方连接）、Guidelines 公开 beta 与 Figma MCP 更新（含 20 个新合作方）。两个价格事实很重要：code layers 的创建与编辑在付费档免费至 2026-11-04，此后 code layers 任务像其他智能体功能一样消耗 AI credits；Figma agent 本人于 2026-10-06 GA、同样消耗 credits。相关 vibe coding 覆盖：v0。价格以 Figma 官网为准。
Verdict: Figma Make is the right prototyping tool for teams that already live in Figma — it kills the screenshot-to-engineer round trip for the first 80% of an idea. Code layers plus Specs plus the Figma MCP is the real story: a designer can now hand an engineer (or Claude Code / Cursor) a running prototype plus machine-readable intent, not a picture. The honest limits: output still needs review before production, AI credits now meter every agent step, and teams without a Figma seat get nothing from this tool. Use the free-until-November-4 code-layer window to learn what iteration actually costs.
结论：已经活在 Figma 里的团队，Figma Make 就是对的原型工具——它把想法前 80% 的截图转工程师往返砍掉了。code layers + Specs + Figma MCP 才是真正的故事：设计师现在交给工程师（或 Claude Code / Cursor）的是一份能跑的原型加机器可读的意图、而不是一张图。实在的限度：产出上生产前仍需复核、AI credits 现在按每一步智能体操作计费、没有 Figma 席位的团队从这个工具里得不到任何东西。趁 code layers 免费到 11 月 4 日的窗口，摸清一次迭代到底花多少。
— 中国吧 AI Tools Hub Editorial Team
Who Should Use It?谁适合用？
✓ Good Fit For适合以下场景
- Design teams already working in Figma已经在 Figma 里工作的设计团队
- Product teams validating an idea before engineering time在投入工程师时间前验证想法的产品团队
- Design-system owners handing intent to coding agents要把意图交给编码智能体的设计系统负责人
✕ Not Ideal For不适合以下场景
- Teams without Figma seats没有 Figma 席位的团队
- Production code with no human review不经人工复核就上线的生产代码
- Anyone expecting Make to replace engineering指望 Make 替代工程师的人
Getting Started快速开始
1. Start from a frame or a prompt — keep the first Make file separate from production1. 从画框或提示词出发——第一个 Make 文件与生产文件分开2. Turn the prototype into a code layer and write a Spec alongside it2. 把原型转成 code layer，并随手写一份 Spec3. Hand the code layer + Spec to Cursor or Claude Code via the Figma MCP3. 经 Figma MCP 把 code layer + Spec 交给 Cursor 或 Claude CodeKey Features核心功能
- Prompt-to-App in Your Figma File在你的 Figma 文件里提示词转应用 — Describe it or start from a design; Make generates a working prototype or app with real code, not a clickable mockup.描述它或从设计出发；Make 生成带真实代码的可用原型或应用，而不是只能点的假图。
- Code Layers (Open Beta, Oct 15, 2026)Code layers（公开 beta，2026-10-15） — Interactive, code-backed prototypes on the canvas — convert a frame, import a GitHub repo, capture a site, or prompt from scratch.画布上的交互式代码支撑原型——转换画框、导入 GitHub 仓库、抓取网站，或从零提示词生成。
- Specs: Context for Humans and AgentsSpecs：给人与智能体的上下文 — Markdown-based design intent that travels with the file and into Claude Code and Cursor via the Figma MCP.随文件走、又经 Figma MCP 进 Claude Code 与 Cursor 的 Markdown 设计意图。
- Payload: Make's Native BackendPayload：Make 的原生后端 — CMS, database, media, APIs, auth and admin panel hosted by Figma; Supabase remains a third-party connection.CMS、数据库、媒体、API、登录与管理后台由 Figma 托管；Supabase 仍是第三方连接。
- Figma MCP: Design Context into Code ToolsFigma MCP：把设计上下文送进编码工具 — Read and write Figma context from Cursor, Claude Code, GitHub Copilot and 20 new partners; create code layers and edit Specs from the agent.从 Cursor、Claude Code、GitHub Copilot 与 20 个新合作方读写 Figma 上下文；智能体可创建 code layers、编辑 Specs。
Pros & Cons优缺点
✓ Pros优点
- Designers stay in Figma while producing real, runnable code设计师留在 Figma 里、产出的却是真实可跑的代码
- Code layers + Specs + MCP close the design-to-code handoff gapcode layers + Specs + MCP 弥合了设计到代码的交接缝
- Payload backend turns a prototype into a production-shaped appPayload 后端把原型变成生产形态的应用
- Code-layer creation and editing free on paid plans through November 4, 2026code layers 创建与编辑在付费档免费至 2026-11-04
✕ Cons缺点
- Open beta rollout is gradual — your account may not see code layers yet公开 beta 逐步 rollout——你的账号可能还看不到 code layers
- Every agent step now draws AI credits after the free window免费窗口过后，每一步智能体操作都消耗 AI credits
- Output still needs human review before production产出上生产前仍需人工复核
- No Figma seat, no value from this tool没有 Figma 席位，这个工具就毫无价值
Use Cases应用场景
Popular ways people use it.常见用法：
🧪 Idea Validation in a Day一天验证想法
A PM prompts a dashboard in the morning and tests it with users by the afternoon — no engineering queue.产品经理早上提示词出一个看板、下午就拿去给用户测——不用排工程师的队。
🔄 Design-to-Code Handoff设计到代码的交接
A designer ships a code layer plus a Spec; the engineer (or agent) starts from running code and stated intent.设计师交出 code layer 加 Spec；工程师（或智能体）从能跑的代码与明示的意图出发。
🛒 Prototype with Real Data带真实数据的原型
Payload backend gives the prototype a CMS, auth and admin panel instead of hardcoded demo content.Payload 后端给原型 CMS、登录与管理后台，而不是写死演示内容。
📚 Design-System-Guided Generation设计系统引导的生成
Guidelines in published libraries keep agent output on-system and off anti-patterns.已发布库里的 Guidelines 让智能体产出合乎系统、不踩反模式。
Similar AI Tools相似 AI 工具
If you do not live in Figma, the browser builders on this site are the alternative: v0 for React UI quality and Lovable for full-stack apps. If you live in Figma but need a published website, compare Figma Sites next.如果不活在 Figma 里，本站浏览器 builder 是替代品：v0 讲 React 界面质量、Lovable 讲全栈应用。如果活在 Figma 里但要发布网站，下一步对比 Figma Sites。