Description
When creating a prototype in Figma the visuals are very important, because we want our prototype to be as close to the final product as we possibly can. We can make it even better when we add some movement to it, for example:
- Logo animations
- Movement when the page loads
- Loading screens
- Animations when you click a button
And many more, the possibilities are endless!
With animations we get to SEE and FEEL how our project behaves. The animations should match the look of the project: if the design is "heavy", "metallic" and "dark", the animations should also FEEL "heavy", "hard" and "sharp". If the design is "lightweight", the animations should feel "light" and "fluffy". It all depends on what you SEE, and then you decide how it should FEEL for the users. This mindset makes your project feel more premium AND makes you look more professional. Attention to even the smallest details makes a huge difference!
Two ways to animate in Figma
Figma now has TWO tools for animation, and it's important to know which one to use when:
- Figma Motion (the timeline): NEW! Since Config 2026 Figma has a real timeline with keyframes, like in After Effects or a game engine. This is where you design the animation itself: a logo intro, a loading screen, or how the elements of a page come in when it loads.
- Smart animate (prototyping): animations that happen when the user DOES something in your clickable prototype: clicks a button, hovers, opens a menu or goes to the next page.
Simple rule: if it plays by itself, use Motion. If it reacts to a click or a hover in your prototype, use smart animate.
Figma Motion is still in open beta, so things can change fast. If something looks different in your Figma, check the Figma help pages in materials!
Figma Motion: how to use the timeline
- Turn it on. Switch the toggle in the toolbar to Motion. The timeline shows up at the bottom of the screen.
- Quick start with presets. Select a layer, go to the Animations section in the right sidebar and click the +. Pick an animation, for example fade, move or scale, and it moves! Drag it on the timeline to change WHEN it starts, and drag its edges to make it longer or shorter.
- Keyframes for full control. A keyframe says "this is how it looks at this moment". Move the playhead to where the animation starts, click Add keyframe next to the property you want to animate (position, scale, rotation or opacity) and set the value. Then move the playhead to where it ends and change the value. Figma animates everything in between!
- Auto-keyframe (the lazy way ;) Turn on auto-keyframe in the timeline controls (a red bar shows up), move the playhead, and just move, scale or rotate things on the canvas. Figma records the keyframes for you. Don't forget to turn it off again!
- Easing. Click the line between two keyframes to change the easing curve. This is where the FEEL comes from: the same movement with a different curve feels totally different.
- Preview. Press Spacebar to play. In the timeline controls you can choose if it plays once, loops or ping-pongs back and forth.
- Export and handoff. Export your animation as MP4, GIF, WebM or SVG to show it off in your presentation. And in Dev Mode the developers get a Motion tab where they can see the timing, easing and keyframes, and copy the animation as CSS or React code. No more "make it move kind of like this"!
Tip: Build your animation on a component, and the animation travels with it everywhere you use that component.
Smart animate: animations in your prototype
- Smart animate is your best friend for prototypes. If two frames have layers with the SAME name, Figma animates between them automatically. So name your layers!
- Animate variants: make variants of a component (for example a toggle ON and OFF) and connect them with an interaction inside the component. Now every instance of it animates by itself.
Timing tips:
- Most UI animations should be quick, around 150–300ms. Longer than half a second and it starts to feel slow. A new animation in Motion is 2 seconds long by default, way too slow for a button! Logo intros and loading screens can be longer, but UI stuff should be quick.
- Use "ease out" when something comes in, and "ease in" when something leaves.
Accessibility: not everyone likes movement!
Some people get dizzy or even sick from big movements on the screen, and many turn on "reduce motion" on their phone or computer. Developers can respect that setting in code, so think about it already in the design: what does your animation look like with less movement? A fade instead of a slide is usually a good answer. Remember the Accessible UI guide, accessibility is for animations too!
What about AI?
Figma Motion has the Figma agent built in: you describe a motion with a prompt, like "make the cards slide in one after another", and it creates the keyframes for you on the timeline. You can even ask it to critique your animation. (Whether you have the agent depends on your Figma plan.) It's a great way to learn: generate something, then look at the keyframes and see HOW it was made. But don't stop there, tweak the timing and easing until it FEELS right for your project. That's the designer's job, and the AI doesn't know your project like you do.