Animation with Figma Motion - A Step-by-Step Guide for Beginners Tutorial
30.1K views · 2026-06-24
Motion Design
Figma Motion is here and while it may not replace After Effects yet, it could completely change how designers create animations and micro-interactions without ever leaving Figma.
In this beginner-friendly tutorial, I’ll walk you through the Figma Motion interface and show you how to bring a layered Totoro illustration to life. We’ll cover keyframes, timeline management, easing curves, anchor points, looping, multi-level animation, export settings, and the layer organization habits that make complex animations much easier to manage.
You’ll learn how to:
• Navigate the Figma Motion UI
• Prepare and name layers for animation
• Create and edit keyframes
• Build custom easing curves
• Use looping and ping-pong playback
• Animate nested groups and multiple levels
• Adjust anchor points for natural movement
• Export your animation as a video or GIF
• Add small details that make an animation feel alive
Follow along with the project here:
https://bit.ly/rad-figma-motion
Chapters
00:00 — Why Figma Motion matters
00:49 — Figma Motion UI basics
01:42 — Planning the Totoro animation
02:43 — Keyframes, Auto Layout, and easing
04:37 — Timeline controls and current limitations
06:27 — Looping, ping-pong, and Auto Keyframes
10:50 — Animating the eyes and facial details
11:33 — Anchor points and the fishing-line animation
14:02 — Making movement feel natural with easing
14:45 — Adding secondary animation
15:30 — Exporting your animation
16:37 — Preview options, limitations, and final thoughts
Try animating the ears, tail, tree, and other details yourself, then share your result and tag me—I’d love to see what you create.
And settle the debate in the comments: is it pronounced GIF or JIF?
Subscribe for more videos about Figma, motion design, UI/UX, development, AI, and building creative projects.
#Figma #FigmaMotion #MotionDesign #AnimationTutorial #UIDesign #UXDesign #FigmaTutorial
In this beginner-friendly tutorial, I’ll walk you through the Figma Motion interface and show you how to bring a layered Totoro illustration to life. We’ll cover keyframes, timeline management, easing curves, anchor points, looping, multi-level animation, export settings, and the layer organization habits that make complex animations much easier to manage.
You’ll learn how to:
• Navigate the Figma Motion UI
• Prepare and name layers for animation
• Create and edit keyframes
• Build custom easing curves
• Use looping and ping-pong playback
• Animate nested groups and multiple levels
• Adjust anchor points for natural movement
• Export your animation as a video or GIF
• Add small details that make an animation feel alive
Follow along with the project here:
https://bit.ly/rad-figma-motion
Chapters
00:00 — Why Figma Motion matters
00:49 — Figma Motion UI basics
01:42 — Planning the Totoro animation
02:43 — Keyframes, Auto Layout, and easing
04:37 — Timeline controls and current limitations
06:27 — Looping, ping-pong, and Auto Keyframes
10:50 — Animating the eyes and facial details
11:33 — Anchor points and the fishing-line animation
14:02 — Making movement feel natural with easing
14:45 — Adding secondary animation
15:30 — Exporting your animation
16:37 — Preview options, limitations, and final thoughts
Try animating the ears, tail, tree, and other details yourself, then share your result and tag me—I’d love to see what you create.
And settle the debate in the comments: is it pronounced GIF or JIF?
Subscribe for more videos about Figma, motion design, UI/UX, development, AI, and building creative projects.
#Figma #FigmaMotion #MotionDesign #AnimationTutorial #UIDesign #UXDesign #FigmaTutorial