Artwork by Matt Rae
Adobe XD supports various types of media, from imagery and vector graphics, to music and audio files, to make designing and prototyping stunning digital experiences effortless.
In this guide, you’ll learn how to leverage two of these media types, video and Lottie, to prototype a social video sharing application similar to TikTok and Instagram Reels. Download the starter file, and open it in Adobe XD to follow along with this tutorial.
Adding video and Lottie to Adobe XD
Before you get started on the tutorial, it is helpful to understand how video and Lottie media function within Adobe XD. Just like images and vector graphics, video and Lottie files can be dragged onto the canvas from your computer’s file system. Once on the canvas, the file can be moved into place, and settings can be adjusted from within the Properties Inspector in Design mode.
In the same way as with images, dragging one of these file types onto a vector shape or path will automatically mask it within the bounds of the shape, making it easy to fill placeholder shapes with video and Lottie content. This can be very helpful when populating a wireframe layout with high fidelity assets. Once a video or Lottie file has been added into a shape, double-clicking the mask will allow you to adjust the positioning of the file within the mask.
Adobe XD currently supports MP4 video files 15MB in size or smaller to optimize for speed and performance. Lottie files are accepted in JSON format, and can be downloaded from LottieFiles or exported from Adobe After Effects using the LottieFiles plugin for After Effects.
In the starter files provided above, you'll find a folder with several video and Lottie files available for use within this tutorial project.
The starter file provided includes a number of assets, components, and UI elements that you will be using to design and prototyping a mobile video experience to browse short video clips. This guide will focus on adding video and Lottie files, so you will find several pages already laid out and ready to work with.
Creating the app login flow
The first experience to create is the login flow where users will begin their journey with this mobile experience. This flow will start with the app logo animating on the start screen, then will proceed into a login sequence that includes a video auto-playing in the background.
Animated app logo
Start by locating the Animated Logo component from the document assets panel and dragging an instance onto the first screen, replacing the placeholder rectangle in the middle of the artboard. This component includes a Lottie file that was created in After Effects and imported into Adobe XD.
To ensure the logo animation automatically plays, the playback settings need to be updated in the Properties Inspector. Under the Interactive Media section, select Play automatically from the drop-down menu. Previewing the design will show that the Lottie animation automatically plays when the preview window is opened.
Since this logo animation simulates an app load, the prototype should advance to the next screen once the animation is complete. To do this, select the Lottie animation once again, and toggle into Prototype mode. Select the + in the interactions menu, and add a new interaction with the End of Playback trigger. Do not override the Time trigger as that interaction is what triggers the animation to play automatically.
With End of Playback selected as the trigger, set the destination to the first screen of the login flow (Home Screen Loading). This will allow the prototype to progress once the animation completes.
Background video
The next step is to add in a video file as the background to the signup flow. Since there are several screens for this signup flow, it is helpful to set up the background on one screen, then copy and paste it to the others.
On the first screen, select the layer Video Placeholder from the Layers panel, and move it to the top of the stack (this makes it easier to add the video, and can be done with keyboard shortcuts). Then drag in the file HomeScreen.mp4 from the sample files folder, and place it in the rectangle shape (release when the rectangle turns blue).
Double-clic into the rectangle to adjust the mask as necessary. Once in a position that you’re happy with, navigate to the Properties Inspector and open the video settings. In this case the video should loop, so clic on the Loop toggle to enable. Select Play Automatically in the video settings drop-down menu.
Now copy this video element to the clipboard, select the remaining artboards in the signup flow, and paste it (XD will automatically paste to all selected artboards).
Finally, move each instance to the back of the layer stack on each artboard (this can be done with keyboard shortcuts, ‘Shift + [‘ ). The artboards in this signup flow have already been connected together with Auto-Animate, so on preview, clicking through will reveal that the video plays automatically and remains playing as the prototype is navigated. On the last two artboards, set the playback for the video to No Playback, as the video won’t be visible on these screens.
Creating the loading indicator
Once signup is complete, the app will appear to load and then transition into the home page of the app. To create this, another Lottie animation can be added to the screen between signup and home.
On the artboard titled App Loading - drag in the Loading Indicator Lottie file from the document assets onto the placeholder rectangle. Using the same approach as the animated logo, set the animation to Play Automatically, and once playback is complete, navigate to the Mid Phase artboard, which will automatically then transition to the Home Screen.
To create a smooth transition from the previous screen, place a copy of the loading indicator on the last screen of the signup flow, but reduce the size, and set the opacity to 0%. When the page transition occurs with Auto-Animate, the loading indicator will appear to expand as it begins to play.
Creating a vertical video carousel
With the signup flow complete, the main home screen of the application can be completed. This screen acts like a vertical video carousel that scrolls to the next video once playback is complete. This carousel will be created similarly to image based carousels using Adobe XD to create an interactive element. However, in this situation, video playback will be controlled to play a single video at a time and automatically advance the carousel when a video is complete.
Create the video components
The components for this element have been created already, find the Main Component within the components section of the practice file. An instance has been created for each of the four videos to be included in the feed.
Start by selecting the first instance labelled Post Element and selecting the placeholder image rectangle like you did before. Drag in the video Berg.mp4 from the asset folder and adjust the mask as desired. Don’t worry about adjusting any other settings yet as those will be adjusted in each state of the component.
Repeat this step with the other three instances on the page, adding the videos Walk.mp4, Dive.mp4, and River.mp4 into one of each of the video placeholders.
Finally, compile each of these video elements into a component by stacking them vertically one on top of the other, and forming a component called Video Feed.
For this video feed, there will be a drag action to progress to the next video, as well as an automatic progression at the end of video playback. To achieve this, rather than using component states, individual artboards will be used, and the positioning of the component will simply move up and down, based on which video will be playing.
Position the compiled component
Start by taking an instance of the compiled component (since each one will have overrides) and placing it on the first artboard for the home feed. Using the square bracket keyboard shortcut, or the Layer panel, position it at the bottom of the layer stack, and ensure the top of the component (first video in the stack) is in place at the top.
Next, double-clic into the component and set the video playback for the first video to Play Automatically. For each artboard, only the video in view should be set to Play Automatically, so make sure that you’re applying these changes to instances of the compiled component, and not the main component.
Prototype video interactions
Finally, to connect the videos together you’ll create two interactions on each one. The first interaction will be on the video itself - on the first video, select the video in the Layers panel. In Prototype mode, set a new interaction with the trigger of Playback End, and a destination of the next artboard in the seriales. Use Auto-Animate as your action type, and select an easing of your choice. This interaction will automatically navigate to the next video once the first video completes playback.
In cases where a video is long, or a user wants to skip and move to the next video, a Drag interaction can be added. To do this, select the compiled video component itself and in Prototype mode, add an interaction with a Drag trigger. Once again using Auto-Animate, select the next artboard in the seriales. Now as a user drags up on the video component, the prototype will animate the videos scrolling up and progressing to the next video.
Connecting the rest of the application
Additional artboards are available on the canvas, complete with videos embedded in them. Try experimenting with these provided assets to create a video detail view from the profile page or create your own assets to finish out the video application experience.
Learn more about prototyping with Adobe XD and how to create other experiences like this with these prototyping tutorials.
