Figma Motion Tutorial: Everything You Need to Know
Figma Motion 基础介绍
Figma Motion 的启动与基本操作
- Figma Motion 在 Config 2026 上首次发布，用户只需打开新设计文件并点击底部的 motion 即可进入。
- 提供了一个下载链接以便用户跟随演示，展示如何在设计面板中添加动画。
- 动画部分包括位置、缩放、旋转、大小和不透明度等基本选项，用户可以轻松设置动画效果。
时间线结构与控制
- 用户可以通过右侧的控件缩放时间线，以便处理复杂的动画细节。
- 当前时间显示在左侧，可以选择以毫秒或秒为单位查看，并设定循环播放或单次播放模式。
- 动画持续时间可视化，用户可以拖动手柄调整动画速度。
创建复杂动画
添加多重动画效果
- 用户可以在同一对象上叠加多个动画，例如同时添加旋转和位移效果。
- Figma Motion 提供了丰富的预设动画库，鼓励用户探索不同的动态效果。
自定义关键帧
- 关键帧允许用户自定义从状态 A 到状态 B 的过渡，软件会自动平滑连接这两个状态。
- 用户通过设置关键帧来锁定特定时刻的位置，从而实现更精确的控制。
手动与自动关键帧
手动创建复杂动画
- 演示了如何制作日夜切换背景，通过设置不同颜色和位置来实现渐变效果。
- 强调在修改属性前必须先激活关键帧，以确保所有变化都被记录。
自动关键帧功能
- 启用自动关键帧后，软件会根据元素变化自动生成所需的关键帧，大大简化了工作流程。
路径修剪与代理使用
路径修剪技术
- 演示如何使用路径修剪功能，使绘制的路径看起来像是逐渐出现，通过设置起始和结束点来实现动态效果。
使用代理进行复杂动画
- 通过代理功能，可以快速生成复杂文本节点之间的互动动画，提高效率并减少手动操作时间。
组件中的运动嵌套与导出选项
嵌套运动到组件中
- 将运动嵌入组件中使得每个元素能够独立操控，同时保持整洁的时间线结构。
导出选项概述
- 用户可以将带有运动效果的框架导出为 MP4、WebM、GIF 或 SVG 格式，并选择质量和尺寸。