<aside> 💡 To achieve the best results, ensure that you only use supported features.

To master your Figma to Lottie skills, enroll in our Figma to Lottie Certification program: Start Here

If you have any questions, please send us an email at [email protected]

</aside>

1. Layer Preservation Ensure every frame contains all layers in the same order. Do not remove any layers within a frame to prevent rendering issues. Instead, set their opacity to 0 to hide them. Make sure all layers are present in every frame in the same order. Work your way backwards from the final frame by hiding and moving layers.

2. Unsupported Features

   • To achieve the best results, ensure that you only use supported features.
   • Avoid using component instances from external libraries.
   • Refrain from utilizing color external libraries as they may not be supported.

3. Text/Number Layer Modifications: Altering the text copy within the same layer may lead to improper rendering. A workaround is to create two text layers and toggle their visibility based on which frame they should appear. Ensure that all layers maintain the same order for optimal results.

4. Inadequate Bounding Box Size Ensure that the bounding box for text or elements is sufficiently large to prevent clipping. Expand the bounding box without altering the component's size to avoid clipping of any parts, especially arrows.

5. Gradient Fill Compatibility:

   When applying linear or radial gradients, ensure consistency across all frames. This helps maintain the integrity of the gradient fill during the conversion process.

6. Smart animate support:

   While the plugin offers Smart Animate functionality, it may not currently support all its features. To understand the extent of supported features, please check out this list of supported features.

7. Set a Prototype Flow A frequent mistake is linking the frames to each other without setting a flow starting point. While the multi-select then export to Lottie method may work, it is best practice to set the prototype flow to ensure accurate animation rendering. To set a prototype flow:

   1. Click on the first frame.
   2. Go to Prototype > Flow starting point to set it.
   3. In the plugin, choose the new flow from the dropdown menu instead of "Export to lottie."
   4. Render the animation with the proper flow settings.

Top 5 Tips for Animating with LottieFiles for Figma

https://youtu.be/xawbY5A4miI?si=YybUe9W13lOcXsu4

🔽 Here is a sample Figma file to get you started.

https://www.figma.com/file/2lUSwCT0AMLUlqTwjQveG9?embed_host=notion&kind=&node-id=0:1&t=mIcPhF6jYdlUG3jO-1&type=design&viewer=1