How to use Lotties in Figma

In the following tutorial, I will show you how to create Lottie animations in Figma. We'll use two colorful designs to exmplify how you can animate in Figma, and then I'll show you how to go from Figma to Lottie animations. All you need is a free Figma account. If you're ready to learn how to use Lottie in Figma, let's dive in.

Step 2

Select your frame and press Control-D four times, which will add four copies of your selected frame. To make things less congested, you can select all the frames and set the Spacing to about 150 px.

Step 3

Adjust the size of the yellow circles from the first three frames as shown below, and remember to move them to the center of the frames that they are part of. Select the yellow circles from the first and the fifth frame, and replace the yellow with the darker color.

This will help with the animation as it sets the main stages of your animation. Later, the Smart Animate feature will fill in the missing frames.

2. How to add a star shape to an animation in Figma

Step 1

Use the Star Tool to add a 350 px star shape in the center of your first frame. Make it white, keep the default 5 points, and set the Ratio to 50% and the Radius to 20.

Step 2

Make sure that your star shape is still selected, and press Control-C to copy it. Select your other four frames and simply press Control-V to add the same star shape.

Select the star shapes from your second and third frames, and then change the Fill color from white to yellow. Select only the star shape from the second frame, shrink it to 250 px, and lower its Radius to 16.

3. How to properly organize assets when you animate in Figma

Step 1

Focus on your third frame and use the Ellipse Tool (O) to add several yellow circles around your star shape, roughly as shown below.

Step 2

Select the circles from your third frame and copy them (Control-C). Select Frame 4 and press Control-V to paste the circles, and then make them white.

Step 3

Move to Frame 2, select it, and press Control-V again to paste that set of yellow circles. Select the circles one by one and move them behind the star shape.

Again, moving these circles will help with the animation. The circles will start moving from behind the star toward their final destinations, specified in Frame 3.

Step 4

Select all those tiny circles from your second frame and copy them (Control-C). Select Frame 1 and Frame 5, and press Control-V.

As I’ve said before, the tiny circles need to sit behind the star shapes. To do this easily, just select all the star shapes across your five frames and press the ] key to bring them to the front of their respective layers.

Step 5

Let's do a quick recap before you learn how to make a Lottie animation in Figma. First things first: names matter. Make sure the elements you’re animating have the same names across all layers. Also, changes in the order of objects can disrupt your animation, so try to maintain the same order throughout the layers.

4. How to create an animation in Figma

Step 1

Now that the design is complete, let's move to the prototype and learn how to animate in Figma. Start by switching from Design mode to Prototype mode.

Select the first frame and connect it with the second one. Set the Interaction settings as shown below. As I've said before, Smart Animate does most of the magic as it fills in the missing frames from your animation.

Step 2

Select the second frame and connect it with the third one. Set the Interaction settings as shown in the following image.

Step 3

Select the third frame and connect it with the fourth one. Set the Interaction settings as shown below.

Step 4

Select the fourth frame and connect it with the fifth one. Set the Interaction settings as indicated below.

Step 5

Finally, connect the fifth frame with the first one and set the Interaction settings as you can see below.

5. How to create Lottie animations in Figma

Step 1

To convert a Figma animation to Lottie, you will need the LottieFiles plugin.

Press Control-/ to open the Quick Actions menu. Select the Plugins & widgets section and search for the LottieFiles plugin.

Step 2

Click the Run button to add the LottieFiles plugin to Figma. You'll need to set up an account with LottieFiles before you can export a Lottie from Figma.

Step 3

Once you've set up your account and opened the LottieFiles plugin, you'll notice that you need to select a flow to go from Figma to a Lottie animation.

If you don't have one already, make sure that you're still in Prototype mode and add a Flow for your first frame.

Step 4

Select the preferred Flow from the dropdown menu. In this case, there's only one, so you won't have much trouble finding it, but for larger designs, it's a good practice to name your flows.

Step 5

Once you select a flow, you'll get a nice preview of your Lottie animation. Clicking the Save to button will save the animation in your Projects folder at lottiefiles.com. Before you do it, be aware that there's a limit of 10 animations before you have to pay to save your Lottie animations. Don't make the same mistake as I did, and be sure that the animation that you choose to save is the final version. And no, deleting a saved animation won't reset the limit.

6. How to use text in Lottie animations with Figma

Step 1

Pick the Text Tool (T) and use it to add the "Loading" text. Feel free to use any font and set the Size to about 80, and then open the Type settings fly-out menu to check the Cap height to baseline button.

Step 2

Pick the Ellipse Tool (O) and use it to add three 10 px circles, as shown below. Use the fill colors indicated in the following image, and then focus on the Layers panel.

As a good practice, you can rename each circle based on its color. Place the orange circle below the yellow one and the red one below the orange one.

Step 3

Select your circles along with the text, and turn your selection into a compound path (Alt-Control-K). Rename it "Loading Text".

Step 4

Select the circles and align them all to the left edge of the yellow one.

7. How to make Lottie animations in Figma using a component set

Step 1

Make sure that your main component is selected, and add a variant. Select the three circles inside your default variant, and make them invisible by lowering the Opacity of the Fill colors to 0%.

Step 2

Add a third variant to your component set. Select the orange circle inside this new variant, and move it to the right using the Right Arrow key. Leave an 8 px gap between your orange circle and the yellow one.

Step 3

Add a fourth variant to your component set. Select the red circle inside this new variant and move it to the right using the Right Arrow key. Leave an 8 px gap between this red circle and the orange one.

Step 4

Add a fifth variant to your component set. Select the red circle inside this new variant and move it behind the orange one.

Add one last variant to your component set. Select the orange circle inside this new variant and move it behind the yellow one.

8. How to create a text animation in Figma

Step 1

Switch from Design mode to Prototype mode. First, connect each consecutive variant, and then connect the last variant with the first one. Select all connections and set the Interaction settings as shown below. Again, Smart animate will do the magic.

Step 2

Create a new frame, make it purple, and drag in the "Loading" text component from the Assets panel. Don't forget to add a Flow to this new frame.

Step 3

Finally, you can press Control-/ to open the Quick Actions, search for the LottieFiles plugin, and open it to preview your Lottie animation.