Live testing prototypes with Adobe XD

When it comes to realistically testingdesign prototypes, the virtual environment is often not enough. Actual feedback from real devices can be crucial to the success of your project. In this tutorial, I will show you how to pull a livepreview of your prototypes directly using AdobeXD and the accompanying app on your smartphone or tablet. This way, you can test your designs directly on the devices for which you created them.

Key insights

• You can view prototypes directly on your device via USB or the cloud.
• The Adobe XD app is available for free in the App Store and Google Play Store.
• This allows you to gather feedback and test adjustments live.

Step-by-step guide

1. Calling up the prototype

To view a prototype in Adobe XD, you will first use the play icon in the upper menu bar. This icon allows you to view your prototype live at the resolution for which you created it and click through. It’s best to use the timestamp 5 seconds to truly immerse yourself.

2. Installing the Adobe XD app

For the live preview on your smartphone or tablet, you need the Adobe XD app. This is available for free in both the Google Play Store and Apple’s App Store. Download it for free and don't be confused by the fact that it is sometimes called iTunes – it’s the App Store! Make sure the installation is completed.

3. Connecting via USB

Once you have installed the app, connect your smartphone or tablet to your computer via a USB cable. Once the connection is established, you can make changes in Adobe XD, and they will appear on your device without delay. This is especially interesting if you want to conduct live test scenarios or demonstrations. Here you can continue working and use the live preview starting at 66 seconds.

4. Using the cloud

A flexible alternative to USB connection is storing your prototype in the Adobe Cloud. To do this, go to "File save as". Adobe XD defaults to saving in the cloud so you can access it later from any device. Uploading might take a few seconds, but you can track the progress in the top bar and see how quickly you get closer to the live preview starting at 130 seconds.

5. Accessing the prototype on the device

Once your prototype is saved in the cloud, you can open the Adobe XD app on your smartphone to access it live. You’ll quickly gain access to your uploaded prototype. Click on it to load the prototype and see how it looks on your device. Here is the demonstration for this, which you can find at 144 seconds in the video.

6. Interaction and feedback

In the app, you can navigate through your design and have the opportunity to view every aspect optimally. A notification will appear if fonts are missing, which you can either ignore or possibly load through Adobe Fonts. Experiment with the prototype and click on various areas to simulate the user experience. This becomes particularly visible starting at 186 seconds.

7. Accessing menus

To call up the menu, simply tap on the screen with three fingers. This opens up a range of options, including the ability to share the screen, change settings, and more. Get an overview of the individual artboards you have created for your prototype, as explained at 226 seconds.

8. Completing the test

Use the live preview on your device to specifically see how your designs are received by users. When you present your prototype to someone, they will be thrilled to be able to play around with it themselves. Remember that the device should be in a clean state before passing it on. This ensures that your prototype appears in the best light. You can find information about this at 273 seconds.

Summary – Live Testing Prototypes with Adobe XD: How to Get Your Designs on Your Device

In this guide, you have learned how easy it is to test prototypes live on smartphones and tablets using Adobe XD. With just a few steps, you can present your designs in a realistic environment and gather valuable user feedback.