Sharing and Getting Feedback in Adobe XD6:49 with Hope Armstrong
Adobe XD has some built-in sharing functionality. In this video, we'll see how that works.
Adobe XD mobile apps for live previewing of prototypes
Syncing a project to your phone without Creative Cloud:
- Save your project anywhere on your computer.
- Connect your phone to your computer via a USB cord.
- In the desktop XD app, click the Preview on Device icon in the top right corner.
- 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.
- Now, look at your mobile device and click the "Live Preview" tab.
- How Might We? Questions
- Book jacket exercise described by Paul Boag
- User attention exercise described by Paul Boag
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
- Signup process
- App tour
- Report an unsafe driver
- Emergency support (911)
- 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.
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