Figma Make 用法手册(基础/模板/带入设计库风格/加 Guidelines/开源组件/加后端/发布的操作与何时用)

Figma Make 是什么(给 PM 的一句话):Figma 里内置的一个 AI 工具——你用大白话描述要做什么,它直接生成一个能点、能跑、能分享的原型或网页应用(prototype / web app),不用写代码。可以把它理解成"会编程的 ChatGPT,但产出物不是文字,是一个可交互的产品 demo"。

它和你印象里的 Figma(画静态稿)最大的区别:Figma Make 的产物是活的——按钮真能点、表单真能填、数据真能存(接上后端后),甚至能发布成一个真实网址给别人访问。对 PM 来说,它把"我想验证这个想法值不值得做"的成本从"排期等研发出 demo"压到"自己半小时聊出来"。

本篇是功能操作手册:按七个模块拆,每个模块回答三件事——怎么操作 / 为什么这么做(Why) / 什么时候该用它。不讲"AI 做设计的整体流程方法论"(那是 AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式的提示词与流程)),也不展开 vibecoding 的心态层(那是 AI 驱动产品设计 / Vibe Coding 流程(一句话需求→拷问→PRD→DRD+编程提示词→Figma Make demo→发布→视觉迭代)),只聚焦 Figma Make 这一个工具本身怎么用顺。

七个模块: 一、基础(界面三栏 + 四种喂料方式) 二、写好 Prompt 与喂附件(决定生成质量的核心功夫) 三、模板 Template(把规范沉淀成团队可复用的起点) 四、带入 Figma 设计库风格(让 AI 生成的 UI 套你公司的视觉) 五、加 Guidelines(给 AI 立长期规矩) 六、用代码/数据文件喂料 + 开源组件(让原型接近真实产品) 七、加后端 + 发布上线(从"能演示"到"真能用、真能访问")

一、基础:界面三栏 + 四种喂料方式

1.1 界面就三块,先认清分工

Figma Make 的工作区是三栏,搞清楚各自干什么,后面所有操作都顺:

区域	干什么	类比
AI Chat(对话区)	你在这里打字描述需求,AI 据此生成或修改应用	跟一个程序员同事对话下需求
Preview(预览区)	实时看生成出来的应用真实运行的样子,能点能交互	产品的"活 demo"
Code(代码区)	直接看/改 AI 生成的代码	引擎盖底下(PM 一般不碰,但出问题时能让 AI 解释)

Why 要先认清这个:很多人以为 Figma Make 像聊天机器人只有对话框,其实"预览"才是你判断对错的地方,"代码"是高级动作(改 guidelines、看 plan.md)的入口。三栏联动才是它和纯文字 AI 的本质差别。

1.2 四种把"想法"喂给 AI 的方式

不是只能打字。喂料方式越贴近你脑子里的画面,AI 越不容易猜错:

打字描述(Generate with text):在对话区写需求,逐步加细节,AI 逐步搭出完整应用。何时用:从零起步、或迭代调整时的主力方式。
粘贴 Figma 设计(Paste a design):把 Figma 里现成的 frames(画框)或 components(组件)复制进对话区。Why:直接给 AI 一个结构化的设计骨架,比口述快得多。何时用:你已经在 Figma 画过稿,想让它"跑起来"。
上传/粘贴图片(Use images):点 + → Upload image,或直接把截图/草图/参考图粘进对话区,AI 照图生成界面。何时用:你只有一张参考图或手绘草图,还没正经画稿。坑:图片只能帮 AI"靠近"你的预期,不等于精准还原——比如图里的精确颜色值,模型不一定读得准。
点击预览定点改(Point to edit):用 Edit 工具在预览里直接点中某个 UI 元素,然后说"把这块的间距/颜色/文案改成…"。Why:省去"那个第二行右边的蓝色按钮"这种费劲的文字定位。何时用:微调具体某一块,而不是大改。

还有个反向能力:把预览复制成 design layers(Copy design layers)粘回 Figma Design 里继续精修。用于 AI 出了大致结构、你想回到 Figma 手动打磨视觉时。

二、写好 Prompt 与喂附件(决定生成质量的核心功夫)

这是整套工具里最值钱的一节——同样的 Figma Make,会写 prompt 的人和不会的人产出差一个量级。

2.1 写 Prompt 的六条

① 用"用户能力清单"定义产品,而不是给一个大类名词。 这是最核心的一条。差 prompt:"做一个我能记笔记的应用"——"记笔记应用"范围太大(纯文本记事本?Markdown 编辑器?知识库?待办混合?),AI 只能瞎猜。好 prompt 是把"用户能做什么"逐条列出来:

