# Figma Make Figma Make 是 Figma 推出的 AI 提示词转应用工具，旨在将创意和现有设计转化为功能性原型、Web 应用和交互式 UI。它非常适合以设计为导向、希望在进入代码开发和生产阶段前，在真实产品语境下进行原型设计的团队。 Canonical URL: https://aiidelist.com/zh/ide/figma-make Language: zh 更新日期: 2026-10-06 ## 概览 - 分类: AI App Builders / Prompt-to-App Tools - Figma Make 是一款设计原生的 AI 应用构建工具，连接了 Figma 设计、提示词、原型、GitHub、Supabase 以及基于 MCP 的开发者工作流。 - 编辑器基础: Browser - 平台: Browser, Figma, Figma Design, Figma Sites, GitHub, Supabase, Claude Code, Codex, Cursor, VS Code, Xcode - 开源: 否 - 本地模型支持: 否 - 自带 API 密钥: 否 ## 简评 对于已经将 Figma 作为产品设计中心，并希望将设计上下文转化为交互式原型或早期 Web 应用的团队来说，Figma Make 是极佳选择。它不太适合作为独立的生产级 IDE，也不适合从一开始就需要完全本地化、特定框架工程控制的团队。 ## 适合场景 - 将 Figma 文件转化为功能性原型的设计导向型团队 - 在工程交付前测试应用构思的产品经理和设计师 - 希望在 AI 生成过程中保留设计系统上下文的团队 - 需要通过 Supabase 接入真实数据的交互式原型 - 通过 MCP 将 Figma Make 原型连接到 Cursor、Claude Code、Codex、VS Code 或 Xcode 的工作流 ## 优点 - 非常适合已经在 Figma 中进行设计的团队。 - 无需离开 Figma 生态即可将设计文件和提示词转化为可运行的原型。 - 在产品设计、原型制作、GitHub 和 AI 编程 Agent 之间建立了强有力的桥梁。 - 支持 Supabase，使连接真实数据的应用实验更具实践意义。 - 模型选择器、计划模式和自定义技能提供了比基础提示词转应用工具更多的控制权。 ## 局限 - 需要完整本地 IDE 或终端优先编码工作流的开发者 - UI 原型设计并非瓶颈的后端重型产品团队 - 需要立即产出生产级代码且无需工程评审的项目 - 不允许云端 AI 工具处理设计或产品上下文的组织 - 不使用 Figma 文件、库或设计系统的非 Figma 生态团队 - 完全访问 Figma Make 需要付费计划中的全功能席位。 - AI 额度消耗因模型、复杂度和上下文大小而异。 - 生成的应用在投入生产前仍需工程评审。 - 不能替代完整的 IDE、后端平台或生产部署流水线。 - 部分高级工作流依赖于 Figma 特定产品，如库、MCP、Dev Mode 和团队权限。 ## 为什么选择 Figma Make？ 当设计文件已成为产品工作流的核心时，Figma Make 的优势最为突出。团队无需导出静态规范，也不必让 AI 编程工具通过截图去推测意图，而是可以直接从真实的 Figma 上下文出发，在同一个生态系统内利用 AI 生成交互式原型或早期 Web 应用。 这使得 Figma Make 的定位不同于典型的 AI 代码编辑器。它的重点不在于取代工程开发，而在于缩短产品创意、界面设计、用户测试与实现探索之间的距离。设计师可以超越简单的可点击原型，产品经理可以更早地测试业务流程，而工程师也能获得比静态设计交付物更具体、更具参考价值的产物。 ## 核心工作流 高效的 Figma Make 工作流通常始于定义明确的 Frame（画框）、产品需求或现有的设计系统。首条提示词应说明该原型需要验证的内容：目标用户、关键交互、数据假设、状态以及约束条件。随后，Figma Make 会生成第一个可运行版本，并支持通过对话进行迭代。 对于微调，直接点击编辑通常比重写完整提示词更快。对于较大的改动，Plan Mode（计划模式）更为合适，因为它能让模型在生成或修改代码前先审查上下文并对齐范围。针对可重复的团队流程，可以通过 Custom Skills（自定义技能）将设计评审、无障碍检查或特定产品规范转化为可复用的指令。 最重要的习惯是将每个 Make 文件视为一个目的明确的实验。用于可用性测试的原型、用于争取利益相关者支持的原型，以及用于工程交付的原型，在提示词编写和评审标准上都应有所区别。 ## 适用场景 Figma Make 适用于新手引导流程、仪表盘、轻量级 SaaS 概念、内部工具、落地页交互、产品概念演示、设计系统示例，以及需要比 Figma 传统原型模式更真实行为的各类原型。 当团队需要在工程团队投入开发前验证交互逻辑时，它尤其有用。例如，设计师可以关联一个 Figma 画框，要求 Make 将其转化为响应式流程，添加示例数据，必要时连接 Supabase，并发布一个可运行的版本以获取反馈。 ## 工具对比 与 Lovable 和 Bolt.new 相比，Figma Make 与设计过程的集成更加紧密。如果目标是从空白提示词快速创建独立的 Web 应用，Lovable 和 Bolt.new 可能更合适；而当项目始于 Figma 资产、设计系统上下文和设计评审流程时，Figma Make 则更具优势。 与 v0 相比，Figma Make 不仅仅局限于 React 组件生成，更侧重于将设计意图转化为功能性原型。v0 通常更适合构建生产级 React 和 Next.js 界面的开发者，而 Figma Make 则更适合希望在决定哪些内容进入生产代码前，在 Figma 内部进行迭代的产品团队。 与 Cursor 或 Claude Code 相比，Figma Make 并非通用的编程环境。两者是互补关系：使用 Figma Make 创建并验证原型，然后通过 Figma MCP 和 GitHub 将相关上下文带入工程开发工具中。 ## 最佳配置建议 对于已经在专业使用 Figma 的团队，最佳实践是保持设计库整洁、清晰命名画框和组件，并有意识地利用样式上下文。当源设计的结构足以让模型理解层级、意图和可复用模式时，Figma Make 的表现会更好。 在进行开发交付时，应尽早连接 GitHub，并在从原型转向生产时利用 MCP 资源。目标并非盲目地将生成的代码粘贴到主应用中，而是让工程师提取有用的结构、行为和样式意图，然后将其适配到生产框架、组件库、路由模型和数据层中。 对于需要精细管理 AI 额度的团队，建议将高性能模型和计划模式留给复杂任务。对于常规编辑，使用更简单的提示词和更小的上下文选择，以保持额度消耗的可预测性。 ## 迁移建议 从传统 Figma 原型迁移的团队，应从转换单个高价值流程开始，而非整个产品面。选择一个真实交互至关重要的流程：如设置、结账、仪表盘过滤、新手引导或 AI 功能演示。这有助于评估 Figma Make 是否真的改善了决策质量，而不仅仅是做出了更酷炫的演示。 从提示词转应用工具迁移的团队，应将 Figma Make 视为“设计优先”层，而非全栈替代方案。它可以生成有用的交互式 Web 应用，但要达到生产级别，仍需对架构、无障碍性、安全性、数据处理和可维护性进行评审。 对于有严格知识产权或数据政策的组织，在全面启用前应审查 AI 功能访问权限、内容训练设置、发布控制以及 Supabase 密钥管理。最佳的推广方式通常是受控的：从非敏感原型开始，定义提示词中可使用的数据范围，并记录 Make 输出何时允许进入工程评审阶段。 ## 功能 ### 提示词转应用创建 - 根据提示词生成功能性原型 - 从现有 Figma 设计开始构建 - 通过 AI 对话进行迭代 - 带生成代码的交互式预览 ### 设计感知编辑 - 点击并编辑特定的 UI 元素 - 在提示词中附加 Figma 设计稿 - 付费计划支持使用 Figma 库中的样式上下文 - 将预览内容复制回可编辑的 Figma 设计图层 ### 代码与交付 - 在 Figma Make 内部直接编辑代码 - 根据席位权限导出代码 - 将 Make 项目推送到 GitHub - 通过 Figma MCP 资源使用 Make 上下文 ### 应用数据与发布 - Supabase 后端连接 - 通过 Supabase 存储密钥和 API Key - 公开 Web 发布 - Figma 社区发布工作流 ### AI 控制 - Figma Make 模型选择器 - 处理复杂任务的计划模式 - 付费计划支持自定义技能 - 提示词后的 AI 额度消耗可见性 ## 价格 freemium - Starter: $0 — 月 — 免费限制访问 Figma 产品，包含 150 AI 额度/天，每月上限 500 AI 额度。 - Professional Full Seat: $16 — 席位/月 — 付费全功能席位，包含无限文件/项目、团队库、MCP 服务端，以及 3,000 AI 额度/月。 - Organization Full Seat: $55 — 席位/月 — 年度计划，包含无限团队、共享库、集中式管理工具，以及 3,500 AI 额度/月。 - Enterprise Full Seat: $90 — 席位/月 — 年度企业计划，包含高级安全功能、自定义工作区、SCIM 席位管理，以及 4,250 AI 额度/月。 - AI Credits Add-on: Usage-based — 可通过按量计费或订阅方式购买额外的共享 AI 额度。 价格核对日期: 2026-06-16 ## 支持的模型 - Gemini 3 Flash - Gemini 3.1 Pro - Claude Sonnet 4.6 - Claude Opus 4.7 - GPT-5.5 ## 隐私与数据处理 Figma Make 是 Figma AI 的一部分。根据 Figma AI 条款，用户输入和输出均属于客户内容，客户保留其权利。Figma 表示内容训练可通过管理员设置选择关闭；专业版团队默认开启内容训练，而组织版和企业版计划默认关闭。团队在使用专有设计、客户数据或受监管信息前，应审查 AI 设置、隐私条款以及 Supabase/API 密钥的处理方式。 ## 企业功能 - 组织级 AI 功能控制 - 内容训练控制 - 集中式管理工具 - 自定义团队工作区 - 设计系统主题化与 API - SCIM 席位管理 - 访客访问控制 - 密码保护 - 插件与小组件管理 - 满足高级安全需求的 Governance+ 增值方案 ## 替代工具 - Lovable - Bolt.new - v0 - tempo - flutterflow - Replit Agent - base44 - Create Xyz - Cursor - Claude Code ## 资料来源 - [官方网站](https://www.figma.com/make/) - [Figma Make 官方页面](https://www.figma.com/make/) - [Figma 价格方案](https://www.figma.com/pricing/) - [Figma Make 开发者文档简介](https://developers.figma.com/docs/code/intro-to-figma-make/) - [探索 Figma Make 帮助文章](https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make) - [创建与编辑 Figma Make 文件](https://help.figma.com/hc/en-us/articles/31304485164695-Create-and-edit-a-Figma-Make-file) - [在 Figma Make 中选择 AI 模型](https://help.figma.com/hc/en-us/articles/36400680326551-Select-an-AI-model-to-use-in-Figma-Make) - [AI 额度运作机制](https://help.figma.com/hc/en-us/articles/33459875669015-How-AI-credits-work) - [Figma Make AI 额度优化最佳实践](https://help.figma.com/hc/en-us/articles/40097793879191-Best-practices-for-optimizing-AI-credits-in-Figma-Make) - [在 Figma Make 中使用计划模式](https://help.figma.com/hc/en-us/articles/40830441709719-Use-plan-mode-in-Figma-Make) - [Figma Make 自定义技能](https://help.figma.com/hc/en-us/articles/40283639496599-Custom-skills-for-Figma-Make) - [为 Figma Make 应用添加后端](https://help.figma.com/hc/en-us/articles/32640822050199-Add-a-backend-to-a-functional-prototype-or-web-app) - [从 Figma Make 推送到 GitHub](https://help.figma.com/hc/en-us/articles/35463818346647-Push-from-Figma-Make-to-GitHub) - [Figma MCP Make 资源文档](https://developers.figma.com/docs/figma-mcp-server/bringing-make-context-to-your-agent/) - [Figma AI 设置与内容训练](https://help.figma.com/hc/en-us/articles/17725942479127-Manage-AI-settings-and-content-training-for-your-team-or-organization) - [Figma AI 条款](https://www.figma.com/legal/ai-terms/) - [Figma 隐私政策](https://www.figma.com/legal/privacy/) 最近核对日期: 2026-06-16 ## 更新记录 - 2026-06-16: 基于官方 Figma Make 页面、价格方案、帮助中心、开发者文档、AI 条款及隐私政策创建初始目录条目。