# How to Add Animations and Prototype with the LottieFiles for Figma Plugin *By LottieFiles · October 21, 2022* Animate in Figma, as easily as drag and drop. --- If you work with Figma, you’ll know that it prides itself on bringing together powerful design features and an efficient workflow. At LottieFiles, we share the same sentiment – and that's why we wanted to create a plugin to do just that for Figma users. The [LottieFiles for Figma plugin](https://lottiefiles.com/figma) offers an easy way to add animation or motion design elements to Figma. And as a designer, there are compelling reasons to animate your designs or prototypes: - **Create engaging animated designs** - [Animation helps](https://lottiefiles.com/why-motion) create more effective, engaging and emotionally moving designs. - **Create realistic prototypes** - If your website or mobile app includes animation, including them in your [prototypes](https://lottiefiles.com/blog/working-with-lottie-animations/lottie-animations-high-fidelity-prototypes) means being able to show your stakeholders what the final product will look like. Ready to get started? Here’s a guide to installing LottieFiles for Figma, how to add and edit animations, and finally, how to use it to create awesome animated prototypes. ## **How to install LottieFiles for Figma** - Head to [LottieFiles for Figma](https://lottiefiles.com/plugins/figma). - Click **Install LottieFiles for Figma**. - In the Figma community page, click **Try it out.** - You’ll see a new Figma file open, and an option to run the plugin. - Click on the kebab menu next to the **Run** button to save the plugin. ![Save the LottieFiles for Figma plugin](https://blog-cdn.lottiefiles.com/2022/10/screenshot-of-saving-the-LF-plugin--1-.png) Now, whenever you’d like to access the plugin in Figma, you can right-click > Plugins > LottieFiles. ## **LottieFiles for Figma plugin features** Here’s what you can do with LottieFiles for Figma: ### **Get free Lottie animations** ![Free Lottie animations on the LottieFiles for Figma plugin](https://blog-cdn.lottiefiles.com/2022/10/screenshot-of-discover-tab-in-the-figma-plugin.png) The plugin gives you quick access to thousands of free Lottie animations. Use them in your personal or commercial projects. ### **Access your private or team’s Lottie animations** ![Access your private or team’s Lottie animations](https://blog-cdn.lottiefiles.com/2022/10/screenshot-of-workspaces-tab-in-the-figma-plugin.png) Optimizing your workflow is important to us at LottieFiles. So as we considered the Lottie animation process and where it sits within Figma, it made sense to ensure that you could access all your Lottie animations straight from within the plugin. This includes any Lottie animations in your team or private workspaces – access animations your team has exported from [Adobe After Effects](https://lottiefiles.com/plugins/after-effects), as well as any public Lottie animation that are saved in your workspaces. ### **Add Lottie animation frames as static SVGs** ![Add Lottie animation frames as static SVGs](https://blog-cdn.lottiefiles.com/2022/10/Add-Lottie-animation-frames-as-SVGs.gif) Want to insert a Lottie animation as a static image? This can be useful if you need to use a specific frame as an illustration, or if you want to add an animation, but need to set a default static state (more on that later!). Here’s how to insert a Lottie animation as an SVG: - Click on any animation in the plugin. - Choose a specific frame in the seek bar. - Click **Insert as SVG**. ### **Add Lottie animations as GIFs** ![Add Lottie animations as GIFs](https://blog-cdn.lottiefiles.com/2022/10/Add-Lottie-animations-as-GIFs.png) How do you add Lottie animations to Figma? Unlike [Adobe XD](https://lottiefiles.com/blog/working-with-lottie-animations/adobe-xd-lottie-animations-guide), Figma doesn’t directly support Lottie animations (yet!). No worries, you can still insert them as GIFs. This can be useful when creating realistic prototypes – instead of _telling_ your stakeholders how your prototypes will look and function, you can directly _show_ them with GIFs. Here’s how to add Lottie animations as GIFs in Figma: - Click on any animation in the plugin. - Click **Covert to GIF**. - Click **Add to Figma**. ### **Apply new colors in a few clicks** ![Edit Lottie animation colors](https://blog-cdn.lottiefiles.com/2022/10/screenshot-of-color-palette-feature-in-figma-plugin.png) With the LottieFiles for Figma plugin, you can instantly customize an animation’s colors with custom or curated color palettes. Use this feature to apply your brand’s color palette onto animations, or to rapidly experiment with different colors. Here’s how: - Click on any animation in the plugin. - Click **Customize**. - Click on any curated color preset to instantly change the animation’s colors. - Alternatively, you can create a new palette or generate one automatically. - Click **Save animation**. - Choose a workspace and folder to save the animation in, then click **Save**. - Now you can insert the animation as an SVG or GIF in Figma. ## **How to create animated prototypes in Figma with the plugin** Can you prototype animations in Figma? Absolutely! With Figma and LottieFiles, you can create realistic prototypes that look and function like the final products (psst, and it’s not that hard!). For example, here’s how to create an interactive prototype that displays a loading animation when you pull down to refresh the screen. Watch our full live stream below to learn how, as well as discover other animation tips. Follow along by getting the [Figma demo file here](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbUt3dm9Dbm9LdExpMU4xVVdlYzdkdWc0UVg5UXxBQ3Jtc0ttVElCLUt0a3JoRUcxRXRCQktwN043aWtrQjZhMmFzaV9KN3BhTFRUNGNkX2hNZUhMZGhCUUlPT3NfSWFCZElUOEtuOU5KbHdKOUFwUTE2U0VjbWFwQjl3YlRkczBnVmtIenFsdHRtMlZKOHFRSS1qSQ&q=https%3A%2F%2Flottie.link%2FFigma-Demo&v=sYkYpnCmA0E). [LottieFiles Figma Plugin 101 – Explore plugin features and how to create animated prototypes.‌‌](https://www.youtube.com/embed/sYkYpnCmA0E?feature=oembed) Don’t have time to watch the full live stream? Here’s a quick guide to setting up an animated prototype in Figma. ### **1\. Prepare states of your design** For this prototype, you’ll want to start with two states of your design. - One state represents the default screen (i.e. the first screen that the user sees) - The other state represents what the user will see after they pull to refresh the screen (i.e. the final screen that the user sees). ![Two screen states - one before refreshing the screen, and the other after refreshing](https://blog-cdn.lottiefiles.com/2022/10/In-the-live-stream-at-around-the-16_04-mark.png) ### **2\. Get animations from the LottieFiles for Figma plugin** In this tutorial, we’re going to add a loading animation. You’ll want to add the animation both as a GIF, and a static SVG version of it (you’ll learn why in a bit!). - Right click > Plugins > LottieFiles to run LottieFiles for Figma. - Search for a loading animation. - Choose a specific frame in the seek bar that represents its initial state, then insert it as an SVG. - Convert to GIF, then add it into Figma. ### **3\. Add the animations into the design** Now we’ll add the loading animation, as well as two more screens to represent the loading states. Follow the instructions below while referring to the screenshot. - A - In the default screen, copy and paste the SVG version of the animation. Set its Pass through to 100%. - B - Duplicate your default screen state. This should now be your second screen state. In this screen, move the content downwards, and add the SVG version of the animation. - C - Duplicate the second screen. This should now be your third screen state. Here, replace the SVG version of the animation with the GIF animation. - D - No changes needed to your final screen state. You should now have four states of the screen in total that look like this: ![The four screen states](https://blog-cdn.lottiefiles.com/2022/10/show-all-the-four-screens-that-appear-in-the-live-stream-at-around-20_14--1-.png) ### **4\. Wire up the interactions between screens** With all our screens set up, the only thing left is to stitch them together. For the first three screen states, you’ll want to click on the **Prototype** tab and add the following interactions: - From the default screen to the second screen - On an **on drag** interaction, **navigate** to the second screen - Use **smart animate** with an **ease out** of **300ms** ![Set up an interaction flow](https://blog-cdn.lottiefiles.com/2022/10/screenshot-of-the-live-stream-at-21_23.png) - From the second screen to the third screen - On an **after delay** interaction of 400ms, **navigate** to the third screen - Use **smart animate** with an **ease out** of **300ms** - From the third screen to the final screen - On an **on tap** interaction, **navigate** to the final screen - Use **smart animate** with an ease out of **300ms** And that’s it! You should now be able to preview your prototype. Go ahead and drag it down to simulate a refresh, and check out that sweet loading animation. ![Pull to refresh animation](https://blog-cdn.lottiefiles.com/2022/10/Final-Prototype.gif) ## **Use Lottie animations in other design tools** We hope this guide makes it easy for you to animate in Figma. But if you don’t use Figma, no worries. LottieFiles integrates with other popular design tools – such as Adobe XD, Protopie and Framer X. Here is LottieFiles’ full list of [plugins and extensions](https://lottiefiles.com/integrations). And if you ever feel lost, check out our huge library of [Lottie tutorials and courses](https://lottiefiles.com/education). [![Download LottieFiles for Figma](https://blog-cdn.lottiefiles.com/2022/10/LottieFiles-for-Figma--1-.png)](https://lottiefiles.com/plugins/figma) --- ## Related Articles - [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif) - [Introducing Motion Copilot 2.0 in Lottie Creator](/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator) - [Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool](/blog/working-with-lottie-animations/lottie-creator-a-powerful-web-based-lottie-animation-tool) - [Introducing Motion System: One Workflow for Animation That Actually Ships](/blog/working-with-lottie-animations/introducing-motion-system-one-workflow-for-animation-that-actually-ships)