If you are a product designer using Figma, you've likely utilized its component feature. Components allow for quick reuse of design elements and help maintain consistency across your projects. This time-saving tool enables you to manipulate individual parts of a larger system, reducing repetitive work. The best part is that changes to the original component are automatically reflected wherever the component is used.
Did you know that components can also be used to create production-ready animations in Figma? You can create complex Lottie animations using the LottieFiles for Figma plugin. By focusing on each animation area within its own component, you can perfect the details and then combine them into a larger, more intricate animation.
So how does this work? Let’s re-create an animation to see how it all comes together.
How to create a Lottie animation using Figma components
The sun
To create your component, start by designing it and creating all the required layers. Let's begin with a sun animation, which consists of three circles. Create the component and add a variant from the component created.
To create an animation with multiple frames, add more variants. A total of three variants.
When all frames are ready, go to prototype mode and connect them together to create flow. By connecting them, you are creating a smart animate. Feel free to customize the speed of this animation based on your preference.
Simple animations like these are great for other UI purposes, such as loading animations. You can change the colors to repurpose it as a recording animation. It's all up to your imagination.
Tent
Now that you understand the fundamentals of how components work, let's move on to other elements of the design. Unlike the sun, with this tent we looked at more detailed designs, using gradients on each element to add visual depth and complexity.
💡 Tip: To make the animation loop, simply repeat the first default component or frame as your last.
The popping girl
Last but not least is my favorite, the popping girl. To achieve this popping effect, we used masking, a neat trick for showing specific areas of objects while concealing the rest. If we separate the girl layer from the mask, as shown below, we can see the girl has two proper hands, but thanks to masking, we hid one without trimming. To obtain this effect, you can hide parts of the masked layer and make them pop in gradually.
Another interesting aspect of this Lottie animation is the stars. How do they appear from the first to the second frame? We achieved this by reducing the size of the stars in the first frame and enlarging them in the second, giving the effect of shining stars.
💡 Tip: When working with layers in a design, keep the layers in the same order and ensure they have the exact same names.
Combining components into one single Lottie animation
Now that we have all the individual components, it's time to combine them and animating it using the LottieFiles plugin.
- Create a frame and copy and paste your components.
- Go to prototype mode and make this frame into a flow.
- Open the LottieFiles for Figma plugin and select “Export to Lottie”.
- Select your flow and watch your Lottie animation shine.
From here, you can save it to your LottieFiles workspace for use in other projects or to share with colleagues. Alternatively, you can insert it directly into your animation as a GIF. This method allows you to create complex animations and makes it easier to fix problems in one part without affecting the entire animation.
More inspiration…
Here are some ideas to help you use components to create more complex Lottie animations with LottieFiles for Figma. If you're up for more inspiration, check out our Figma community file.
If you want to learn more about creating production-ready Lottie animations using LottieFiles for Figma, tune in to our full Figma to Lottie course to get all the tips and tricks you need to get started. To stay updated with the latest features, check out our release notes or our blog for the latest updates.
This is just the tip of the amazing tools LottieFiles for Figma offers. There's more to come to help solve the challenges of animating, do stay tuned.
Till then, do try creating your own Lottie animation on Figma and share your creations on social media so we can see your work. Let us know what you think!
