Figma 为什么把时间线放回画布？它把「动效感觉」变成可检查的设计对象

你在评审里说：「这里的动效要更有弹性，进入快一点，停下时再稳一点。」设计师知道你在说什么，开发者却还缺一组可以执行和复核的答案：从哪一帧开始？持续多久？在哪个属性上变化？大家要在第几秒看见什么？

2026 年 6 月 24 日，Figma 发布 Figma Motion，把动效时间线放进原本的设计画布。设计师可以在同一个文件里调整关键帧、预览任意时刻、写带时间点的评论，开发者还能在 Dev Mode 里查看时间轴和动效代码。1

这个改变值得看的地方，不是 Figma 又增加了一个动画工具，而是它把「变化」从一句容易分歧的形容词，变成了一组可以停下来、指着说、再改一次的外部线索。

Figma Motion 的入口仍然在设计文件里。用户切换到 Motion 模式后，时间线出现在画布底部；设计师可以拖动图层调整时机，拖动播放头预览某个时刻，也可以用预设动画快速开始，再改成逐层设置的关键帧。时间线还显示动画总时长、当前时间和播放方式。23

把这些动作拆开，产品实际保存的是下面几类线索：

所以，时间线提供的不是「更完整的动画」，而是让团队有机会讨论同一个时间点、同一个属性和同一个状态变化。

静态界面通常把结果留在屏幕上。动效却把中间过程放进一条时间流里：元素移动过的位置、变化的先后、停顿的长度，播放结束后都可能消失。评审者如果没有另一种记录，就得靠记忆把刚才看到的过程重新拼起来。

西北大学、纽约大学等机构的研究者 Ouxun Jiang 等人在 2026 年发表的开放获取综述中，回顾了 40 个真实动画可视化案例。综述指出，动画适合展示数据或过程如何变化，也能让人看到中间步骤；但动态画面会因为变化太快、同时移动的对象太多、过去的画面快速消失而变得难以理解。研究者还总结了几种补法：留下历史痕迹、突出需要关注的对象、分阶段移动，并允许用户暂停、回放或改变速度。4

这给 Figma Motion 一个更窄、也更可靠的认知解释：时间线把短暂的变化变成了可回看的外部表征。 它没有替设计师完成理解，却让设计师不必只靠脑中的短暂画面来判断变化。

这里的「外部表征」不是说把所有认知工作交给软件。研究综述反而提醒，动画在信息量和观看时间相当时，理解效果常常不优于静态图示；动画让人感觉更容易看懂，也可能让人高估自己的理解。真正有帮助的设计，通常还要提供足够的停顿、较少的同时变化，以及可由观看者控制的回看路径。4

这也是时间线比单纯播放预览更重要的地方。播放预览展示「它动起来是什么样」，时间线则保留「它为什么在这一刻这样动」的证据。

设计评审最难处理的词，往往不是「错」，而是「差不多」。如果团队只看最终播放，大家会围绕整体感觉争论；如果团队能停到某一秒，讨论就可以具体到状态转移。

一个按钮从普通状态变成按下状态，至少有起点、变化过程和终点。关键帧把这些状态放在时间轴上，评审者可以分别检查位置、缩放、旋转和透明度什么时候变化。Figma 官方说明，Motion 支持对这些属性独立设置关键帧，也支持自动记录变化。13

这会改变评审问题。问题不再只是「动得好不好看」，而是「用户先看到哪个变化」「哪个变化应该等前一个完成」「哪个变化只是实现细节」。

动态内容的一个麻烦是，错过就要等下一轮。Figma 的时间线提供当前时间、播放、暂停、缩放和播放方式等控制，设计师可以把播放头放回某个位置，再单独查看这一段。2

这类控制对应研究综述中的一个设计建议：让观看者自行回看、减速或选择关注范围。它降低的是「我刚才到底看见了什么」的记忆成本，不能保证用户因此理解了动效意图。4

Figma Motion 支持把评论绑定到动画中的具体时刻。这样，团队可以说「在 800 毫秒附近，标题和插图同时出现，注意力落点不清楚」，而不是留下「节奏有点乱」这种无法复查的意见。Figma 的帮助文档把这项功能描述为 time-stamped comments，即把反馈联系到动画中的特定时刻。3

不过，时间戳只解决了「在哪里」的问题。评审意见还要补上「用户要完成什么」：是识别页面已经切换，还是等待内容加载完成，还是理解两个元素之间的关系。没有这一步，评论会变成更精确的形容词。

时间线把变化记录下来，却不会自动替团队完成取舍。它至少有四个边界。

第一，记录得越多，越可能重新制造拥挤。 研究综述指出，动态画面同时移动太多对象，会超过人的跟踪能力；设计者应减少同时变化的对象，或把变化分成阶段。Figma 可以把多个图层和属性放进同一时间线，但这不代表所有轨道都应该同时播放。14

第二，参数清楚不等于意图清楚。 关键帧、时长和缓动能告诉团队「发生了什么」，却不能单独说明「为什么这样发生」。Figma 对动效原则的说明把缓动、停顿、节奏和转场视为传达层级与意义的设计工具；设计师仍要把这些参数和用户任务连起来。5

第三，可回看不等于可理解。 用户可以暂停、回放同一段动画，但反复播放也可能增加理解所需的时间。研究综述把交互控制列为补救方式，同时提醒设计者要控制速度、数量和视觉复杂度。4

第四，能交接代码不等于交接了产品行为。 Figma Motion 让开发者查看时间线、缓动和关键帧，并复制 CSS、JSON 或其他实现代码。可是实现仍然需要知道动效被打断时怎么办、用户减少动效时怎么办、网络或内容异常时怎么办。代码能传递参数，评审仍要传递状态、优先级和替代路径。1

另外，Figma 当前把 Motion 标为 open beta，并提示功能可能变化、使用时可能遇到性能问题。设计团队可以把它当作正在形成的工作方式来试用，但不能把当前界面和能力当成永远稳定的交付前提。3

评审一个带动效的方案时，可以用下面五个问题替代「感觉顺不顺」：

这五个问题把评审从「动效好不好看」推向「变化是否可指认、可复查、可交接」。

Figma Motion 的关键设计，是把动效放回设计文件里，并给变化留下时间结构：关键帧保存状态，播放头保存位置，评论保存讨论发生的瞬间，Dev Mode 保存实现参数。它们共同减少了团队必须凭短暂记忆重建变化的部分。12

认知上的价值也因此很具体：动效不再只是播放结束后留下的印象，而可以成为一段被定位、被比较、被修改的证据。研究对动画的提醒同样具体——变化越多、速度越快、回看越困难，界面越可能把理解成本推回给观看者。4

下次评审动效时，先问一句：我们要让用户感知的变化，是否已经被放在一个能停下来核对的地方？ 如果答案是否定的，再漂亮的播放也可能只留下各自不同的记忆。