Artwork by Matt Rae
Prototyping with multimedia is made easy with Adobe XD and the available support for file types ranging from audio to video, images and Lottie. Leveraging these media types allows you to take your prototypes to the next level and craft immersive experiences efficiently and effectively.
In this guide, you’ll discover five ways you can leverage the power of video directly in your Adobe XD projects.
Adding video to Adobe XD projects
Adding video files to Adobe XD is as simple as adding imagery. Files can be dragged into the canvas from the file browser on your MacOS or Windows computer. Video files can be placed on the canvas or dropped and masked directly into any vector path or shape, making it incredibly efficient to build up from a wireframe layout or replace video files while iterating.
To learn more about how to work with video files within your Adobe XD prototypes, watch this tutorial that covers everything you need to know about video.
Ways to use video in Adobe XD prototypes
Video can be used in many different ways in Adobe XD. From simple website landing pages to intricate gaming platforms, video can play a powerful role in creating a robust experience. Here are some examples of how you can leverage video in your own experience design projects.
Website landing pages
When crafting landing pages for new products, services, or businesses it's common to leverage the power of video to create an enticing experience and draw customers in. With the ability to add video in Adobe XD, landing page experiences can now be prototyped in higher fidelity, creating a realistic experience for testing and validation.
Adding video to a hero section works just like it does when adding imagery, by dragging the MP4 file from your file browser onto the hero placeholder section. The video mask can then be adjusted and positioned exactly as needed.
When creating hero background videos, use the Play Automatically option in the Properties Inspector to set the video to play as soon as the preview of the page opens. Using the Loop Video functionality will allow the video to play on repeat in the hero section.
If the video starts with an empty frame or black screen, a poster image can be applied to the video or the video can be trimmed up to start with content on the screen. Configure these settings in the Video section of the Properties Inspector.
Product showcase and virtual demos
If you’re building an ecommerce website or shopping application, the way products are presented can make a big difference in conversion rates and sales. A common approach on product pages is to include a gallery with images and videos that showcase the product. Video clips help create compelling experiences that highlight items for sale.
Try adding video content to an image gallery carousel by dragging a video file onto an image placeholder. Set the video to Play on Tap to allow users to click the video to play and pause the content.
Social video applications
Short form video sharing on social media has become a dominant form of media, from Reels to TikTok, and features like stories are being integrated on many platforms. Prototyping these experiences is made easier with video integration in Adobe XD.
Creating a scrolling feed of auto-playing videos can be accomplished with components and states, paired with the drag gesture and Auto-Animate in Adobe XD. Stacking combinations of gestures and actions can create robust interaction experiences that mimic the real-world developed versions, allowing for more accurate testing.
Video integration also brings the End of Playback trigger to XD, allowing prototypes to advance, or perform additional actions once a video (or Lottie animation) has completed its playback. This trigger is used in conjunction with the Drag trigger to create an auto-advancing carousel of videos.
Learn how to apply these features and create a social video sharing experience like Reels or TikTok in this Adobe XD tutorial.
Designing video game interfaces
Along with Tap, Drag, and Voice triggers in Adobe XD, prototype actions can also be triggered by keyboard keys and game controllers -- opening the door to designing immersive experiences across many platforms.
Game development and design teams use Adobe XD to craft navigation and menu experiences and test those experiences using game controllers. With the addition of video playback, these experiences can be taken to the next level and create even more realistic and immersive prototypes before going to development.
Video integration allows teams to test full sequences, using video clips of game play, story development, and cinematic clips to build full journeys directly into an Adobe XD prototype. This allows you to test the full navigation experience of a chapter end to end. Paired with Lottie animations, prototyping and testing a video game design is now much easier.
Learn how to add motion to a gaming platform design with Howard Pinsky.
Crafting compelling presentations with video
Adobe XD is a fantastic tool for design teams to design and develop presentations. By combining Auto-Animate, audio and speech playback, and now video and Lottie animations, you can build and prototype a presentation deck easily, using your existing design assets.
Whether you’re crafting a pitch deck for a new design concept, showcasing the results of a user research study, or seeking buy-in from a client, building presentations with video content can add an engaging new level of fidelity.
Videos can be used as subtle background elements on title slides to add a sense of motion and excitement, or in the foreground as part of a welcome slide. Do this by setting the video on the background layer and using a rectangle or other shape with the desired transparency. Set the video to Loop and Play Automatically.
If you’re presenting a concept pitch, videos can be really handy to use as demo walk-throughs of a product or experience. Videos also work with Auto-Animate and will continue playing as they move around the screen or are resized, so you can have a video thumbnail that expands and plays in fullscreen mode quite easily.
From shopping experiences to gaming platforms, leveraging video in your design projects takes you one step closer to realistic. Without writing a line of code, the features in Adobe XD allow you to test, iterate, and validate your prototypes faster than ever.
