Figma Motion basics: Keyframes

Figma Motion basics: Keyframes

13.2K views · 2026-08-04 UI Design
Keyframes are one of two ways to animate objects in Figma Motion. A keyframe marks a point in time where you set a specific value for a layer property. When you set a second keyframe for the same property but with a different value, Figma Motion animates the transition between them.

Learn more about Figma Motion: https://www.figma.com/blog/introducing-figma-motion/ & https://help.figma.com/hc/en-us/articles/41274629073303

Learn more about motion design principles: https://help.figma.com/hc/en-us/sections/41236726027287-Motion-design-fundamentals-collection

00:00 Keyframe basics
00:19 Where to set keyframes
00:35 How to add a keyframe
01:12 Update keyframe’s value
01:41 Loop keyframes
01:58 Auto-keyframe

#figma #motion #design #tutorial #animation #keyframe
____________________________________________________

Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/