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

Today we’ll show you how to use the LottieFiles for Adobe XD plugin and interact with Adobe XD and After Effects. Our example will be an e-Commerce app prototype, where we’ll design an engaging and interactive interface to add user delight. So sit tight because you're about to find out how to trigger an animation from user input. Here are the exercise files for you to try out while going through the tutorial. So let's jump right into it.

  1. Let’s begin by adding an illustration or an icon to Adobe XD. To add the best icons and illustrations to your artboard, get the Iconscout for Adobe XD plugin for FREE!
  2. Now we’re gonna move the selected illustration to Adobe After Effects. To do so, select ‘File’ and choose ‘After Effects’ from ‘Export’ options. Easy peasy, lemon squeezy! This will migrate all the layers of the selected illustration to After Effects.
  3. In After Effects, we’re gonna analyze the different layers of the illustration. So make sure to choose a background layer in a contrasting color and place it at the bottom to see the different layers clearly. With that done, you can delete the 'Group Layer.'
  4. Next up, identify similar illustration elements and pre-compose them together as per your preference. This will help you work quickly.
  5. Now it’s time to add keyframes and animations to your pre-composed groups. This is where the magic happens, so go all out here!
  6. Once you're satisfied with the animation you’ve just created in After Effects, it's time to export it with the LottieFiles for Adobe After Effects plugin. In the window menu in Adobe After Effects, you’ll find it under the ‘Extensions’ section. If you haven't got it yet, download it now! Additionally, you can find and try all of LottieFiles' plugins here.
  7. Once the plugin opens, select the composition you’d like to render. But before you render it, remember to hide the background we created in Step 3 to get a transparent animation.
  8. Hit 'Render' and choose whether you'd like to save the animation as a JSON file or upload it to Lottie Library. We’ll choose to upload it to the Library since it’ll add the animation to our Private Animations, allowing us to access it anywhere and across devices. Once uploaded, the animation is ready to be accessed from Adobe XD. Isn't that like magic?
  9. In Adobe XD, select LottieFiles for XD from the plugin menu and go to the My Lotties tab, where you’ll find the animation you just uploaded under the Private section.
  10. Select your animation and click on Insert as Lottie.
  11. We're almost done now. Click on ‘Prototype’ from the top menu in Adobe XD. We’ll then select the 'Place Order' button in the 1st frame of our sample, and link it to the 2nd frame. This will trigger the animation when the 'Place Order' button is clicked.
  12. Now preview your prototype press 'Place Order', and KABOOM! Your trigger-based animation is playing smoothly!
  13. Do you want to take it a step further and test it on your mobile? Let us show you how. Open the Adobe XD app on your mobile and test the animation in real-time.

We hope you enjoyed learning how you can use the LottieFiles for Adobe XD plugin and interact with Adobe XD and Adobe After Effects. Explore our blog and courses for more tutorials like these and take your level up your designing with LottieFiles!