返回视频列表

Figma

Figma Motion basics: Easing

发布
平台
YouTube
时长
1:45
片中语言
英语
播放量
4325
镜头间隔中位数
0.09s
人脸出镜
0%
暗部画面
0%
Figma Figma Motion basics: Easing at 0:00
FigmaFigma Motion basics: Easing
0:00
Figma Figma Motion basics: Easing at 0:01
FigmaFigma Motion basics: Easing
0:01
Figma Figma Motion basics: Easing at 0:04
FigmaFigma Motion basics: Easing
0:04
Figma Figma Motion basics: Easing at 0:04
FigmaFigma Motion basics: Easing
0:04
Figma Figma Motion basics: Easing at 0:04
FigmaFigma Motion basics: Easing
0:04
Figma Figma Motion basics: Easing at 0:07
FigmaFigma Motion basics: Easing
0:07
Figma Figma Motion basics: Easing at 0:19
FigmaFigma Motion basics: Easing
0:19
Figma Figma Motion basics: Easing at 0:19
FigmaFigma Motion basics: Easing
0:19
Figma Figma Motion basics: Easing at 0:19
FigmaFigma Motion basics: Easing
0:19
Figma Figma Motion basics: Easing at 0:19
FigmaFigma Motion basics: Easing
0:19
Figma Figma Motion basics: Easing at 0:20
FigmaFigma Motion basics: Easing
0:20
Figma Figma Motion basics: Easing at 0:20
FigmaFigma Motion basics: Easing
0:20
Figma Figma Motion basics: Easing at 0:22
FigmaFigma Motion basics: Easing
0:22
Figma Figma Motion basics: Easing at 0:25
FigmaFigma Motion basics: Easing
0:25
Figma Figma Motion basics: Easing at 0:28
FigmaFigma Motion basics: Easing
0:28
Figma Figma Motion basics: Easing at 0:31
FigmaFigma Motion basics: Easing
0:31
Figma Figma Motion basics: Easing at 0:37
FigmaFigma Motion basics: Easing
0:37
Figma Figma Motion basics: Easing at 0:40
FigmaFigma Motion basics: Easing
0:40
Figma Figma Motion basics: Easing at 0:42
FigmaFigma Motion basics: Easing
0:42
Figma Figma Motion basics: Easing at 0:42
FigmaFigma Motion basics: Easing
0:42
Figma Figma Motion basics: Easing at 0:42
FigmaFigma Motion basics: Easing
0:42
Figma Figma Motion basics: Easing at 0:43
FigmaFigma Motion basics: Easing
0:43
Figma Figma Motion basics: Easing at 0:43
FigmaFigma Motion basics: Easing
0:43
Figma Figma Motion basics: Easing at 0:43
FigmaFigma Motion basics: Easing
0:43
Figma Figma Motion basics: Easing at 1:01
FigmaFigma Motion basics: Easing
1:01
Figma Figma Motion basics: Easing at 1:06
FigmaFigma Motion basics: Easing
1:06
Figma Figma Motion basics: Easing at 1:06
FigmaFigma Motion basics: Easing
1:06
Figma Figma Motion basics: Easing at 1:07
FigmaFigma Motion basics: Easing
1:07
Figma Figma Motion basics: Easing at 1:07
FigmaFigma Motion basics: Easing
1:07
Figma Figma Motion basics: Easing at 1:07
FigmaFigma Motion basics: Easing
1:07
Figma Figma Motion basics: Easing at 1:07
FigmaFigma Motion basics: Easing
1:07
Figma Figma Motion basics: Easing at 1:10
FigmaFigma Motion basics: Easing
1:10
Figma Figma Motion basics: Easing at 1:23
FigmaFigma Motion basics: Easing
1:23
Figma Figma Motion basics: Easing at 1:23
FigmaFigma Motion basics: Easing
1:23
Figma Figma Motion basics: Easing at 1:24
FigmaFigma Motion basics: Easing
1:24
Figma Figma Motion basics: Easing at 1:24
FigmaFigma Motion basics: Easing
1:24
Figma Figma Motion basics: Easing at 1:31
FigmaFigma Motion basics: Easing
1:31
Figma Figma Motion basics: Easing at 1:31
FigmaFigma Motion basics: Easing
1:31
Figma Figma Motion basics: Easing at 1:34
FigmaFigma Motion basics: Easing
1:34
Figma Figma Motion basics: Easing at 1:36
FigmaFigma Motion basics: Easing
1:36
Figma Figma Motion basics: Easing at 1:40
FigmaFigma Motion basics: Easing
1:40

Figma Motion basics: Easing 的文字记录

由语音模型根据影片自身的音轨转写,并非品牌撰写。点击任意一行即可跳到那一刻。

  1. 0:00Let's learn about easing in Figma Motion.
  2. 0:03Keyframes define what changes and when.
  3. 0:06Easing defines how it gets there by controlling
  4. 0:08whether an animation accelerates, decelerates, or both.
  5. 0:14It's what separates motion that looks correct
  6. 0:16from motion that feels correct.
  7. 0:18To see how much of a difference the correct easing can make,
  8. 0:21take a look at these two examples.
  9. 0:23The first uses linear movement, or motion
  10. 0:26that is the same from start to finish.
  11. 0:27The second uses an ease-in-and-out curve.
  12. 0:31Notice how it starts slowly, builds speed through the middle, then settles into its final position.
  13. 0:37That subtle shift is what makes the motion feel grounded rather than mechanical.
  14. 0:43To adjust easing, select an animation on the timeline and open the easing drop-down menu,
  15. 0:48or click the line in between two keyframes.
  16. 0:51From here, you can either select a default easing curve,
  17. 0:55or use the Curve Editor to create a custom one.
  18. 0:59Custom curves can be saved as variables,
  19. 1:01making them reusable across your entire design system.
  20. 1:07You can also apply holds from the easing settings.
  21. 1:10Unlike other easing curves,
  22. 1:12holds don't create a gradual transition as the animation plays.
  23. 1:16Instead, the object will immediately jump to its final position
  24. 1:19and stay there for the full duration
  25. 1:21until the next keyframe or animation begins.
  26. 1:23This is useful for creating instantaneous movement or adding deliberate pauses to your animation.
26 行 · 228 字