Blog

Within the following tutorial, I’ll present you the way to create Lottie animations in Figma. We’ll use two colourful designs to exmplify how one can animate in Figma, after which I will present you the way to go from Figma to Lottie animations. All you want is a free Figma account. When you’re able to discover ways to use Lottie in Figma, let’s dive in.

1. The way to create the beginning frames and shapes of the Lottie animation

Step 1

Begin with the Body Device (F) and create an 850 x 850 px body.

Proceed with the Ellipse Device (O) and use it so as to add a 500 px circle. Set the Fill shade of this form to #383955. Make it possible for your circle is chosen, and press Management-D to duplicate it. Change the colour of this second circle to #FFB400.

Within the Layers panel, rename your two circles as proven beneath.

Step 2

Choose your body and press Management-D 4 instances, which can add 4 copies of your chosen body. To make issues much less congested, you’ll be able to choose all of the frames and set the Spacing to about 150 px.

Step 3

Alter the dimensions of the yellow circles from the primary three frames as proven beneath, and keep in mind to maneuver them to the middle of the frames that they’re a part of. Choose the yellow circles from the primary and the fifth body, and change the yellow with the darker shade.

This may assist with the animation because it units the principle levels of your animation. Later, the Good Animate function will fill within the lacking frames.

2. The way to add a star form to an animation in Figma

Step 1

Use the Star Device so as to add a 350 px star form within the heart of your first body. Make it white, hold the default 5 factors, and set the Ratio to 50% and the Radius to 20.

Step 2

Make it possible for your star form continues to be chosen, and press Management-C to repeat it. Choose your different 4 frames and easily press Management-V so as to add the identical star form.

Choose the star shapes out of your second and third frames, after which change the Fill shade from white to yellow. Choose solely the star form from the second body, shrink it to 250 px, and decrease its Radius to 16.

3. The way to correctly set up property while you animate in Figma

Step 1

Focus in your third body and use the Ellipse Device (O) so as to add a number of yellow circles round your star form, roughly as proven beneath.

Step 2

Choose the circles out of your third body and replica them (Management-C). Choose Body 4 and press Management-V to stick the circles, after which make them white.

Step 3

Transfer to Body 2, choose it, and press Management-V once more to stick that set of yellow circles. Choose the circles one after the other and transfer them behind the star form.

Once more, shifting these circles will assist with the animation. The circles will begin shifting from behind the star towards their closing locations, laid out in Body 3.

Step 4

Choose all these tiny circles out of your second body and replica them (Management-C). Choose Body 1 and Body 5, and press Management-V.

As I’ve stated earlier than, the tiny circles want to sit down behind the star shapes. To do that simply, simply choose all of the star shapes throughout your 5 frames and press the ] key to convey them to the entrance of their respective layers.

Step 5

Let’s do a fast recap earlier than you discover ways to make a Lottie animation in Figma. First issues first: names matter. Be certain the weather you’re animating have the identical names throughout all layers. Additionally, adjustments within the order of objects can disrupt your animation, so attempt to preserve the identical order all through the layers.

4. The way to create an animation in Figma

Step 1

Now that the design is full, let’s transfer to the prototype and discover ways to animate in Figma. Begin by switching from Design mode to Prototype mode.

Choose the primary body and join it with the second. Set the Interplay settings as proven beneath. As I’ve stated earlier than, Good Animate does a lot of the magic because it fills within the lacking frames out of your animation.

Step 2

Choose the second body and join it with the third one. Set the Interplay settings as proven within the following picture.

Step 3

Choose the third body and join it with the fourth one. Set the Interplay settings as proven beneath.

Step 4

Choose the fourth body and join it with the fifth one. Set the Interplay settings as indicated beneath.

Step 5

Lastly, join the fifth body with the primary one and set the Interplay settings as you’ll be able to see beneath.

5. The way to create Lottie animations in Figma

Step 1

To transform a Figma animation to Lottie, 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.

Step 2

Click on the Run button so as to add the LottieFiles plugin to Figma. You may have to arrange an account with LottieFiles earlier than you’ll be able to export a Lottie from Figma.

Step 3

