For those of us that work with Figma, we all know that it prides itself on bringing together powerful design features and a more efficient workflow. Here at LottieFiles we share the same feeling and that's exactly why we wanted to create a plugin to do just that for Figma users.
When it comes to design, Figma is one of our top choices and we use it pretty much everyday. After seeing a couple of Tweets from some of our followers, it became pretty clear that an integration between Figma and LottieFiles could really help users. So off to the drawing-board we trotted, and after a couple of late nights and many cups of coffee, LottieFiles for Figma was developed.
Here's what you can do with it.
Working towards optimzing a user's workflow is a focal point here at LottieFiles, so as we considered the Lottie animation process and where it sits within Figma, it made a lot of sense to enusre that you could access all your privately previewed Lottie animations straight from within the plugin.
LottieFiles plays host to thousands of high quality Lottie animations, all of which can be scaled up or down without pixelation. From within the plugin, just search for the animations you're looking for to incorporate them into your designs.
Whether you're looking for readymade SVG drawings to use in Figma or looking to design products with Lottie animations in them, this feature makes both super easy for you to do. If you're not choosing a Lottie from the LottieFiles public library, you can also do this with Lotties from your own private files on LottieFiles.
How to add a SVG animation layer:
As you create a blueprint for development, using the plugin you can convert your chosen Lottie to a GIF. This is super useful when you use Figma's prototyping feature to help you get an idea of how things are going to play out...literally. Stakeholders can also get a better demonstration of the product in action and if they don't like the animation they see, the plugin makes sure a library of choice is just a few clicks away.
To add a Lottie animation as a GIF: