Figma: Animations

Table of Contents

1. Figma Animations
2. Figma Plugins
3. Step-by-Steps
4. Conclusion

Figma Help

Figma has a help site for animations that goes through instant, dissolve, smart animate, move in/out, push, and slide in/out animations. It goes into what these animations are, has small clips on how they would look like on a mobile device, and what they support (ie, duration, easing, and direction). This Figma help goes into using easing curves, whether they be linear, ease in, ease out, ease in and out, ease in back, ease out back, ease in and out back, or custom easing curves.

Overall, there are many animations and lots of motions you can add into your designs. Along with plugins, it can be overwhelming. So it's okay to start slow.

Figma Plugins

Jitter is one of the Figma plugins that lets you animate your designs with just a few simple clicks. The download page says:

Jitter lets you animate your Figma designs in just a few clicks, to export the animation as a video or as a GIF, create your motion design system, or share the animation parameters with developers.

So it can't be wrong, right?

Motion is another popular Figma plugin that allows you to use advanced animation techniques and wow your developer friends!

Let's Do This

1. For this we're going to be using the Jitter plugin

2. Select Jitter and the artboard you want to animate

3. Once the board exports to Jitter in the new tab, you'll want to select the element that you want to animate before clicking "New Animation" button

4. This will bring up all the options for to choose from

5. When you select an animation and it happens too quickly, you can change the speed by lengthening the blue bar at the bottom of the screen

Note: You can stack animations together as well

Conclusion

Animations are a great way to make your applications come to life! Do you have a favorite plugin to use in Figma for your animations?

Happy coding!