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
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:
- 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.
Link to Course Interactive Prototype
Exercises:
- 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
-
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