By Howard Pinsky
Hey everyone! I'm Howard Pinsky, Senior XD Evangelist here at Adobe – and in this video we're going to take a look at a few use cases for Lottie animations, including landing pages, micro-interactions, and more. Let's get to it!
Here we are in Adobe XD, and to kick off our look into Lottie, let's start off simple with a landing page. To the right of the main content, there's a nice blank area that could use some visuals. Of course, we could throw in a still image and call it a day, but today, we're all about motion. Over in Finder, I have a few Lottie JSON files I purchased from UI8.net, and selecting one, I can drag it directly onto the canvas or into a shape to mask it. And since most Lottie animations are vector based, they can be transformed without losing quality. Occasionally you may find that the still thumbnail may look pixelated, but all should look right when previewing.
Now that our new asset is in place, you'll notice a section over within the Properties Inspector where you can control its playback – and seeing that we want the animation to kick off when the preview is launched, let's go with Play Automatically, then to the left, we have a button that will control looping, which we'll want for this interaction. Perfect! With that all set, launching the preview will let us see the landing page and animation in action.
The next use case we're going to explore is using Lottie for micro-interactions. Many of us have created simple components for toggles, buttons, and so on, but occasionally we need something more complex. Within these cards, I've added in a heart component which I'd love to jazz up with some animation. Making sure I'm editing the main component, I'll go ahead and add in a Toggle state, then change the color of the heart to red. Since Toggle states are automatically wired up, previewing will let me immediately interact with this component.
Now, to add some extra life to this element, let's hop into the Lottie Files plugin and search for something like confetti. Since your animations don't need to be present across all states, I'll switch over to the second and then drag it on in. It's good to point out that some Lottie animations deliberately start with a blank frame, so you may not be able to see its contents, but the entire frame remains active, so it can easily be transformed and moved into place. For this interaction, we'll want the animation to playback automatically, but we don't want this one to loop.
Before we take a peek, Toggle states are wired up with Auto-Animate, but seeing that none of the layers require movement, I'll quickly switch into Prototype mode, then from the default state, I'll change Type to Transition with no animation. And now, previewing will allow us to interact with our newly created heart, and because the edits were made on the main component, all instances can be interacted with, as well. I also used the same technique to create this button, along with the End of Playback trigger which you'll see in just a few moments.
One of the more common use cases for Lottie animations is onboarding flows. Here we have three screens that walk a user through the benefits of this application, and similar to the landing page example, relevant Lottie files can be brought in to add a visual aid. For all three animations, I'll want them to loop and play automatically, and once everything is set, the preview can be launched, where we can navigate through the flow and watch the animations playback beautifully.
As you're building out your interactions, you'll surely run into scenarios where you'd like a transition to take place after an animation has completed. On this artboard, I've designed a loading screen which contains a Lottie animation, but once it wraps up, it just sits there. Switching over to Prototype mode, you'll notice the existing wire which allows the animation to playback automatically. Clicking on the blue plus button, we can add in the End of Playback trigger, then down below, the destination can be set. This can be another state within this component or a whole other artboard, like the sign in screen. Auto-animate isn't required for this transition, so I'll stick with a simple dissolve. Now, previewing one more time, the animation starts playing like it did before, but this time, the End of Playback trigger transitions us to the next artboard.
And those are just a few ways you can use Lottie animations in your projects in Adobe XD. Hope you all enjoyed this video. Be sure to subscribe for more content, follow me on Twitter, and I'll see you all next time.
Learn strategies for using Lottie animations to add motion to your XD projects. In this tutorial, see how to add Lottie files to your landing pages, create compelling micro-interactions, and design onboarding flows. Control playback of Lottie animations in the Properties Inspector. For landing pages, you can set Lottie animations to play automatically and loop. Add Lottie animations to buttons, toggle switches, ratings, and more. Explore adding animated assets to the Toggle state. Use the End of Playback trigger and set the destination to display another state within a component or transition to a different artboard.
