Figma 交互原型的关键，是把“触发条件、动作、目标和过渡”分别设清楚。下面用“拾光阅读”移动端流程练习：从课程列表进入详情页，点击收藏切换按钮状态，点击“开始学习”打开确认弹层，再回到列表检查状态是否保留。
组件状态相关内容可先看Figma 组件变体，滚动页面与固定导航可参考Figma 原型滚动。完成后也可在Pixso Figma 专题中继续整理中文交互稿。
1. 准备可测试的页面和状态
先建立三个顶层 Frame：CourseList、CourseDetail、SaveConfirm。列表页放课程卡片，详情页放标题、封面和收藏按钮，确认弹层单独做成一个 Frame 并放在详情页所属页面中。Frame 名称清楚，Prototype 面板选择目标时更容易定位。
收藏按钮做成包含 Default 与 Saved 的组件集，属性名为 State。在列表和详情页分别放入实例。这样收藏交互使用 Change to 切换变体，页面跳转则使用 Navigate to，避免把两类动作混为一谈。
2. 设置 On click → Navigate to
选中列表页课程卡片，在右侧打开 Prototype，拖动节点连接到 CourseDetail。将 Trigger 设为 On click，Action 设为 Navigate to，选择 Smart animate 或 Instant，再设定过渡时长。点击 Present 预览，确认从正确卡片进入详情页。
如果点击后跳错页面，检查连接线终点是否落在目标 Frame；如果动画方向异常，先改为 Instant 验证目标，再恢复过渡。一个对象可以有多个交互，但同一触发下不要叠加互相冲突的 Navigate to。
3. 用 Change to 做收藏切换
进入收藏按钮主组件，切到 Prototype，拖动 Default 变体节点连接到 Saved 变体，将 Action 设为 Change to，Trigger 使用 On click，动画可选 Smart animate。再从 Saved 连接回 Default，形成双向切换。把该组件实例放在详情页，Present 中点击两次确认状态来回变化。
Change to 只适用于同一组件集中的变体。若目标是另一个页面，应改用 Navigate to；若想在当前页面叠加说明，应使用 Open overlay。状态切换不生效时，先检查两个变体是否确实属于同一 Component set。
4. 用 Open overlay 展示确认信息
在详情页选择“开始学习”按钮，拖动节点到 SaveConfirm Frame。Action 选择 Open overlay，设置位置为居中或手动定位，打开“Close when clicking outside”，并按需要增加背景遮罩。确认按钮再连接到课程学习页，取消按钮连接回关闭弹层。
弹层必须是一个 Frame，且位于同一文件中。若 Open overlay 选项不可用，检查目标是否为 Frame；若弹层遮住了按钮，调整位置或开启背景遮罩后再预览。不要用多个复制页面模拟同一个弹窗，否则修改文案会产生维护分叉。
5. 预览与排错
- 从列表点击课程卡片，确认 Navigate to 到详情页。
- 点击收藏，确认 Default 与 Saved 视觉和属性都切换。
- 点击开始学习，确认 Open overlay 出现且可点击外部关闭。
- 返回列表，检查页面之间的状态是否符合预期；需要跨页面保持状态时，明确记录原型限制并用对应变量或页面流程处理。
完成 Figma 原型后，可在 Pixso 中继续编辑交互稿，用中文面板复核节点、触发器和目标；导出评审材料时可参考Figma 导出 PDF。迁移或交接前先保留原始 Frame 名称和组件状态，评审者就能按同一条路径复现每个结果。
交互验收最好由设计师和产品一起完成：设计师检查节点、动画和组件状态，产品按真实任务点击一遍并记录“从哪里来、下一步去哪、返回后状态如何”。如果一个按钮同时承担跳转和状态切换，拆成明确的点击区域或在组件内部处理 Change to，能减少演示时的歧义。