As soon as you have arrange your account and opened the LottieFiles plugin, you will discover that it’s good to choose a circulation to go from Figma to a Lottie animation.

If you do not have one already, just remember to’re nonetheless in Prototype mode and add a Move to your first body.

Step 4

Choose the popular Move from the dropdown menu. On this case, there’s just one, so you will not have a lot bother discovering it, however for bigger designs, it is a good observe to call your flows.

Step 5

As soon as you choose a circulation, you will get a pleasant preview of your Lottie animation. Clicking the Save to button will save the animation in your Initiatives folder at lottiefiles.com. Earlier than you do it, bear in mind that there is a restrict of 10 animations earlier than it’s important to pay to avoid wasting your Lottie animations. Do not make the identical mistake as I did, and make certain that the animation that you simply select to avoid wasting is the ultimate model. And no, deleting a saved animation will not reset the restrict.

6. The way to use textual content in Lottie animations with Figma

Step 1

Choose the Textual content Device (T) and use it so as to add the “Loading” textual content. Be happy to make use of any font and set the Dimension to about 80, after which open the Kind settings fly-out menu to examine the Cap peak to baseline button.

Step 2

Choose the Ellipse Device (O) and use it so as to add three 10 px circles, as proven beneath. Use the fill colours indicated within the following picture, after which concentrate on the Layers panel.

As a great observe, you’ll be able to rename every circle based mostly on its shade. Place the orange circle beneath the yellow one and the purple one beneath the orange one.

Step 3

Choose your circles together with the textual content, and switch your choice right into a compound path (Alt-Management-Okay). Rename it “Loading Textual content”.

Step 4

Choose the circles and align all of them to the left fringe of the yellow one.

7. The way to make Lottie animations in Figma utilizing a element set

Step 1

Make it possible for your important element is chosen, and add a variant. Choose the three circles inside your default variant, and make them invisible by reducing the Opacity of the Fill colours to 0%.

Step 2

Add a 3rd variant to your element set. Choose the orange circle inside this new variant, and transfer it to the best utilizing the Proper Arrow key. Depart an 8 px hole between your orange circle and the yellow one.

Step 3

Add a fourth variant to your element set. Choose the purple circle inside this new variant and transfer it to the best utilizing the Proper Arrow key. Depart an 8 px hole between this purple circle and the orange one.

Step 4

Add a fifth variant to your element set. Choose the purple circle inside this new variant and transfer it behind the orange one.

Add one final variant to your element set. Choose the orange circle inside this new variant and transfer it behind the yellow one.

8. The way to create a textual content animation in Figma

Step 1

Change from Design mode to Prototype mode. First, join every consecutive variant, after which join the final variant with the primary one. Choose all connections and set the Interplay settings as proven beneath. Once more, Good animate will do the magic.

Step 2

Create a brand new body, make it purple, and drag within the “Loading” textual content element from the Belongings panel. Do not forget so as to add a Move to this new body.

Step 3

Lastly, you’ll be able to press Management-/ to open the Fast Actions, seek for the LottieFiles plugin, and open it to preview your Lottie animation.

Here is how your Lottie animation ought to look. Take a look at this tutorial if you wish to discover ways to create the “loading dots” animation: The way to create a Lottie loading animation.

9. The way to add Lottie to Figma

Step 1

You’ll be able to add Lottie to Figma, however there are some limitations as Figma doesn’t assist taking part in JSON Lottie information instantly. You’ll be able to solely add Lottie animations as GIF or MP4 information, however take into account that you want a subscription to import an MP4 file in Figma.

You’ll be able to insert your saved Lottie animations as GIFs utilizing the LottieFiles plugin, but when you do not have a LottieFiles subscription, there can be a restrict on the dimensions of the imported GIF.

The identical limitation applies should you select to export your saved Lottie animation as an MP4 file.

In case your Lottie animation was created in After Results and you’ve got that file, you may save that animation as a bigger GIF after which import it in Figma.

Congratulations! You are completed

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

Be happy to regulate the ultimate Lottie animation and make it your individual. Now that you’ve got realized the way to use Lottie in Figma, you’ll be able to head over to Envato, the place you could find fascinating options to enhance your animation.

Need to study extra?

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