Figma Motion logo

Figma Motion

认领

Figma Motion 是 Figma 的基于画布的动画工作区,可在与设计、组件和变量相同的文件中创建动效。支持关键帧、预设动画样式、动效复用,以及基于时间的评论和 Dev Mode 交接协作。

Figma Motion preview

什么是 Figma Motion

Figma Motion 是 Figma 的动画工作区,呈现在设计、组件、变量和团队协作已经所在的同一画布上。发布文章将其描述为一种新的 Motion 模式,时间轴位于设计旁边,因此动画工作可以在同一个文件中完成,而不是在单独的工具里。

该产品旨在让动效更易于创建、审阅和复用。设计师可以为核心属性设置关键帧,应用预设动画样式,使用动画组件和动效变量,并通过基于时间的评论和面向 Dev Mode 的交接与团队协作。页面还将 Figma agent 定位为一种可根据提示生成关键帧、降低动效学习门槛的方式。

核心功能

基于画布的动画时间轴

从设计画板切换到 Motion 模式,在紧贴画布的时间轴上工作,让动画与其余设计保留在同一个文件中。

时间轴控制和关键帧

通过拖动图层、拖拽播放头,以及分别为位置、缩放、旋转和不透明度设置关键帧来调整时间。自动关键帧会在播放头移动时记录更改。

预设动画样式

可先使用淡入、移动和缩放等预设样式快速开始,然后在时间轴上并行叠加或按顺序编排。

可复用的动效系统

使用动画组件和动效变量,让动效模式能够随设计系统一起跨屏幕、协作者和文件复用。

Agent 辅助创建

通过提示 Figma agent 直接在时间轴上构建关键帧,帮助刚接触动画的设计师快速上手,也减少有经验用户的重复设置。

评审与交接支持

在画布上添加基于时间的评论,并使用 Dev Mode 功能,获得更顺畅的评审与交接流程。

常见用例

  • 为产品界面制作动画

    直接在与 UI 相同的文件中创建动效,让设计师可以在不切换到单独动画工具的情况下迭代交互。

  • 构建设计系统动效复用

    为某个组件创建一次动效,然后在多个屏幕和文件中复用,让共享 UI 元素保持一致行为。

  • 开始接触动效设计

    当你需要把想法转化为动效时,使用 Figma agent 生成起始关键帧或建议。

  • 协作式动效评审

    使用锚定到时间轴特定时刻的评论与队友一起审查时间和行为,然后在交接前完善动画。

Pros and Cons

Pros

  • 将动效保留在与设计工作相同的 Figma 文件中,减少工具切换。
  • 支持带关键帧、拖拽播放头和自动关键帧的直接时间轴编辑。
  • 让团队通过动画组件和动效变量复用动效。
  • 包含基于时间的评论和 Dev Mode 支持,便于评审与交接。
  • 使用 Figma agent 帮助从提示生成动效,并协助经验较少的用户。

Cons

  • 公开来源是发布文章和信息覆盖不完整的产品页面,因此这里没有记录某些工作流细节。
  • 页面说明自定义动画样式即将推出,这表明部分功能尚未可用。
  • 来源没有清楚说明 Motion 本身的导出或输出选项。

FAQ

如何获取 Figma Motion 的使用权限?

Figma Motion 内置于 Figma 的画布体验中,并作为 Motion 测试版的一部分提供。定价页面说明 Figma Motion 测试版可在 Full seats 上使用,因此访问权限取决于你的套餐和测试版可用性。

Motion 如何融入 Figma 工作流?

发布文章说明,你可以将画板切换到 Motion 模式,并在设计旁边的时间轴上工作。它还描述了 Dev Mode 访问和基于时间的评论,用于交接和评审。

在 Figma Motion 中可以为哪些内容添加动画?

页面说明可以对位置、缩放、旋转和不透明度进行关键帧设置,还包括 shader 属性。它还提到了淡入、移动和缩放等预设动画样式。

团队可以在 Motion 中构建可复用的动效系统吗?

页面说明,动效与组件、变量和团队一起保留在同一个文件中,并且动画组件和动效变量可以跨文件传递。它还提到自定义动画样式即将推出。

Figma Motion 支持哪些输出?

来源没有说明 Motion 当前支持哪些导出格式。它确实提到,即将推出的 3D 变换将导出为 CSS 并通过 MCP 连接,但那是一个单独的后续能力。

Quick Facts

类别
设计工具
产品
Figma Motion
来源域名
figma.com
可用性
Full seats 上的测试版
主要用户
设计师、动效设计师和产品团队
工作流
Figma 画布内的动画时间轴