Preview
Sharing and Getting Feedback in Adobe XD
6:49Adobe 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
Changes to Adobe XD
Prototype interaction settings are now on the right panel
The Prototype Share icon is now next to the "Prototype" header on the left
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 the 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.
Link to Course Interactive Prototype
Exercises:
- Book jacket exercise described by Paul Boag
- User attention exercise described by Paul Boag
Additional screen ideas:
-
Booking a Ride:
- Select the 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:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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