做一个记笔记应用。我希望它可以:
1. 给文件命名。
2. 添加和编辑文本。
3. 设置文本格式,比如加粗、斜体、删除线。
4. 给文字加链接。
5. 以 markdown 格式保存文件。

Why:一句"做个 X 应用"是给了 AI 一个名词;一份能力清单是给了 AI 一份验收标准。

② 给例子(Use examples)。 例子可以是设计稿、文字说明或图片,作用是把你脑子里的模糊预期转成 AI 能参照的目标。坑:同上,图片帮你"靠近"不"精准还原"。

③ 先布局,后功能(Layout first, functionality after)。 一次别让 AI 同时搞定布局+交互+功能+逻辑四件事。先把页面结构和视觉框架搭对,再逐步补功能。否则它第一轮"全都想做",每块都不够准。

④ 分步骤推进(Work in steps)。 别一上来把最终完整需求一股脑全扔。先给高层目标,再逐步加细节、模块、状态、交互。

⑤ 对结果持续迭代(Iterate)。 别指望复杂产品一轮就对。重点不是"它第一次错了",而是你有没有明确指出错在哪、你要的正确结果是什么——这才是高质量迭代。

⑥ 别在 prompt 里写敏感信息(密钥)。

✅ "我想向一个私有 API 发请求,请加一个输入框让我把 key 粘进去。"
⛔ "用这个 key 发请求:11qYAYKxCrf…"——密钥会暴露在对话文本里。正确做法见第七节(用 Supabase secret 安全存)。

2.2 喂附件的最佳实践

设计稿尽量用 Auto Layout。 Auto Layout(Figma 的自动布局,带方向/间距/对齐/伸缩规则)不是纯视觉摆放,它携带结构化布局信息,AI 更容易转成代码。手摆的元素 AI 读起来吃力。
常见版式更容易一次成功(one-shot)。 gallery、表单页、仪表盘、单主框架 app 这些"模型见得多"的结构,一次就能生成得像样;特别新奇/实验性的版式缺乏稳定参照,得多轮修正。
优先做桌面端、全屏友好的结果。 这是 Figma Make 当前的能力边界——上来就追复杂移动端细节更容易翻车。
单附件:说清是"1:1 还原"还是"只借风格"。一句"参考这个附件"太模糊(既可能照搬结构也可能只借风格)。想接近 1:1,光传图不够,要把每个区块(header/卡片结构/间距/CTA 位置)的要求拆开说细。
多附件:别为省事一次塞所有页面。参考过载会让 AI 不知道以谁为主。追求 1:1 时每次只给一两张、按页逐屏推进(系统会记住前面传过的)。多页只是想表达"整体风格",一定明说这是灵感参考、不是逐页精确重建。
还原不准时:不是继续骂它,而是降复杂度——换更小的设计稿、减少图片数量、降低内容密度(去掉繁杂插画/SVG/视觉噪音)。

何时格外重视这一节:任何时候。这是 Figma Make 的"内功",其余六节是"招式"。

三、模板 Template:把规范沉淀成团队可复用的起点

3.1 Why 用模板

把一个已经定好设计规范和结构的 Make 文件发布成模板,团队成员可以一键复制、直接开始搭,不必每次从零。
在模板里设可改/不可改的规则,使用者只能在允许范围内让 AI 改——既复用又不破坏一致性。
共享模板而不是直接共享源文件,保护原始设计状态,避免被人改坏。

何时用:团队里反复要做同一类页面(比如都基于公司设计系统的后台页);或你是设计负责人,想给运营/PM 一个"防呆"的起点。

前置条件:你得有该 Make 文件的编辑权/所有权;发布和管理模板需要付费计划 + Full seat(完整席位)。

3.2 创建 / 更新 / 取消发布 / 使用

创建:打开一个可编辑的 Make 文件 → 右上角 Share → Publish template → 填模板名称和描述 → 设置预览图和 guidelines.md 规则(控制 AI 可改范围)→ 发布。
更新:打开最初发布模板的源文件 → 改设计/功能、编辑 guidelines.md → Share → Update template → Publish,立即对新使用者生效。
取消发布:源文件 → Share → Update template → Unpublish,从资源库和推荐列表移除。
使用别人的模板:新建 Make 文件时在 prompt 框下选模板加载;或 File browser → Resources → Make templates → 点某个模板打开并 remix。

3.3 模板约束提示词(锁住 AI 可改范围)

