Figma / V100

功能发布｜Config 2026 发布 Figma Motion

把动画结果与可编辑时间线放在一起，让观众既看到丰富的作品，也理解这些运动可以被直接控制。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 68.08 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>功能发布｜Config 2026 发布 Figma Motion · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#161616}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素设计对象关键帧点时间线提示词协作指针成果

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

快速作品之后，停在一个可编辑动作

开头用不同图形建立动感，标题之后收束到轨迹与时间线。先让一个动作讲清楚，再扩展到卡片、图标和手机界面等不同尺度。

播放头与对象状态必须对应

播放头与对象状态必须对应规则示例

0.00 / 12.00 秒

12–24 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>功能发布｜Config 2026 发布 Figma Motion · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#161616}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="12" data-end="24"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

时间线位于预览下方，播放头推进时对象沿既定轨迹变化。暂停和拖动时立即回到对应状态；关键帧标记、对象和轨道名称保持可对应关系。