Blog

Able to discover ways to create a Lottie loading animation utilizing Figma? We’ll stroll via designing the animated graphic, prototyping it, and exporting it utilizing the LottieFiles plugin. All you want is a free Figma account. For those who’re beginning, this is all the things it’s good to learn about Lottie animations, and if you happen to’re able to get impressed, let’s dive in.

1. Easy methods to create a easy body

Begin with the Body Device (F) and use it to create an 850 x 600 body. Add a Fill for this body and set its shade to #5300C0.

2. Easy methods to create the primary part of the Lottie loader animation​

Step 1

Utilizing the identical device, create a 540 x 110 px body. Add a Fill for this second body and use a darkish gray. The colour will not be vital as we’ll take away it a couple of steps later.

Step 2

Hold focusing in your second body and choose the Ellipse Device (O). Use it to create an 80 px circle, make it white (#FFFFFF), and place it precisely as proven within the second picture. With the circle chosen, you’ll be able to maintain down the Alt key to take a look at the spacing between the perimeters of your circle and the perimeters of the body.

Step 3

Choose your circle utilizing the Transfer Device (V), maintain down the Alt and Shift keys, after which merely drag a replica of the circle to the precise. Go away a 60 px hole between your two circles. When you’re achieved, preserve the brand new circle chosen and press Management-D twice. This may add one other two copies of the circle, as proven within the following photographs.

Step 4

As promised, choose your second body and take away the Fill shade.

Choose this body alongside along with your white circles and switch them right into a compound path (Management-Alt-Ok). Pretty much as good observe, you’ll be able to rename it “Loading Animation”.

3. Easy methods to add variants of the Lottie loading animation

Step 1

Guarantee that your principal part is chosen, and add 4 variants. To make issues a bit much less congested, improve the spacing between these variants to about 50. To shortly regulate the body of your part set, simply click on the Resize to Match button (Management-Alt-Shift-R).

Step 2

Now it is time to regulate the variants that may make your Lottie load animation. Decide the Transfer Device (V), maintain down the Management key, and click on the primary circle out of your second variant to pick it.

First, change the white with #F4BC00. Hover your cursor excessive fringe of the circle till it turns right into a double-sided arrow, after which click on and drag to make it 100 px huge. Lastly, transfer this yellow circle 10 px up. You are able to do it manually, or by setting the Y Place to 0.

Step 3

Transfer to the third variant and choose the second circle. Make it 100 px huge, change the white with #E88900, and do not forget to maneuver it 10 px up.

Proceed with the subsequent variant and choose the third circle. Once more, make it 100 px huge, change the white with #F55A53, and do not forget to maneuver it 10 px up.

Lastly, choose the fourth circle from the final variant. Make it 100 px huge, change the white with #D5001C, and keep in mind to maneuver it 10 px up.

4. Easy methods to prototype your Lottie loading animation

Step 1

Now that your design is full, it is time to prototype it. So change from Design mode to Prototype mode.

Begin with the Default variant. Choose it and easily drag a reference to the subsequent variant. Do not trouble to arrange the Interplay settings for now.

Step 2

Proceed so as to add interactions between every consecutive pair of variants—second to 3rd, third to fourth, fourth to fifth—after which from the fifth again to the default one.

Step 3

Choose one of many interactions and press Management-A to shortly choose all of them.

Change the Set off to After delay and decrease the Delay to 1ms. Select Sensible Animate for the Animation and Ease out and in for the Curve, after which decrease the Period to about 300ms, however be at liberty to play with this worth.

5. Easy methods to create the Lottie loading animation

Step 1

Go into your Belongings and seek for the Loading Animation. Merely drag it inside your purple body.

Step 2

Just be sure you’re nonetheless in Prototype mode and add a Stream on your purple body. You will perceive in a couple of moments how this Stream helps us export the Lottie loading animation.

6. Easy methods to preview and save the loading animation as Lottie

Step 1

To be able to save your Figma animation as a Lottie loading animation, you have to the LottieFiles plugin.

Press Management – / to open the Fast Actions menu. Choose the Plugins & widgets part and seek for the LottieFiles plugin.

Click on the Run button so as to add the LottieFiles plugin to Figma.

Step 3

First, you will have to arrange an account at LottieFiles. When you’re achieved, you’ll be able to open the LottieFiles plugin and choose the popular Stream from the dropdown menu. On this case, there’s just one, so you will not have a lot bother discovering it, however for a bigger design, it is a good observe to call your flows.

Step 4

As soon as chosen, you will get a pleasant preview of your Lottie loader animation. Clicking the Save to button will save the animation in your Initiatives folder at lottiefiles.com.

Except you are a millionaire who can afford numerous subscriptions, remember that there is a restrict of 10 animations earlier than it’s a must to pay to avoid wasting your Lottie animations. Do not make the identical mistake that I made, and ensure that the animation you select to avoid wasting is the ultimate model. And no, deleting a saved animation will not reset the restrict. 

Congrats! You are achieved!

Right here is how your Lottie loading animation ought to look. I hope you have loved this tutorial and may apply these strategies in your future tasks.

Be at liberty to regulate this remaining Lottie loader animation and make it your individual. You will discover some nice sources of inspiration at Envato, with attention-grabbing options to create your loading animation for Lottie.

Wish to study extra?

Now we have a great deal of animated graphic tutorials on Envato Tuts+, from newbie to intermediate stage. Have a look!