In this article you will find a practical guide to creating Lottie animations starting from designs in Figma and turning them into lightweight, reusable assets for applications and digital products.
Canvas preparation and basic shapes Start with an 850 x 850 px frame. Add a large circle with the Ellipse tool and duplicate it to create background layers. Use contrasting colors to identify the stages of the animation. Duplicating frames and adjusting the size of objects in some frames makes it easier for Figma's Smart Animate feature to interpolate the intermediate frames.
Adding the star shape Use the Star tool to create a central shape that acts as the focus of the animation. Duplicate the star across all frames and vary its size and radius in the intermediate frames to achieve a smooth expansion and contraction effect.
Organizing assets for animation Organization is key. Name each shape identically across all frames so Smart Animate recognizes correspondences. Keep the layer order consistent and place secondary elements behind or in front according to the expected movement. Small circles or ornaments can move from behind the star to final positions to create dynamism.
Creating the animation in Figma Switch to Prototype mode and link the frames sequentially. Select the interaction between each pair of frames using the Smart Animate option and define appropriate duration and easing. Connecting the last frame to the first enables continuous loops ideal for microinteractions or loading states.
Exporting to Lottie with LottieFiles Install and open the LottieFiles plugin in Figma. Add a flow if it does not exist and select the sequence you want to convert. The plugin will generate a preview and allow you to save the animation to your LottieFiles account. Keep in mind that there may be saving limits depending on the plan, and it is good practice to reserve final exports for definitive versions.
Texts and loading-type animations To animate text integrated with visual indicators, create a component with variants representing each state. For example, for loading dots, create variants where the dots change opacity or position with controlled gaps. In Prototype, link variants and apply Smart Animate so the transition between states is smooth. The LottieFiles plugin allows you to preview this animation and export it as Lottie.
Usage and limitations within Figma Figma does not natively play Lottie JSON files. You can insert animations saved as GIF or MP4, but importing MP4 may require a subscription. If your animation comes from After Effects, you can export it as a larger GIF and then import it into Figma for mockups and presentations.
Technical tips and best practices Keep names and layer structure consistent across frames. Avoid rasterizing elements you need to animate as vectors. For animations intended for mobile apps, optimize the number of objects and use simple shapes and paths to reduce the JSON size. Verify font compatibility and consider converting text to outlines only if necessary to preserve appearance during playback.
How we can help at Q2BSTUDIO At Q2BSTUDIO we are experts in custom software development and in creating tailored applications that incorporate animations and microinteractions optimized for production. We offer comprehensive services that include custom software, Lottie integration in applications, artificial intelligence consulting and AI for businesses, and protection through advanced cybersecurity.
Cloud services and applicable analytics For clients who need scalability, we deploy infrastructures on aws and azure cloud services, ensuring secure and automated deployments. We also deliver business intelligence services and solutions with power bi to turn data into actionable decisions, and we design AI agents and artificial intelligence solutions to automate workflows and improve user experience.
Integration, optimization, and security If your project requires incorporating Lottie animations into a native or web app, Q2BSTUDIO develops the integration, optimizes performance, and ensures delivery through secure pipelines. Our cybersecurity offering protects both the development process and the cloud infrastructure, and our business intelligence and power bi specialists help measure impact and adoption.
Call to action If you want to take your Figma prototypes to real productions with efficient and secure Lottie animations, contact Q2BSTUDIO. We can design custom applications, implement aws and azure cloud services, deploy artificial intelligence solutions and AI agents, and protect everything with best practices in cybersecurity. Improve your users' experience with optimized animations and data-driven decisions with power bi.
