By Howard Pinsky
Hey everyone! I'm Howard Pinsky, Senior XD Evangelist here at Adobe. And today we're going to take a look at adding video and Lottie animations to your prototypes to bring them to all new levels. Let's get to it.
Here we are in Adobe XD with a gaming platform I've been designing. And, to further bring this experience to life, let's add in some video and Lottie animations. Over on the Home screen, I currently have a nice large featured image at the top, but it's feeling quite static. Adding videos to an XD project is very similar to photos. They can be dragged directly onto the canvas, or into a blank shape to be masked. And once added and selected, you'll notice video playback options within the Properties Inspector. Here, you'll not only be able to control when the video plays... in this case, automatically when the preview is launched. But clicking the icon to the left will reveal a HUD with even more controls, including the ability to set a custom thumbnail, scrub and preview the video, turn on or off audio, trim, which we'll get to in just a moment, and loop playback.
So now that we've added in a video and chosen when it plays back, launching the preview will let us see it in action. And with just that single addition, our prototype has a whole new life. Before we take a look at adding Lottie animations, let's switch over to one of the other states within this featured component. Here, I have another video that automatically plays. But as you can see from the preview, it takes a few seconds for the aircraft to enter the shot. When we took a quick look at the HUD a few moments ago, I mentioned that there was a way to trim your videos. Entering this mode will let you set the start and end points by dragging on the handles. And in this case, I'll want the playback to kick off right before the action begins. And when everything is set, the checkmark will apply those changes. It's good to note that trimming is completely non-destructive, so you can always return to the HUD to adjust or undo your edits.
Switching back over to the default state, I'll launch the preview one more time. And now, when I click through to the second state, the video automatically plays back at the new start point. I've also wired up a third video. And if I head back to the first, there's an expanded view which reveals more information. And you may even notice that videos that are present between Auto-Animated states play back continuously without interruption.
All right, let's take a look at Lottie. Over on the Community screen, I've set up a component that's revealed on hover. And within that, I've roughed in an additional area, which I'd love to use for an animated emoji picker. Let's edit the main component so we can add in our content. Jumping into the stacked group, I'll quickly duplicate the existing layer a few times, then switch over to Finder, where I have adorable Lottie animations of various emojis created by Anna Movin over at ui8.net. Just like with videos, Lottie files can be dragged directly onto an existing Lottie layer, straight onto the canvas, or masked into shapes to define their size. And when the layers are selected, the playback can be set over to the right. And for all of these, we'll want them to play back automatically. One thing to point out here is that, unlike with videos, the icon to the left is strictly to control looping, which we'll want for these interactions. Perfect.
Switching back over to the default state on this component, we can now preview the Community screen. Hover over the message, then hover over the emoji icon to reveal our Lottie animations and see them in action.
Before I show you the complete prototype, let's take a quick look at the End of Playback trigger, which can really help automate some of your video and Lottie interactions. Earlier, I gave you a glimpse of the featured component's expanded state. And within this section, I have a button, which leads to a download state. Here, I've included a Lottie animation that immediately kicks off after the transition. But the question you may be asking yourself is, what happens after the animation is complete?
Switching over to Prototype mode, you'll see that there's currently a Time trigger attached, but we can add a second interaction by clicking on the blue plus button. This will now let us choose the End of Playback trigger within the Properties Inspector, which will instruct XD to perform the transition after the video or Lottie animation completes. And for this interaction, a simple transition leading to the Play state should do the trick. This trigger also works across artboards. Within the loading state of the same component, I added in another Lottie animation. And in addition to the Time trigger, there's an End of Playback trigger leading to the Game screen. Of course, none of this means much without seeing it all in action. So back to the default state, I'll launch the preview, expand this view, then kick off the Download interaction. And thanks to the End of Playback trigger, the component automatically transitions to the Play state, where I can now click to launch the loading animation. And when that completes, the artboard transition takes place.
These few examples are just scratching the surface of what can be done with video and Lottie. And I'll be covering many additional use cases in future tutorials. But before we wrap up, here's a look at the entire experience. Enjoy.
Give your prototypes a whole new life with motion graphics. In this tutorial, you’ll see how to design a gaming platform with video and Lottie animations. Drag video and Lottie files directly onto the design canvas, or onto a blank shape as a mask. Adjust video playback options in the Properties Inspector. Add a thumbnail, scrub and preview videos, enable audio, trim video clips, and loop playback. Wire up interactions with Auto-Animate transitions and watch videos play without interruption. Make interactions using the End of Playback trigger to automatically transition to another state when a Lottie animation finishes playing.
