This course will be retired on September 13, 2021. We recommend "Introduction to Design Systems" for up-to-date content.
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
The last step is to link together our artboards and create a clickable prototype.
Project Downloads
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
Now for the fun part, or
at least the part I enjoy the most.
0:00
We're going to link
together our artboards and
0:04
create a clickable prototype,
let's get started.
0:07
In Adobe XD, I'm going to switch
from design mode to prototype mode.
0:11
Here I can select elements on the screen
and drag arrows from them that point
0:16
to different artboards, indicating
that when an element is clicked,
0:22
that it should bring the viewer
to a different artboard.
0:27
So the first screen we created is
going to act as a central hub.
0:32
So first,
let's select the filters icon, so
0:38
let's just zoom in a bit so
we can actually see that.
0:41
And let's select this filters icon,
in the first artboard.
0:47
And if you're having trouble
clicking on anything,
0:52
remember you can always do it
through the layers palette.
0:55
And then, after you select it, you should
see a little blue arrow appear next to it.
0:58
Let's drag that arrow over
to the filters artboard, and
1:06
you can drop it anywhere
inside the artboard.
1:10
And if you've never done this before, you
might see a window that asks you to choose
1:14
some transition settings, and
generally the defaults are fine.
1:18
Well, material design has a whole
set of rules for animations.
1:24
We won't worry about that for
this simple prototype.
1:27
In this case,
1:30
I like a quick dissolve between screens
just to show that something is changing.
1:31
Next, select the menu icon and
1:38
then drag its little blue arrow to
the Navigation Drawer artboard.
1:43
And I like the way all those
settings look, so we'll leave that.
1:50
And then finally select the fab button and
1:55
drag its arrow over to the last
art board labeled Fab.
1:59
So this will provide our
lateral navigation, but
2:05
we need some reverse navigation as well,
2:08
so we can get away from each of these
states and back to our default state.
2:11
So lets start with the Fab artboard
because that will be very similar.
2:16
So lets select this X icon and
drag that over to the Default artboard.
2:21
And for the other two, I'm gonna try to
use this scrim as the clickable area.
2:28
This won't be perfectly accurate in this
prototype because Adobe XD allows clicks
2:34
to bubble through all layers.
2:38
Meaning that even if you click on
anything in the Navigation Draw or
2:40
the side sheet, it won't actually block
the clicks onto the scrim to go back.
2:45
But, that's fine for now,
we can use our imagination.
2:50
So, we'll select, let's see,
this scrim here, and
2:53
that should be toward the bottom.
2:59
There it is, and we'll go back there,
and then we'll find the scrim here.
3:02
There it is, and we'll go back
to the Default there as well.
3:11
Finally, save your work, select the
Default artboard, and hit the play button.
3:18
Here, once again we can scroll down and
back up.
3:27
And the app bar should stay in place,
3:33
because we checked the box that said
to fix position when scrolling.
3:35
Then we can click the Menu button
to open the Navigation Drawer.
3:40
And then we can click to dismiss it, I'll
pretend I'm clicking the scrim to dismiss
3:45
it even though I can click anywhere.
3:49
And then we can also click
the filters button, show those, so
3:52
I will dismiss that.
3:57
And then finally we can hit
the fab button to show the camera,
3:59
and of course the X will dismiss that,
and that's our prototype.
4:06
This has been a basic
overview of design systems.
4:14
As we've seen they're very comprehensive,
not just in their components but
4:18
in their description of how
an app should feel and flow.
4:23
I encourage you to keep prototyping,
dig deeper into the documentation.
4:27
And look at other design systems as well,
4:31
because as always there
is a lot more to learn.
4:33
You need to sign up for Treehouse in order to download course files.
Sign up