By Dani Beaumont
When you have only seconds to grab a user's attention, there's nothing like the immersive experience that video brings to an interface. With support for video in Adobe XD, you can seamlessly integrate it into your prototypes and bring them even closer to the real experience. To add videos to these product tiles I have here, all I need to do is drag the MP4 file from a folder on my computer. I could also select File > Import from the menu in XD or simply copy them to the clipboard and then and paste them here on the design canvas.
Without customising any of the video play options, I can preview them in the desktop preview app. Notice that the videos play when I click the tile. If I click the second video, the first one stops playing and returns to the beginning. And the same thing is true with the second. If I do want to customise the video, I can do so by selecting it, then in the Properties Inspector in the Video area, setting the Play options in the drop-down. To the left of that drop-down is a video modal window, where I can scrub through the video and trim it down if I'd like. I can also decide if I want to loop-back to the beginning once it's played to the end. Lastly, I can define a thumbnail or a default image that will appear when the videos not actively playing.
One of the best parts of video in XD is the way you can integrate it with other XD capabilities. In this example, I'd like to allow the user to toggle between the smaller tile view and more of a full screen video using Auto-Animate to smoothly transition between the two. I'll start by duplicating the artboard. Next, I'll hide the details that I don't want to show in the full screen view. I'll take the remaining content and resize and rearrange it for my full screen layout. With that set, I'll go ahead and wire the two artboards together while setting the Auto-Animate options. Back in desktop preview mode, notice how I can seamlessly toggle between the two layouts, while the video continues playing.
As usual, I've just touched on a few of the amazing ways you can include video in your XD prototypes. If you'd like to get your hands on some specific examples of the 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 the topic.
Adobe XD seamlessly integrates with video so you can simulate realistic interfaces and applications. In this tutorial, you’ll learn how to build immersive experiences by adding video to your projects. Choose File > Import, paste from clipboard or simply drag and drop MP4 files from your computer onto the design canvas. Customise how each video plays in the Video section of the Properties Inspector. Take your XD projects to the next level with video clips that play within interactions and Auto-Animate transitions. Download Adobe XD Lottie and video examples to learn more.
