Figma Make 用法手册(基础/模板/带入设计库风格/加 Guidelines/开源组件/加后端/发布 的操作与何时用)
Will 的 Figma Make(Figma 内置的「描述需求→AI 生成可运行原型/网页」工具)用法笔记重组,面向做 AI 产品、想快速出原型的 PM。覆盖七大功能模块,每个给「怎么用 + Why + 何时用 + 坑」:①基础(三栏界面=对话/预览/代码;四种喂料=打字/贴 Figma 设计/传图/点击预览定点改)。②写 Prompt 与喂附件的最佳实践(用「用户能力清单」定义产品而非给大类名词;先布局后功能;分步迭代;Auto Layout 让 AI 读懂结构;常见版式更容易一次成功;桌面端更稳;别在 prompt 里写密钥)。③模板 template(把定好规范的文件发布成模板,团队复制 remix;guidelines 锁可改范围;创建/更新/取消发布/使用;约束提示词四例)。④把 Figma 设计库风格带入(导出 Library 为 CSS→在 Make 引用→UI 自动套公司配色字体)。⑤加 Guidelines.md(给 AI 立规矩,通用规则 + 设计系统规则 + 组件级规则;少而精胜过堆上下文)。⑥用代码文件喂料(.tsx/.csv/.json/.html 等四类;真数据生成数据看板;复用 shadcn 等开源组件;真文案排版)+ 一键全站重构成 shadcn/ui 的强约束 prompt。⑦加后端(用一句话接 Supabase,做登录/存数据/密钥安全保存;判定口诀「这东西需要被记住吗」)。⑧发布(一键得 figma.site 网址、绑自定义域名走 TXT+CNAME、传 web 字体、SEO/密码保护等高级项)+ 推 GitHub/下载代码。与 [[ai-ux-experience-design]] 分工:那篇是「用 AI 做体验设计的流程方法论」,本篇是「Figma Make 这一个工具的功能操作手册」;与 [[ai-vibecoding-design-process]] 的 vibecoding 心法互为表里。读者是非技术 PM,术语行内括号解释,每节带 Why 与何时用。