[Last updated: 10 May 2024]
LottieFiles for Figma is not just another tool in a designer's toolkit; it's a revolutionary game-changer. As a seamless bridge between the intricate designs of Figma and the fluid animations of Lottie, this plugin transforms static designs into production-ready animations easily ever since the introduction of Figma to Lottie.
If you’re still new to the Figma to Lottie feature, check out these blog articles before you get started:
- Figma to Lottie: Create Production-Ready Animations with Figma & LottieFiles; and
- How to Create Production-Ready Lottie Animations with Figma to Lottie.
Since its launch, we understand that Figma to Lottie has become a critical tool for many. This is why we are continuously striving to roll out updates to the feature to give you the best tool in creating awesome Lottie animations.
So, here is a list of all the latest updates to the Figma to Lottie feature on the LottieFiles for Figma plugin.
1. Text Support
With text support, users can now unleash their creativity by creating captivating and awesome animated text effects with a wide range of font variations to choose from.
2. Gradient Support
Add layers of depth and realism to your animations. With gradient support, you have the ability to incorporate both linear and radial gradients, adding an extra layer of depth that amplifies the visual impact and makes your designs pop even more.
3. Boolean Shapes Support
Give shape to your creative thoughts! Figma to Lottie also supports boolean shapes, enabling you to animate designs made using union, subtract, intersect, or exclude functions seamlessly.
4. Vector Mask Support
Breathe life into your intricate designs! With vector mask support, this lets you selectively hide or showcase content layers. The result? Complex visual effects that add a unique flair to your animations.
5. Trim Path Feature
The trim path feature lets you animate stroke layers, transforming your design into eye-catching motion graphics seamlessly.
6. Speed Control
March to the beat of your own drum! With the speed control feature, you can customize your animation speed. Whether you want to race through or take things slow, it’s all in your hands.
7. Preset Controls
More control equals more precision. Introducing preset controls in Figma to Lottie. Tailor the duration of your animations and explore a host of other controls. Choose the Linear setting for sequential layer animation, or opt for Parallel to kickstart all layers at once.
8. Stroke gradient support
Your colors need a bit more color. We’ve added support for stroke gradients! You can now add linear and radial gradients to the stroke property. Stroke gradients are also supported by our presets.
9. Nested frames and group rotations
Two of the most requested features have been introduced: nested frames and group rotations. With these new updates, you can now animate frames within frames and with group rotations, you can now avoid individually moving layers. Simply group them and rotate them all at once.
10. Auto layout
Auto layout has arrived! Now the LottieFiles for Figma plugin will render your designs with auto-layout accurately. Play with auto-layout direction, wrap, and spacing to create fun animations.
11. Variant component
TThe new Figma to Lottie update support enables the creation of complex animation designs, offering detailed control over individual elements in scenes with single or multiple variant components.
12. Powerful smart animate
With Figma to Lottie, you can use the prototype features to create smooth animation flows that ease in, ease out, or even ease in and out with more powerful smart animate support.
13. Lottie Stickers on FigJam
If you're a Figma user, you've likely used FigJam, Figma’s collaborative whiteboard, to create diagrams, brainstorm, and organize ideas with your team. But it gets even better—now you can access our Lottie Stickers within FigJam. Insert delightful animations to infuse joy and dynamism into your designs.
14. 300,000+ premium animation
They say, the more the merrier. With that in mind, we've introduced premium Lottie animations to the LottieFiles for Figma plugin. Now, you can explore even more customizable animations to choose from, expanding the possibilities for creativity and style in your design projects.
Any questions? We also have a Help Center
For those times when you find yourself grappling with questions about the Figma to Lottie feature, we've got your back. Just head to our dedicated Help Center. From understanding potential limitations to tips on making the most of the tool, it's all there.
Check out the Figma to Lottie Help Center here: https://lottie.link/notion-figma-to-lottie-help-center
And if you need some inspiration on what you can create, check out this blog post: Get Inspired with 30 Days of Figma to Lottie. With that said, happy designing!