Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Prototyping with Adobe XD!
You have completed Prototyping with Adobe XD!
Preview
The Adobe XD interface is simple but powerful. The large empty area in the middle of the screen is the canvas, and the area surrounding it contains tools for creating designs.
Shortcut Keys
- Save: CTRL+S (Windows) / CMD+S (Mac)
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Resources
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
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
Adobe XD is a product from,
as the name implies, Adobe, and
0:00
it's included in most of
the Adobe Creative Cloud plans.
0:04
We're not going to walk through the
process of installing Creative Cloud or
0:09
Adobe XD, but if you need some help, check
out the notes associated with this video.
0:13
When you first open Adobe XD, you'll
be greeted with the new project screen.
0:18
You can create a new project by choosing
from these common screen resolutions,
0:23
or you can create a project
with a custom size.
0:30
You can also start by using
user interface kits from Apple,
0:34
Google, Microsoft, and more.
0:39
For this project, we're going to create
a prototype that targets the iPhone 6,
0:41
7, and 8 screen sizes, so
choose that option from the left.
0:48
This will create a new project, and before
we go any further, let's save our work.
0:52
To do this on Windows, you'll need to use
0:59
a menu icon in the upper left, but on Mac,
1:03
you can go up to the File menu and
choose Save As.
1:08
And then, you can choose a place
on your computer if you'd like.
1:16
And then,
I'm going to name the file trippin since
1:21
that's going to be the name
of our trip planning app for
1:25
frequent travelers, and
then I'll hit Save.
1:30
We're going to be saving
our work frequently, so
1:35
you may want to take note
of the shortcut keys.
1:39
On Windows, it's Ctrl+S,
and on Mac, it's Cmd+S.
1:42
Now, let's take a tour of
the rest of the interface.
1:49
From the menu in the upper left on
Windows, or from the File menu on Mac,
1:53
you can create new files,
or open existing ones.
1:58
You can save your files, and
2:02
you can even get some UI kits
that I mentioned previously.
2:05
And you can also export your work and
share it with others.
2:09
We'll explore some of the sharing
options later in this course.
2:14
For now, let's close this menu.
2:19
The large empty area in the middle
of the screen is our canvas,
2:22
and the labelled white box is an artboard.
2:28
You can think of artboards as
single screens in your app.
2:33
The app we'll create will have two screens
that the user can navigate between.
2:37
So by the end, we'll have two
of these artboards side by side.
2:43
Along the top of the screen, there's
the menu that we've already explored,
2:49
and then there's tabs for
Design, and for Prototype.
2:56
Design, as the name implies,
is where we'll do our design work.
3:01
The Prototype tab, we'll use later,
3:06
to hook up our designs into
an interactive experience.
3:09
In the middle is the name of our project,
and
3:12
on the right side, there's the zoom level.
3:16
A mobile preview which you can use
in combination with the XD mobile
3:20
app on your phone, if you so choose.
3:25
And then there's the desktop preview
button which looks like a play button,
3:28
which we'll use to preview designs after
hooking them up in the prototype screen.
3:33
And finally, there's the Share
button which lets you create
3:38
links to your prototype that you
can use to share with others.
3:43
On the left side of
the screen is the toolbar.
3:48
There's the selection tool,
which looks like an arrow.
3:52
We can use that to move things
around inside of an art board.
3:56
That's followed by the rectangle and
ellipse tool,
4:01
which we can use to draw rectangles and
elliptical shapes.
4:05
Same with the line tool right after it.
4:09
Then there's the pen tool which
we can use to draw custom shapes.
4:13
The type tool is for typing out text.
4:20
The artboard tool is for
creating new artboards.
4:24
And then there is the zoom tool,
4:28
which we can us for
changing the zoom level of the canvas.
4:31
Don't worry about memorizing
all of these right now.
4:36
We'll use them throughout the project, so
4:39
you'll get a chance to check
out each one in more detail.
4:42
Down at the bottom of the toolbar,
we can view assets in our project,
4:46
like colors and character styles.
4:50
We wont worry about that for
this simple project.
4:52
We can also view the layer palate.
4:56
We'll switch to this view right now
because we're going to use layers
4:59
later on.
5:04
If you're familiar with
a tool like Photoshop,
5:05
you probably already know how layers work.
5:08
If not, don't worry,
we'll take a closer look soon.
5:11
Layers just allow us to change the order
of how things are stacked on the canvas.
5:14
If you want some text to appear in
front of a picture, for example,
5:20
you would put that layer
above the picture layer.
5:25
Finally, on the right side of the screen,
there's the property inspector.
5:29
This allows you to
change the properties or
5:34
the characteristics of
any selected object.
5:37
For example,
if you select some text or a photo,
5:41
this area would change so that you
can adjust things like the font size,
5:44
add a border, a shadow,
change colors, and so forth.
5:50
For example,
if you select some text or a photo,
5:54
this area would change so that you
can adjust things like the font size,
5:58
add a border, a shadow,
change colors, and so forth.
6:03
If we select this artboard
by clicking on its name,
6:08
the property inspector will allow us
to adjust things like the dimensions,
6:12
the view port height,
the background fill, and so forth.
6:18
We'll explore these things more later on.
6:23
Now that we've had a brief
tour of the interface,
6:26
let's start creating a design
using shapes and text.
6:30
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up