Figma Make能用 AI 把你的 Figma 设计图快速变成可点击的交互原型，比如手机应用的界面，能点按钮、切换页面。这篇教程会一步步教你怎么用 Figma Make，即使你没用过 Figma Make，也能轻松上手。

第一步：整理你的设计图

在用 Figma Make 之前，先把你的 Figma 设计文件整理好，让 AI 更容易理解。

1. 用自动布局：

• 打开 Figma，选中设计里的元素（比如按钮、文字），点顶部工具栏的 “自动布局”（Auto Layout，图标是个小方框）。

• 这会让元素排列更整齐，AI 能更好地处理。

• 如果不会设置，Figma 提供 AI 优化功能，点“优化”按钮让它帮你整理。

  

2. 给图层命名：

• 图层是设计里的每个部分（比如一个按钮、一段文字）。

• 在右边图层面板，点图层名字改成清晰的名称，比如“登录按钮”“主标题”，别用默认的“矩形1”“椭圆2”。

• 命名清楚能帮 AI 理解你的设计。

3. 清理多余内容：

• 删除隐藏或没用的图层（右边图层面板里，隐藏图层会有“眼睛”图标被关闭）。

• 这能避免 AI 误读，生成更干净的原型。

4. 用 AI 辅助整理：

• Figma Make 的 AI 可以自动帮你命名图层、添加自动布局。点“AI 优化”试试，省时省力。

第二步：启动 Figma Make

设计整理好后，开始用 Figma Make 把图变成原型。

1. 新建 Make 文件：

• 在 Figma 里，点 “文件” > “新建 Make 文件”，打开一个专门的工作区。

2. 导入设计：

• 回到你的设计文件，选中要变成原型的部分（比如一个页面），按 Ctrl+C 复制。

• 在 Make 文件的提示框里按 Ctrl+V 粘贴。

3. 写设计目标：

• “把这个设计变成商店应用的界面，点‘加入购物车’按钮显示提示。”

• 在提示框输入你的需求，简单描述你想要的效果。

• 写得越具体，AI 生成的结果越准确。

第三步：设置样式和规则

为了让原型更贴合你的设计风格，可以给 AI 提供一些参考。

1. 上传参考图片（可选）：

• 如果有额外的灵感图片，点“附加图像”上传，AI 会参考这些图片。

2. 选择设计样式：

• 点“选择样式库”，选一个设计库（包含字体、颜色、间距等）。

• 如果没有自己的库，Figma 提供默认样式库，选一个用就行。

3. 调整全局样式（可选）：

• Make 会根据样式库生成一个全局 CSS 文件（控制样式的代码）。

• 你可以打开它，改字体、颜色、间距，比如把按钮改成蓝色，文字加大。

4. 添加额外要求：

• “所有按钮要有点击动画。”

• “页面适配手机屏幕。”

• “点‘返回’按钮回到上一页。”

• 在“指南”文本框写下具体要求，比如：

• 这些规则会引导 AI 生成更符合你需求的原型。

第四步：生成原型设置好后，点 “开始构建” 按钮

AI 会根据你的设计、描述和规则生成交互原型。生成时间取决于设计复杂度，通常几分钟。

第五步：测试和调整原型

原型生成后，你可以测试它的功能，并根据需要调整。

1. 测试原型：

• 左边面板会列出 AI 生成的功能（比如“加入购物车”“页面切换”）。

• 在预览区点按钮、滑页面，像用真应用一样测试效果。

2. 查看代码（可选）：

• 点“代码面板”，可以看 AI 生成的代码（HTML/CSS/JavaScript）。

• 如果你懂代码，可以检查或参考。

3. 用提示框改大问题：

• 如果原型有较大问题（比如功能逻辑不对），在提示框输入新指令，比如：“把‘加入购物车’改成跳转到购物车页面。”

• AI 会重新生成。

4. 用点选编辑改细节：

• 用 Point and Edit 工具，直接在预览区点一个元素（比如按钮），改颜色、大小、间距。

• 改动会自动同步到设计和代码，简单高效。

5. 直接改代码（可选）：

• 如果需要精细调整，点一个元素，再点“转到源”，跳转到代码里手动改，比如删掉一个动画。

第六步：预览和分享

原型完成后，你可以检查效果并分享给别人。

1. 检查不同设备效果：

• 在预览界面切换设备尺寸（手机、平板、桌面），看看原型在不同屏幕上的表现。

• 如果不满意，回到提示框或点选编辑调整。

2. 一次处理一个页面：

• 建议每次只导入一个页面，AI 能更专注，生成更快更准。

3. 回滚版本：

• 如果新原型不理想，点“版本历史”，选“恢复到此版本”回到之前的状态。

4. 分享原型：

• 点“共享”按钮，生成链接，发给团队或客户，让他们测试并反馈。

5. 发布原型：

• 点“发布”按钮，生成公开链接，别人可以通过浏览器访问，适合用户测试或展示。

实用建议

• 一次一个页面：避免 AI 混淆，生成更准确。

• 多试提示：如果 AI 没完全理解，换个说法再试。

• 善用社区资源：Figma 社区（figma.com/community）有很多教程和模板，有问题可以去看看。

Figma Make 是一个能让设计快速变成交互原型的工具，适合想快速验证想法的设计师或产品经理。跟着这篇教程，你可以从一张设计图开始，做出一个能点击的原型。