Adobe XD and Lottie Animations: Everything You Need to Know

UPDATE (3 Jul 2023): The LottieFiles for Adobe XD plugin has been discontinued.

Motion captures attention.

That’s why it’s so effective for designing great user interfaces (UIs), keeping users engaged and increasing conversion.

The best part? It’s super easy to add motion to design prototypes with Lottie animations. The Lottie file format is lightweight, customizable and can scale up or down without losing quality. It can be used for micro-interactions, onboarding animations, interactive infographics, product explanatory demos, marketing animations, and much more!

Here’s what you need to know about working with Lottie animations in Adobe XD – and how the LottieFiles for Adobe XD plugin can help your design workflow.

Can you use Lottie animations in Adobe XD?

Yes, Adobe XD supports Lottie animations – you can add them to your artboards, control their playback and use them to set up complex interactions.

Imagine designing a fitness app prototype in Adobe XD – you’d like to add animated characters to engage the users, or delightful graphs to show workout progress. You can use any public animation on LottieFiles that fits your theme…for free!

You don’t need the LottieFiles plugin to start using Lottie animations in Adobe XD. But the plugin does make it super easy to add free Lottie animations, as well as speed up your workflow when you design with motion. Read on for more details about the plugin.

What is the LottieFiles for Adobe XD plugin?

The LottieFiles for Adobe XD plugin allows all creative professionals working in Adobe XD to incorporate motion in the design process, completely free. As a visual or product designer, this plugin helps you search and add free Lottie animations to your artboards – so you can create stunning animated prototypes, fast.

Here’s what you can do with the LottieFiles for Adobe XD plugin:

• Access free animations – You can search from thousands of free animations in LottieFiles, covering every industry or topic – whether it’s a loading animation, a micro-interaction element or an animated character. These animations are free to use without attribution (although it would be appreciated!).
• Access your private animations – If you’ve uploaded private animations to your LottieFiles account – for example, by customizing animations with the Lottie Editor or exporting them from Adobe After Effects – you can access them directly in the plugin. There’s no need to waste time switching to a different app.
• Import any Lottie JSON file – Want to import a Lottie animation that isn’t hosted on LottieFiles? No worries, the LottieFiles for Adobe XD plugin also lets you import Lottie JSON files stored locally on your computer or by inserting a URL of your file.
• Create designs that look like the final product – Include Lottie animations in your designs, and instantly preview them any time to make sure they look right. You’ll no longer have to explain to your stakeholders how your final product would look like – you could just show it to them. This could reduce guesswork, as well as rounds of feedback and changes, potentially speeding up the design process.

Eager to start using the LottieFiles for Adobe XD plugin? Here’s a short walkthrough to take you through the plugin’s installation and main features. If it gets too technical, no worries – just tweet us at @LottieFiles, and help will be on the way!

How to install the LottieFiles for Adobe XD plugin

To use the plugin, make sure you have Adobe XD installed (if you’ve gotten this far, we’ll assume you already have it!). As any other Adobe plugin, you can get it from the Adobe Exchange portal or from our website:

• Go to LottieFiles for Adobe XD.
• Click Download.
• Choose Windows or macOS.
• Click Download and follow the installation instructions.

The LottieFiles for Adobe XD plugin should now be installed. To access it, select the Plugins menu in Adobe XD – this is the same place where you’ll find all your other XD plugins. If you haven’t done so yet, you’ll have to register for a free account at LottieFiles to connect to the plugin.

How to add Lottie animations into Adobe XD artboards

So how do you use the LottieFiles for Adobe XD plugin? We’ll dive a bit into the technical details – but we promise it’ll be fun. Here’s how to search, add and edit Lottie animations in Adobe XD.

If you already have the LottieFiles for Adobe XD plugin installed, go to Plugins and click LottieFiles for XD.

• There are three ways to get Lottie animations with the plugin:
• Click to search for free Lottie animations.
• Click to your private animations hosted on LottieFiles.
• Click to import a Lottie JSON file stored locally or from a URL.

• There are two ways to add a Lottie animation to your artboard:
  • Click and drag the animation into your artboard.
  • Click on the Lottie animation, then click Insert as SVG or Insert as Lottie.

You now have a Lottie animation in your Adobe XD artboard! Like any other object, you can resize, reposition and even add 3D Transforms for depth. To preview it, click on the Desktop Preview button on the top right-hand corner of Adobe XD.

Prefer to learn by watching instead? Watch this video tutorial to learn more about how to add Lottie animations in Adobe XD.

How to customize Lottie playback options in Adobe XD

In Adobe XD, you can control when a Lottie animation will play. This can be useful if you only want it to play on certain user interactions – for example, animating a character when the user taps on it. Here’s how to set it up:

• Select the Lottie animation.
• Under Animations in the right-hand panel, choose one of the following:
• Play automatically – this sets a Time trigger for the animation, with a delay of 0 seconds.
• Play on tap – this sets a Tap trigger for the animation. You can specify three options when the user taps the animation: toggle play/pause, play or pause.
• No playback – this removes any triggers that would play the animation.

You can also use Lottie animations in more complex interactions. For example, you could trigger its playback after an action takes place, or even trigger an action after a Lottie animation finishes playing. To learn more, check out this video on how to trigger a Lottie animation when you transition from another artboard in an e-commerce app.

How to export a Lottie animation from Adobe After Effects to Adobe XD

Finally, let’s go over how to get your animations from your motion design tool to Adobe XD. The LottieFiles for Adobe After Effects plugin can help bridge that gap.

• Download the LottieFiles for Adobe XD plugin.
• Open your composition in Adobe After Effects.
• Click Window > Extensions > LottieFiles.
• Click the green arrow button next to your composition to render it into a Lottie animation.

• Click Upload to save this under your private animations in LottieFiles.
• Open Adobe XD. If you don’t already have it installed, download the LottieFiles for Adobe XD plugin.
• Go to Plugins and click LottieFiles for XD.
• Click My Lotties.

Under My Lotties, you should see the animation you’ve just exported from Adobe After Effects.

To learn more, check out this video on how to create a Lottie animation in Adobe After Effects, then export it to Adobe XD – or check out a written version of this tutorial here.

Get the LottieFiles plugin for other design tools

Want to add the magic of motion into your designs, but don’t use Adobe XD? No worries. LottieFiles integrates with other popular design tools – such as Figma, Protopie and Framer X. Check out LottieFiles’ full list of plugins and extensions here.

To learn more about adding motion to your design prototypes, check out these how-to articles and YouTube videos.