在 Figma 的 Prototype 面板选中按钮，连接到目标 Frame，再设置触发方式和动作，就能做出可点击原型。页面跳转用 Navigate to，弹窗用 Open overlay，返回用 Back。先跑通“进入—操作—返回”，再加 Smart Animate；否则动画再细致，也可能掩盖一条走不通的流程。
可先查看Figma中文教程与功能专题建立基础认知，再通过Figma替代软件与迁移方案比较文件兼容、协作和交付。
Figma交互设计的基本模型
交互原型由起始状态、触发方式、目标状态和转场效果组成。开始制作前，应先画清用户任务和页面关系，再决定哪些变化用页面跳转、覆盖层、组件状态或变量表达。
先选对动作：跳页面、开弹窗还是改状态
同一个“点击”可以改变页面、叠加内容，也可以只改变组件。先确定变化范围，再选动作，能避免为每次点击复制一整张页面。
| 用户动作 | 推荐表达 | 必须补齐的路径 |
|---|---|---|
| 列表进入详情 | Navigate to 目标 Frame | 从详情返回来路，而不是固定回首页 |
| 打开筛选面板 | Open overlay；底层列表保持在场 | 取消、关闭、应用筛选后的结果 |
| 按钮由未收藏变为已收藏 | 组件状态切换；需要记住选择时再设计变量 | 再次点击取消，以及操作失败的反馈 |
| 进入下一个填写步骤 | 跳转到下一个明确的页面或状态 | 返回时保留哪些已填内容 |
例如做一条“查看订单—打开筛选—返回列表”流程，先准备订单列表、订单详情和筛选面板三个 Frame；不要把筛选面板当成与列表无关的新页面。
从静态界面到可点击原型
确认Frame名称和主要流程起点
在Prototype模式连接按钮与目标页面
选择点击、悬停、拖拽或延时等触发方式
设置跳转、打开覆盖层、返回或切换状态
指定起始页面并进入预览测试
用四次预览把第一条流程跑通
- 把列表设为流程起点，在列表的订单行上添加 On click → Navigate to → 订单详情。点击区域应覆盖用户实际会点的位置。
- 在详情页配置返回动作 Back。分别从不同入口进入详情，检查返回是否符合来路。
- 把筛选按钮连接到独立的筛选面板 Frame，选择 Open overlay；为关闭按钮添加 Close overlay。是否允许点击遮罩关闭，要与任务规则一致。
- 先检查取消不改变结果、应用后能看见当前条件。只展示视觉切换时，用准备好的筛选结果页面；需要动态记忆多项条件时，再使用变量和条件逻辑。
每补一条连接就预览一次。最后从分享链接重新进入，检查接收者看到的起点、可操作区域和返回路径；只在编辑画布里检查连线，容易遗漏实际演示中的遮挡。
动效与Smart Animate怎么用
Smart Animate适合处理两个状态之间同名图层的位置、尺寸、透明度等变化。为了得到稳定结果，需要保持图层命名和层级关系一致；动效只用于解释状态变化，不应遮盖信息或拖慢主要任务。
Smart Animate 不生效时，按层级排查
| 看到的现象 | 先检查什么 | 怎么调整 |
|---|---|---|
| 元素突然消失再出现 | 前后状态的图层名称和父子层级是否匹配 | 保留同一元素的名称与结构，只修改需要变化的属性 |
| 整个卡片移动，内部元素没有按预期变化 | 连线目标及匹配图层是否选对 | 先用一个矩形验证位置变化，再逐步增加内部层级 |
| 形状或阴影没有平滑过渡 | 变化属性是否属于当前支持范围 | 用溶解等转场表达，不强行把所有视觉变化交给 Smart Animate |
| 打开弹窗时没有预期的智能动画 | 动作是否为 Open overlay | 覆盖层的出现用该动作支持的转场；面板内部状态变化再单独配置 |
Figma 的Smart Animate 官方说明说明了同名图层与层级匹配、支持属性及覆盖层限制。需要连续性的是同一个对象的变化，单纯更换内容通常不必做复杂运动。
复杂交互的能力边界
条件、变量和组件属性可以表达部分状态逻辑，但复杂数据、计算、权限和跨页面业务流程仍需验证可维护性。若原型需要中继器式数据或大量条件链，应比较更专门的高保真原型工具。
交付时可在页面旁写一张四行交互说明：触发对象、发生条件、结果、返回方式。比如“未选择筛选条件时，应用按钮不可提交，并显示需要补选的项”。在墨刀原型中演示同一流程时，也应复用这份规则，让评审围绕任务结果展开。
预览与评审检查清单
每条主流程都有开始和结束状态
返回、关闭和异常路径可以操作
文字、点击区域和动画时长清晰
移动端滚动和固定元素表现正常
分享权限与评论范围符合项目要求
关于Figma交互设计的常见问题
为什么预览时点击按钮没有跳转？
先确认连线从实际点击的图层出发、目标是正确的 Frame，触发方式也设置为 On click。再检查是否有透明图层遮挡按钮，以及预览是否从预期流程起点开始。
页面跳转和弹窗应该怎么选？
进入独立页面使用 Navigate to；保留当前页面并叠加确认框、菜单或抽屉时使用 Open overlay，同时设置关闭方式。需要回到来路时使用 Back，避免把所有返回按钮固定连到同一页面。
延伸阅读：Figma是什么软件？功能、适用场景与工具选择。
