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 1
Start with the Frame Tool (F) and create an 850 x 850 px frame.
In the Layers panel, rename your two circles as shown below.
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
Move the yellow circles from the first three frames to the middle of the frames they belong to and adjust their size as indicated below. Choose the yellow circles in the first and fifth frames, then swap them out with the darker hue.
This will aid with the animation since it establishes the primary phases. The missing frames will be filled in later by the Smart Animate function.
Step 1
Put a 350 pixel star shape in the middle of your first frame using the Star Tool. Set the Ratio to 50% and the Radius to 20, make it white, and maintain the standard 5 points.
Step 2
To replicate your star form, make sure it is still chosen and hit Control-C. To add the same star form, just select your remaining four frames and hit Control-V.
After choosing the star shapes from your second and third frames, switch the Fill color from white to yellow. Choose just the star form from the second frame, reduce its radius to 16, and decrease it to 250 pixels.
Step 1
Focus on your third frame and, roughly as shown below, create a number of yellow circles around your star shape using the Ellipse Tool (O).
Step 2
Using Control-C, select and duplicate the circles in your third frame. To paste the circles, choose Frame 4, hit Control-V, and then turn them white.
Step 3
To paste that set of yellow circles, navigate to Frame 2, select it, and then use Control-V once more. One by one, pick out the circles and place them behind the star.
Once more, the animation will benefit from the movement of these circles. The circles will begin to travel from behind the star in the direction of their ultimate locations, which are shown in Frame 3.
Step 4
Choose every single one of those tiny circles from your second frame and use Control-C to duplicate them. Press Control-V after choosing Frames 1 and 5.
The small circles must sit behind the star shapes, as I have already stated. Simply select every star shape in your five frames, then use the [ key to move them to the front of their corresponding layers.
Before you learn how to create a Lottie animation in Figma, let us take a little review. First things first: names are important. Make sure all levels of the elements you are animating have the same names. Additionally, altering the order of items can cause your animation to break, so make an effort to keep the same order throughout all of the levels.
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.
Choose the third frame, then join it to the fourth. As indicated below, adjust the Interaction parameters.
Choose the fourth frame, then join it to the fifth. As seen below, adjust the Interaction parameters.
Step 5
Finally, connect the fifth frame with the first one and set the Interaction settings as you can see below.
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
From the dropdown menu, choose your favorite Flow. You will not have any issue identifying it because there is just one in this instance, but naming your flows is a smart idea for larger projects.
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.
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.
