基于画布的动画时间轴
从设计画板切换到 Motion 模式,在紧贴画布的时间轴上工作,让动画与其余设计保留在同一个文件中。
Figma Motion 是 Figma 的基于画布的动画工作区,可在与设计、组件和变量相同的文件中创建动效。支持关键帧、预设动画样式、动效复用,以及基于时间的评论和 Dev Mode 交接协作。
Figma Motion 是 Figma 的动画工作区,呈现在设计、组件、变量和团队协作已经所在的同一画布上。发布文章将其描述为一种新的 Motion 模式,时间轴位于设计旁边,因此动画工作可以在同一个文件中完成,而不是在单独的工具里。
该产品旨在让动效更易于创建、审阅和复用。设计师可以为核心属性设置关键帧,应用预设动画样式,使用动画组件和动效变量,并通过基于时间的评论和面向 Dev Mode 的交接与团队协作。页面还将 Figma agent 定位为一种可根据提示生成关键帧、降低动效学习门槛的方式。
从设计画板切换到 Motion 模式,在紧贴画布的时间轴上工作,让动画与其余设计保留在同一个文件中。
通过拖动图层、拖拽播放头,以及分别为位置、缩放、旋转和不透明度设置关键帧来调整时间。自动关键帧会在播放头移动时记录更改。
可先使用淡入、移动和缩放等预设样式快速开始,然后在时间轴上并行叠加或按顺序编排。
使用动画组件和动效变量,让动效模式能够随设计系统一起跨屏幕、协作者和文件复用。
通过提示 Figma agent 直接在时间轴上构建关键帧,帮助刚接触动画的设计师快速上手,也减少有经验用户的重复设置。
在画布上添加基于时间的评论,并使用 Dev Mode 功能,获得更顺畅的评审与交接流程。
直接在与 UI 相同的文件中创建动效,让设计师可以在不切换到单独动画工具的情况下迭代交互。
为某个组件创建一次动效,然后在多个屏幕和文件中复用,让共享 UI 元素保持一致行为。
当你需要把想法转化为动效时,使用 Figma agent 生成起始关键帧或建议。
使用锚定到时间轴特定时刻的评论与队友一起审查时间和行为,然后在交接前完善动画。
Figma Motion 内置于 Figma 的画布体验中,并作为 Motion 测试版的一部分提供。定价页面说明 Figma Motion 测试版可在 Full seats 上使用,因此访问权限取决于你的套餐和测试版可用性。
发布文章说明,你可以将画板切换到 Motion 模式,并在设计旁边的时间轴上工作。它还描述了 Dev Mode 访问和基于时间的评论,用于交接和评审。
页面说明可以对位置、缩放、旋转和不透明度进行关键帧设置,还包括 shader 属性。它还提到了淡入、移动和缩放等预设动画样式。
页面说明,动效与组件、变量和团队一起保留在同一个文件中,并且动画组件和动效变量可以跨文件传递。它还提到自定义动画样式即将推出。
来源没有说明 Motion 当前支持哪些导出格式。它确实提到,即将推出的 3D 变换将导出为 CSS 并通过 MCP 连接,但那是一个单独的后续能力。