Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Sharing and Getting Feedback in Adobe XD

6:49 with Hope Armstrong

Adobe XD has some built-in sharing functionality. In this video, we'll see how that works.

Tools

Adobe XD mobile apps for live previewing of prototypes

Syncing a project to your phone without Creative Cloud:

    1. Save your project anywhere on your computer.
    2. Connect your phone to your computer via a USB cord.
    3. In the desktop XD app, click the Preview on Device icon in the top right corner.
    4. In the tooltip, you should see your phone's name listed with a green checkmark next to it. That means you're ready to see it on your mobile device.
    5. Now, look at your mobile device and click the "Live Preview" tab.

    Link to Course Interactive Prototype

    Exercises:

Additional screen ideas:

  • Booking a Ride:
    • Select number of riders
    • Driver is approaching
    • Multiple destinations
    • Payment selection
    • Book ride
    • Fare splitting with other passengers
  • Scheduling a Ride:
    • Change in car availability
    • Change in price
  • Onboarding:
    • Signup process
    • App tour
  • Safety:
    • Report an unsafe driver
    • Emergency support (911)
  • Additional Features:
    • Support for those traveling with children - infant car seats and child booster seats
    • Routine commuter option
    • Share ride with other passengers on route
    • Social sharing with other passengers
    • Text ride ETA to a friend
    • Fun stuff like...the ability to choose the music in the car, food pickup, etc.

Further Learning:

Now that you have a few wireframes of the survey screen, 0:00 let's build out just one more screen so 0:03 we can test the transition between the map view and the survey screen. 0:05 This will set us up so 0:10 I can show you XD's super cool interactive prototyping feature. 0:11 I'm going to duplicate one of the survey artboards by selecting it and 0:16 holding down the Option and Shift key as I drag it to a blank spot on the canvas. 0:20 Select the popover and delete it. 0:26 Draw a route on the map or copy the one from the map in the wire's UX kit 0:40 Adjust the content in the bottom gray rectangle to show the ride is in progress. 1:35 Include the estimated time of arrival as well as the number of minutes left to 1:42 reach the destination. 1:46 Arriving on time is very important for users like Businessman Brian. 1:49 So it's important to provide transparency and set expectations around arrival time. 1:54 Finally, adjust the title to show the ride is in progress. 2:00 Now we're ready to add interactivity. 2:10 In the top left corner of XD, select the Prototype tab. 2:13 In this view, you can wire up interactions between artboards. 2:19 Select the art board that shows the ride in progress. 2:23 You'll notice it'll become blue and 2:26 an arrow button will appear on the outside of the art board. 2:28 Click that arrow and drag it to your favorite survey wireframe. 2:32 Release the click of your mouse when a blue rectangle appears around 2:36 the perimeter of the art board. 2:40 A window will appear, which will allow you to adjust the transition settings. 2:42 Keep everything as the default for now. 2:47 Click onto the canvas to exit this edit transition view. 2:49 In the top right corner of XD, click the triangle play button. 2:54 It'll open up a view of your interactive prototype. 2:58 Go ahead and click the screen to see the transistion between the map and 3:02 the survey screen. 3:05 Isn't that cool? 3:07 Next, let's talk about how to get this interactive prototype out of XD and 3:10 into the hands of your teammates so they can review your work. 3:15 In the top right corner, click the share icon and choose Publish Prototype. 3:19 Click Create Public Link. 3:26 You can click here to copy a link or you can open it in your browser. 3:31 Great, now your prototype is viewable in a private link. 3:36 Click the Open in Browser icon to launch the page. 3:40 This page is similar in functionality to InVision. 3:48 You can share this with your teammate, and they can leave comments. 3:52 You can also record a video of the interaction. 4:22 Navigate back to the window that pops up for the interactive prototype view. 4:25 Click the record button in the top right. 4:36 Click around to show the interaction. 4:41 When you're done recording, click the record button again to stop the recording. 4:54 It'll prompt you to decide where to store the video. 4:59 Then you can share the interaction with your team. 5:03 Another option is to show the interactive prototype on your iOS or Android device. 5:06 This will allow you to see the wireframe on the actual device you're designing for, 5:13 which will help you understand how the design will feel on the actual device. 5:18 If you'd like to try this out, 5:22 download the XD mobile app from the link in the teacher's notes. 5:24 Once you have it installed, open it up on your mobile device and 5:28 log in with your Adobe ID. 5:32 The easiest way to access your project on the phone is via Creative Cloud. 5:34 If you don't have a Creative Cloud account, 5:39 view the instructions in the teacher's notes. 5:42 From the computer app, save the file to Creative Cloud, 5:45 Navigate to the Creative Cloud folder and click Save. 5:51 Now look at the app on your phone. 5:57 On the XD documents tab, you should see your prototype listed. 6:00 Click it to download it. 6:04 It'll start with the ride in progress view, 6:06 since that's the screen we have designated as the home screen. 6:09 Tap it to see the survey screen, yay. 6:12 To exit the preview, do a long press on the screen. 6:16 Release your finger once the navigation appears. 6:20 From this view, you can return to the home screen by pressing the back arrow button, 6:23 where you can share the screen as an image. 6:28 If you don't have a Creative Cloud account, 6:31 you can send the prototype to your phone via USB. 6:33 Connect your phone to your computer and then click the device icon. 6:37 You'll see your phone listed. 6:41 Now, when you look at the Adobe XD app on your phone, 6:44 you'll see the prototype listed. 6:47

You need to sign up for Treehouse in order to download course files.

Sign up