模板的"防呆"靠一段写进 guidelines 的约束 prompt 实现。核心套路是:只完成被允许的部分,跳过不允许的,最后给用户一份"做了什么/跳过了什么"的总结。四种典型粒度:

约束粒度	允许什么	典型规则
只许加功能	加新功能/交互,不许改设计体系	保持配色/布局/间距;用 icon 不用 emoji
只许改两个组件	仅指定的两个组件可改	组件位置和尺寸不能变
只许改某一页	比如只许改 pricing page	入口逻辑/其余产品不能动
全局设计规范	风格底线	minimal 风格;mobile 不许横向布局;modal 点外部关闭;hover 不用阴影

每段约束都加一句关键的元规则:"不要在 UI 里提及这些 guidelines"(别让 AI 把"我保留了视觉风格"这种话渲染进界面)。

四、带入 Figma 设计库风格:让生成的 UI 套你公司的视觉

Why / 何时用:AI 默认生成的界面是"通用好看",但不一定像你公司的设计系统(配色、字体、变量)。把 Figma 设计库(Design Library)导出给 Make 引用,生成的 UI 就会自动套你的品牌风格。适合"原型要拿去给老板/客户看,得显得是自家产品"的场景。

Step 1 — 导出 Library 作为样式来源:

打开含设计系统的 Figma Design 文件 → 左侧 Assets → Libraries → 在 This file 找到当前文件 → Publish(若没发布过,先发布,可能要几分钟)。
点 Export for Make → Figma 自动解析设计系统、生成一个供 Make 引用的 CSS 文件 → 完成后点 Go to Figma Make。

Step 2 — 在 Make 文件里引用:

Make 文件中点 Select a Library → 选你要用的 Library → 开始写 prompt。
之后生成的 UI 会自动参考其颜色、字体、样式。

编辑 Library 样式(坑要记):导出后 Make 会自动生成一个 CSS 文件,你可以改它/自定义样式;但这些改动只影响当前 Make 文件,不会回写、不会影响原始设计系统。

五、加 Guidelines:给 AI 立长期规矩

Why / 何时用:Prompt 是"这一次的需求",Guidelines 是"每一次都要遵守的规矩"。当你发现总要反复叮嘱 AI 同一件事(比如"字号别乱""用 icon 别用 emoji"),就把它写进 guidelines.md 一劳永逸。

操作:顶部点 Code → 左侧文件浏览器点 guidelines → guidelines.md,在里面写规则。

核心坑(反直觉):上下文不是越多越好。规则堆太多会让大模型困惑。只写最关键、最必要的那几条。

三个层次的规则:

通用规则(General):跟设计无关的工程规则。例:必要时才用绝对定位、默认用 flexbox/grid 保持响应式;边写边重构保持代码干净;控制文件体积、把辅助函数拆到独立文件。
设计系统规则(Design system):让生成结果像你公司的设计系统。例:基础字号 14px;日期固定"Jun 10"格式;底部工具栏最多 4 项;选项 ≤2 个就别用下拉框;Chips 至少成组 3 个。
组件级规则(Component-specific):为单个组件单独建文件(右键 guidelines → Create new file),写该组件的详细用法。例如 Button:三种变体(Primary/Neutral/Subtle)+ ButtonDanger 用于删除等破坏性操作;一个页面尽量只放一个 Primary;文案简短不换行、用句首大写、保留 :focus 焦点样式。

关联:第三节的"模板约束 prompt"本质就是写进 guidelines 的特殊规则(锁可改范围);本节是更宽的"立规矩"。

六、用代码/数据文件喂料 + 开源组件:让原型接近真实产品

6.1 四类可上传的文本文件

Figma Make 能吃四类文本文件,单文件上限 1MB(超了要拆分/压缩):

类别	格式	给 AI 提供什么
代码文件	`.tsx` `.js` `.ts` `.jsx`	组件结构/前端逻辑,让 AI 在现有组件上扩展、重构
标记与样式	`.html` `.css` `.md` `.svg`	网页结构/样式/文档,把静态网页转成模块化交互界面
数据文件	`.csv` `.json`	真实数据,自动生成列表/表格/数据面板
纯文本	`.txt`	真实文案/FAQ/营销内容,让排版反映真实长度

6.2 五个常见用法(每个 = 一个 Why)

