By Dani Beaumont
When it comes to building an interactive experience with animations and screen transitions, you can end up wasting a lot of time, both prototyping the interaction, then, once it's approved, reproducing it in code. Lottie natively renders animations on websites or in applications. They're reusable across a wide variety of development environments like Android, iOS, Mac, Windows and the web... and thousands of times smaller than an animated GIF or MP4. Oh, by the way, they also work really beautifully in Adobe XD. Let me show you what I mean.
In this first example, I want to create an onboarding tutorial. But since it's for a scooter rental company with users that are on the go, I want to make sure it loads quickly. Lottie will be terrific for that. To add Lottie files to my design, I simply press and drag them from my computer directory or I could select File > Import from the File menu. I can place the Lottie file directly on the canvas or inside these containers to scale them all to the same dimensions.
Next, I'll move them up into position on the artboards and then preview my work in the desktop preview app. Notice how each animation plays as I tap to transition to the next artboard. Another nice way to use Lottie animations is to simulate a process, like a loading screen. When I place the Lottie file, I can control how that animation plays here in the Interactive Media area of the Properties Inspector. For this loading screen, I'll have it play automatically. When I switch over to Prototype mode, you'll notice I've defined two interactions from this first artboard to the second. The first is a Time trigger that tells the Lottie animation to play automatically. The second End of Playback trigger tells the prototype to transition to the next artboard in the flow, just when the Lottie animation completes. When I preview the flow, notice how the animation plays, then automatically transitions to the search results. The length of the Lottie animation determines how long that loading screen will appear.
I have just one more example I'd like you to see and that's using Lottie animations to show micro-interactions within component states on a single artboard. In this design, I have the video tiles. And to the right of each at the bottom, I've added a component. The component has two states: the Default empty state and then the Toggle state, which fills in the heart and behind it, plays the Lottie animation. The result is a terrific micro-interaction, as I toggle the heart on and off within each tile. Best of all, I've saved this out as a component, so I can easily reuse the animation throughout my design.
As usual, I've just touched on some of the amazing ways you can include Lottie animations in your XD prototypes. If you'd like to get your hands on some specific examples of this feature in action, make sure that you download and check out the XD Lottie and video example file linked in the description area below this video. Also, make sure that you check back here in the XD Learn Centre for additional videos and tutorials on this topic.
Quickly add animated elements and screen transitions to your XD projects with Lottie animations. In this tutorial, you’ll see how to import Lottie files to place them directly on the canvas or inside containers. Lottie animations are light-weight files that look beautiful, load fast and render natively in Android, iOS, Mac, Windows and on the web -- so they're perfect for adding motion graphics to your web and app prototypes. Import Lottie animations to your artboards and wire up interactions to simulate loading screens, animated buttons and compelling micro-interactions. Experiment with some Adobe XD Lottie and video examples.
