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.

Access Your Private Lottie Animations

Working towards optimizing 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 ensure that you could access all your privately previewed Lottie animations straight from within the plugin.

Access the Lottie Animations Library

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.

Add Lottie animation frames as SVGs

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:

  1. Drag and drop your Lottie or select a free one from the LottieFiles library
  2. Using the player bar, select the animation frame you want to insert
  3. Click ‘Insert as SVG’

Prototyping Enhanced with Lotties as GIFs

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:

  1. Drag and drop your Lottie or select a free one from the LottieFiles library
  2. Select the background color you want for your GIF
  3. Click ‘Convert to GIF’
  4. After the Lottie has been converted, click “Add to Figma’
  5. Use ‘Prototype’ to watch your designs in action.