用真实数据生成数据看板:上传 Excel 导出的 .csv 或接口返回的 .json,AI 读字段结构生成对应表格/排行榜/图表。Why:原型不再是假数据,更接近真实产品。
根据 API 响应生成界面:把接口示例存成 .json 上传,生成用户列表/资料卡/详情页,结构与真实系统一致。
复用现成组件:上传开源 React 组件(.tsx/.jsx)当基础件,让 AI 在它之上搭新页,而不是从零画。
用真实文案排版:把产品介绍/FAQ/营销文案整理成 .txt/.md 上传,自动生成 Hero/Features/FAQ/CTA 区。Why:用真文案才看得出排版合不合理(占位 Lorem ipsum 看不出)。
把静态网页变交互界面:上传现成模板的 .html+.css,AI 拆成可复用组件、优化布局、加交互,从静态页升级成 Web App 原型。

6.3 用开源组件优化 UI(shadcn/ui 为主力)

shadcn/ui 是开源、设计精美、适合 B 端后台的 UI 组件库,是 AI coding / vibecoding 里生成 UI 的默认选择之一(同类还有 Flowbite、MUI、Tailwind Plus)。

何时用:你嫌 AI 默认生成的界面"不够专业/不统一",想一键把全站换成一套成熟规范的组件风格。

关键技巧——强约束的"全站重构"prompt:让 AI 把整个项目的原生 HTML 元素逐一替换成 shadcn 对应组件(button→Button、input→Input、modal→Dialog、table→Table…),并立几条硬规矩:

只改 UI 层和样式,完全保留业务逻辑、状态、数据结构、交互、路由、文案——不许删功能、不许简化、不许重写产品逻辑。
贴近 shadcn 视觉规范:中性背景、克制边框、rounded-md/lg 圆角、均衡间距、一致排版层级、弱化次级文本。
重构每一个页面,不只当前文件;缺对应组件就用最接近的 shadcn 模式适配,别留旧 HTML 样式。
(严格版)直接输出可运行的完整代码改动,不要解释、不要给计划。

坑:这种"全量重构"是大动作,务必在 prompt 里强调"保留所有现有功能",否则容易在重构样式时把逻辑也改坏。

七、加后端 + 发布上线:从"能演示"到"真能用、真能访问"

7.1 加后端(Supabase):让原型有记忆

判定口诀(最重要):做的时候只问一句——"这个东西需要被记住吗?" 需要(用户信息/任务/登录状态/表单内容/API key)→ 就该接后端(backend)。

关键概念(给非技术 PM):

Backend(后端):看不见的那层系统,负责存数据、记用户、登录验证、保存密钥。
Supabase:Figma Make 目前接入的后端服务平台(帮你快速搭应用后台的网站),提供数据库、用户登录、存储、密钥管理。Figma Make 自己不直接做后端,是通过 Supabase 提供能力。

最简单的接法——用对话直接加:

在 AI Chat 里直接说,比如 Add user sign-in / Add authentication to my app / Call OpenAI API。
弹出提示让你连 Supabase → 点 Connect → 浏览器打开 Supabase 页(先登录/注册 + 授权 Figma)。
按提示创建/选择 organization(组织,项目要归属在组织下) → Authorize Figma。
回到 Make,选已有项目或新建(填 Project name / Region 选离用户近的 / Database password,注意这是数据库密码不是账号密码)→ Create project。
回 AI Chat 继续描述要的功能(收集反馈的表单、能存任务的待办、有登录的打卡工具…)。

安全保存密钥/API Key(对应第二节"别在 prompt 写密钥"):

先确保已接好 backend(密钥存在 Supabase 里,没后端就没安全存储位)。
在 chat 里明确说要 create a secret,例如"Make a weather app and create a secret for the API key."
界面出现 Create a secret 输入框 → 把 key 填进去 → Create secret。这才是官方允许的安全入口,绝不要在 prompt 文本里写 Use my key: sk-xxx。

管理后端:Make 文件右上角 Make settings → 左侧 Integrations → Supabase → 找到当前项目那行点省略号 → Manage project(后台总控)/ Manage organization(团队空间)/ Manage secrets(钥匙管理)。

7.2 把代码带走:推 GitHub / 下载 ZIP

Why / 何时用:原型要交给工程师在正经开发流程里接着做、或想要版本管理能回退时。

下载代码:Code Editor → Download code → 得到 ZIP → 在 VS Code/IDE 打开。坑:下载后改的代码不会自动同步回 Figma Make(单向)。
推 GitHub:Make settings → GitHub → Connect GitHub → 选账号/组织 → 选授权"所有仓库"还是"指定仓库"(对功能没实际影响但 GitHub 必须选;Figma Make 只访问它自己创建的仓库)→ Install & Authorize。之后每次更新都能同步。

