展开本页目录
开始前准备什么
- Figma Design付费计划、can edit权限、AI额度；自动连线不生成业务后端
- 先下载练习包并保留原件；作者原生或生成参考不等于目标产品已运行。
- 整理四个Frame
- 选择起始画面
- 描述用户动作
- 逐个试主按钮
- 补上返回和取消
- 检查无出口画面
- 交付原型说明
下载本篇练习包
具体练习输入、原生参考、设置记录与七步操作说明。
查看练习说明与素材身份
区分官方示例、作者输入与未实际运行的产品步骤。
1. 整理四个Frame
准备列表、详情、确认、完成四个Frame，按钮名称与实际动作一致。原型练习文件是作者原创设计，不是Figma界面截图。
2. 选择起始画面
在Figma选中起始Frame，进入Prototype区域，使用Make interactions with AI。此功能需要可编辑权限及符合条件的付费计划。
3. 描述用户动作
给出“列表进入详情，详情继续确认，确认后完成”的明确目标。先让AI连接现有画面，不要求它凭空实现支付或后端。
4. 逐个试主按钮
从起点播放，点击每个主按钮，确认落到正确Frame。连接错时在Prototype面板改目标和触发方式。
5. 补上返回和取消
详情返回列表、确认取消回详情、完成返回列表分别设置。返回必须保留合理上下文，不要把所有返回都连回首页。
6. 检查无出口画面
沿每一条分支走一遍，包括取消和关闭。页面展示作者原型的真实页面图；AI建立连接后仍需在你的Figma中逐项测试。
7. 交付原型说明
分享原型前标注哪些只是界面跳转、哪些需要应用实现。保存连接清单，交给开发者时注明未实现的后端行为。
怎样确认已经完成
- 返回回到来源页，取消不进入成功页，无意外死路
- 保存含可编辑交互连线的Figma原型与错误连线台账，并保留可继续修改的源版本。
- 按步骤中的局部与时间点回看，未通过的位置保留原始输入重新处理。
常见问题
Figma AI怎么自动给四个页面连交互？
让AI先连接已有Frame，再从起点逐个点击主按钮。自动连接不能证明业务逻辑、支付或数据保存已经实现。
自动原型的返回按钮连错页怎么修？
手工给详情、确认和完成页补返回或取消连接，再逐分支播放，避免用户走进没有出口的画面。
配图与练习文件是否代表平台已经执行成功？
官方示例在图注明确来源；其他图片和文件按标注属于作者原生输入、实际测量图或imagegen目标参考。本页未在你的授权账号中运行该产品，练习结果需在原产品保存。