Ready to learn how to create a Lottie loading animation using Figma? We’ll walk through designing the animated graphic, prototyping it, and exporting it using the LottieFiles plugin. All you need is a free Figma account. If you're starting, here's everything you need to know about Lottie animations, and if you're ready to get inspired, let's dive in.
1. How to create a simple frame
Start with the Frame Tool (F) and use it to create an 850 x 600 frame. Add a Fill for this frame and set its color to #5300C0.
2. How to create the main component of the Lottie loader animation
Step 1
Using the same tool, create a 540 x 110 px frame. Add a Fill for this second frame and use a dark grey. The color is not important as we'll remove it a few steps later.
Step 2
Keep focusing on your second frame and pick the Ellipse Tool (O). Use it to create an 80 px circle, make it white (#FFFFFF), and place it exactly as shown in the second image. With the circle selected, you can hold down the Alt key to check out the spacing between the edges of your circle and the edges of the frame.
Step 3
Select your circle using the Move Tool (V), hold down the Alt and Shift keys, and then simply drag a copy of the circle to the right. Leave a 60 px gap between your two circles. Once you're done, keep the new circle selected and press Control-D twice. This will add another two copies of the circle, as shown in the following images.
Step 4
As promised, select your second frame and remove the Fill color.
Select this frame along with your white circles and turn them into a compound path (Control-Alt-K). As good practice, you can rename it "Loading Animation".
3. How to add variants of the Lottie loading animation
Step 1
Make sure that your main component is selected, and add four variants. To make things a bit less congested, increase the spacing between these variants to about 50. To quickly adjust the frame of your component set, just click the Resize to Fit button (Control-Alt-Shift-R).
Step 2
Now it's time to adjust the variants that will make your Lottie load animation. Pick the Move Tool (V), hold down the Control key, and click the first circle from your second variant to select it.
First, replace the white with #F4BC00. Hover your cursor over the top edge of the circle until it turns into a double-sided arrow, and then click and drag to make it 100 px wide. Finally, move this yellow circle 10 px up. You can do it manually, or by setting the Y Position to 0.
Step 3
Move to the third variant and select the second circle. Make it 100 px wide, replace the white with #E88900, and don't forget to move it 10 px up.
Continue with the next variant and select the third circle. Again, make it 100 px wide, replace the white with #F55A53, and don't forget to move it 10 px up.
Finally, select the fourth circle from the last variant. Make it 100 px wide, replace the white with #D5001C, and remember to move it 10 px up.
4. How to prototype your Lottie loading animation
Step 1
Now that your design is complete, it's time to prototype it. So switch from Design mode to Prototype mode.
Start with the Default variant. Select it and simply drag a connection with the next variant. Don't bother to set up the Interaction settings for now.
Step 2
Continue to add interactions between each consecutive pair of variants—second to third, third to fourth, fourth to fifth—and then from the fifth back to the default one.
Step 3
Select one of the interactions and press Control-A to quickly select them all.
Change the Trigger to After delay and lower the Delay to 1ms. Choose Smart Animate for the Animation and Ease in and out for the Curve, and then lower the Duration to about 300ms, but feel free to play with this value.
5. How to create the Lottie loading animation
Step 1
Go into your Assets and search for the Loading Animation. Simply drag it inside your purple frame.
Step 2
Make sure that you're still in Prototype mode and add a Flow for your purple frame. You'll understand in a few moments how this Flow helps us export the Lottie loading animation.
6. How to preview and save the loading animation as Lottie
Step 1
In order to save your Figma animation as a Lottie loading animation, 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.
Click the Run button to add the LottieFiles plugin to Figma.
Step 3
First, you'll need to set up an account at LottieFiles. Once you're done, you can open the LottieFiles plugin and 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 a larger design, it's a good practice to name your flows.
Step 4
Once selected, you'll get a nice preview of your Lottie loader animation. Clicking the Save to button will save the animation in your Projects folder at lottiefiles.com.
Unless you're a millionaire who can afford countless subscriptions, 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 that I made, and be sure that the animation you choose to save is the final version. And no, deleting a saved animation won't reset the limit.
Congrats! You're done!
Here is how your Lottie loading animation should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.
Feel free to adjust this final Lottie loader animation and make it your own. You can find some great sources of inspiration at Envato, with interesting solutions to create your loading animation for Lottie.
Want to learn more?
We have loads of animated graphic tutorials on Envato Tuts+, from beginner to intermediate level. Take a look!
|
| Tweet