进阶配套动作(来自高级工作流):

让 AI 解释代码:对话里输入 Explain the code of this app to me. Start at a high level.,AI 会讲项目结构、核心逻辑、各文件作用。设计师看不懂代码时用。

改前先规划(plan.md):复杂应用直接改代码易出错。先让它只生成不修改:Don't make any changes... Create a file called plan.md... write down a plan;在 Code Editor 里审/改这份 plan;再让它 Use the latest version of the plan in plan.md to make changes。

支持多用户:一句 prompt 让它用 Supabase 实现注册/登录/每用户独立数据存储。

7.3 发布上线

一键发布成网址:打开做好的文件 → 右上角 Publish → 填 Title(显示在浏览器标签/搜索/分享卡片)→ Publish,得到一个网址(如 lunar-gala-73178537.figma.site)+ 发布状态 + 时间。坑:发布后继续改不会自动同步到网站,要再次 Publish。不想给人看了:Make settings → Unpublish(以后重发网址不变)。

绑定自定义域名(让网址变成 www.yourproduct.com):

先买域名(Namecheap/GoDaddy/阿里云/腾讯云/Cloudflare)+ 先发布网站(域名只能绑在已发布的站上)。
Figma 左侧 Settings → Site → Domains → Add connected domain → 输入域名。
官方推荐 root→www 跳转(SEO 更稳)。
Figma 给你两条 DNS 记录(一条 TXT 验证所有权,一条 CNAME 指向 cname.figma.site),复制到你域名平台的 DNS 设置里 → 回 Figma 点 Refresh,成功显示 Connected。
等 HTTPS 证书生效(5–30 分钟)。
三个 90% 会踩的坑:DNS 没生效(传播要 5 分钟–1 小时);CNAME 写错(必须完全等于 cname.figma.site);Cloudflare 用户必须把 Proxy 关成 DNS only。

为什么要折腾 DNS:DNS 是"互联网的通讯录"——人记域名,电脑访问的是目标地址。TXT 记录证明"这域名归你/你授权 Figma 用",CNAME 记录告诉全网"访问这域名时去找 Figma 的服务"。配好了别人输你的域名才能被带到你的站,并自动配 HTTPS。

上传 Web 字体(易漏的坑):如果你在 Make 里用了电脑本地字体,发布前必须上传字体文件,否则网站会变默认字体(Figma 编辑器能用你电脑的字体,但访客的浏览器看不到)。Publish 若提示 Missing fonts → Settings → Fonts → Upload 上传 .woff/.woff2 → 重新 Publish。

发布时的高级设置(决定怎么被看到/统计/谁能看):Title、Meta Description(搜索摘要)、网站语言、Google Analytics、No Index(不让搜索引擎收录)、Favicon(标签小图标)、访问权限 Public/Internal(企业版)、密码保护(适合 demo/内测/客户展示)、社交分享图(建议 1200×630)、自定义代码(往 head/body 插分析/客服/追踪脚本)。

速查:七模块用途一览

模块	一句话用途	何时用
基础	三栏界面 + 四种喂料(打字/贴稿/传图/点改)	任何时候,入门第一步
Prompt & 附件	决定生成质量的内功	永远重视
模板 Template	把规范沉淀成团队可复用起点	反复做同类页 / 给非设计同事防呆起点
带入设计库风格	生成 UI 套公司视觉	原型要显得是自家产品
Guidelines	给 AI 立长期规矩	总要反复叮嘱同一件事时
代码/数据文件 + 开源组件	让原型接近真实产品	要真数据/真文案/专业组件库时
加后端 + 发布	从"能演示"到"真能用、能访问"	"这东西需要被记住吗?"答需要 / 要分享上线时

与姐妹篇的分工

本篇 = Figma Make 这一个工具的功能操作手册(怎么点、怎么写 prompt、怎么接后端发布)。
AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式的提示词与流程) = 用 AI 做体验设计的整体流程方法论(Discover→Define→Ideate→Experience Design→Deliver 这条链路里 AI 怎么介入),Figma Make 只是其中"Experience Design / 出原型"环节的工具之一。
AI 驱动产品设计 / Vibe Coding 流程(一句话需求→拷问→PRD→DRD+编程提示词→Figma Make demo→发布→视觉迭代) = vibecoding 心法("用自然语言指挥 AI 出可运行产物"的心态与流程),本篇第二、六、七节的"分步迭代""改前先规划 plan.md""强约束重构 prompt"都是 vibecoding 心法在 Figma Make 上的具体落地。