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

Today we’re going to show you all the different ways you can import your Lottie animation into Adobe XD. Animation can help you create beautiful prototypes for your next web or mobile app project. And with the LottieFiles for Adobe XD plugin, you’ll be able to speed up your web design workflow and access thousands of free animations in seconds.

So are you ready? Let’s begin.

Watch the video tutorial: Adding Lottie Animations to Adobe XD

Watch Dan from LottieFiles take you through four different ways to import your Lottie animation into Adobe XD. Or scroll down for a written version of this tutorial! You can download the exercise files here if you want to follow along.

Get the LottieFiles for Adobe XD plugin

The first thing you need to do is to have the LottieFiles plugin for Adobe XD.

To do so, make sure that you are in the plugins tab and click on the plus icon. A new window will open. Search for LottieFiles, then click ‘get’ to install the plugin.

Screenshot of Adobe XD, focusing on the plugins tab. The cursor is hovering over the 'add' icon.

Method 1: Insert as a Lottie

Now, let’s enter our LottieFiles plugin. We suggest that you log in so that you can access your private and published Lottie animations.

Screenshot of the LottieFiles plugin for Adobe XD. The user is searching for 'bitcoin'.

In this example, we’ll go to ‘Discover’. Here, you will see different options to find the right animation. For example, if we want to search for an animation, let’s say, about ‘bitcoin’, we can just type that in and hit enter.

The user is viewing a Lottie animation with the LottieFiles plugin. The user is about to click "Insert as Lottie".

Select any animation, then click on “Insert as Lottie”.

A screenshot of Adobe XD, focusing on Desktop Preview button.

To preview the animation, just click on the Desktop Preview button (hint: it looks like a play button) on the top right-hand corner of the screen. And that’s how your Lottie animation will appear on your design, as simple as that!

Method 2: Drag and drop in Adobe XD

The user is browsing the 'Discover' tab within the LottieFiles plugin for Adobe XD

There are three tabs under ‘Discover’. The ‘All’ tab shows all the different Lottie animations that we have in the library. You can also browse through the ‘Featured’ and ‘Popular’ tabs. In the same way as before, you can select any animation and hit “Insert as Lottie”.

The user is dragging and dropping a Lottie animation into the Adobe XD artboard.

But here’s a small trick. You can also drag and drop a Lottie animation into Adobe XD. Just hover over the animation you want, click and drag it into your artboard.

Method 3: Import a Lottie file from your computer

The user is viewing the 'Import' tab in the LottieFiles plugin.

To import a local Lottie file, go to import and click ‘Browse’.

The user has selected a local Lottie animation file and is about to click 'open'.

Here, you can select any Lottie animation that you have on your computer. Once you’ve selected your file, just hit ‘open’.

Method 4: Import animation from a URL

The user is viewing the 'Import' tab within the LottieFiles plugin, and is about to click on the "Open Animation from URL" link.

To import a Lottie file from a URL, go to import and select “open animations from URL”.

The user is looking at a Lottie animation on LottieFiles.com. The user has copied the Lottie Animation URL.

Head to LottieFiles and browse thousands of free animations you can use for your project. Select an animation and copy its URL.

The user has pasted the LottieFiles URL in the URL field, and clicks 'Open'.

Come back to Adobe XD and paste the URL. Hit ‘Open’, wait for a moment, then click on “Insert as Lottie”. Your Lottie animation should appear in your artboard.

We hope you enjoyed learning how you can use Lottie animations in Adobe XD. If you’re looking to level up your design skills even further, check out our blog and courses for more tutorials!