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.
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.
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.
Select any animation, then click on “Insert as Lottie”.
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
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”.
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
To import a local Lottie file, go to import and click ‘Browse’.
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
To import a Lottie file from a URL, go to import and select “open animations from URL”.
Head to LottieFiles and browse thousands of free animations you can use for your project. Select an animation and copy its URL.
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!
