What is a LottieFile?

A LottieFile is a file format for animations. Imagine you want to add some cool animations to your website or app to make it more engaging and visually appealing. This is where LottieFiles comes into play.  

‍

Once in your project, the LottieFile can play, pause, and even react to user interactions. For example, it can animate when someone clicks a button or scrolls down a page. It's like adding stickers to your projects, but these stickers come to life with animations!

‍

LottieFiles are especially popular among designers and developers because they make it super simple to add animations without having to be an animation expert. It doesn’t need any complicated coding nor does it have a huge file size.

‍

How to use Lottie animation in Figma?

‍

It can be handy to know how to use Lottie animations in Figma. These files are simple to create and export, and they are relatively small in size as well. Lottie files add a nice touch to your design and leave an impression on the consumer of the content. Yep, quite beneficial. 

‍

To create Lottie animations in Figma, you will need the LottieFiles plugin. If you are unsure about how to install the plugin, please refer to our other article for help.

Once you have installed the plugin, you must  Sign Up. 

‍

After signing up, LottieFiles is ready to use. 

At first view, you will see that the plugin offers plenty of free animations for you to use.

‍

To get any of these files in your Figma project, just click on it, and choose what you want to insert it as: SVG or GIF. 

‍

‍

If you get the Pro version of the LottieFiles plugin, you can also customize your animations.

‍

‍

It’s pretty cool! 

But of course, you may also want to create the Lottie animation from a design of your own. Don’t worry, the plugin allows you to do that. 

‍

How to create Lottie animation in Figma?

First, switch to the Export to Lottie section of the plugin.

‍

Then, you will want to select a Frame that you want to animate in your canvas. 

Emphasis on Frame. LottieFiles doesn’t just animate any element in your design.

‍

‍

When the export is finished, you will see all the animations that you can do to your element in the plugin tab + a preview. 

‍

‍

There are three ready-made sections: Highlight, Move in, Move out. Each of these sections has 1-5 animations. You can also adjust their speed, duration, delay, background color, etc. 

Basically, LottieFiles allows you to animate your designs like a pro without it being too difficult. 

‍

To place the animation file in your project, you simply click Insert as GIF. That easy.

‍

‍

Lottie also allows you to save the files in your workspace, so you can access them in the Workspaces section of the plugin. 

‍

‍

‍

‍

Can I import LottieFiles from my device?

Sure you can! The Import section of the plugin allows you to drag and drop/browse any .lottie or .json file from your device. This way, you can build your design in another animation software if that is what you want. And then still import it as a LottieFile to Figma.

‍

‍

FAQs:

‍

Can I use LottieFiles in Figma?

Yes, you can use LottieFiles in Figma in two ways. Either you export the animation from another software as a LottieFile (.lottie / .json) and place it into your canvas – or you can use the LottieFiles plugin to browse and create your animations within Figma.

‍

How do you make Lottie animation from Figma?

To make Lottie animations in Figma you need the LottieFiles plugin. Through the plugin, you can select your Figma frame, and animate it easily. The LottieFiles plugin offers plenty of ready-made animations for you to incorporate into your design.

‍

What can I use instead of Lottie animations?

You can use GIFs or Videos, SVG animations, animation plugins, game engines, CSS frameworks & animations, etc.

‍

‍

We hope this article taught you all you need to know about LottieFiles, and how to use them efficiently in Figma.

If you are interested in learning more about Figma, feel free to check out our other resources. We have free and easy guides to follow, and plenty of other articles!