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
Now that we have a side sheet in place, let's start adding some filters to it. When we're done there, we can start working on interactivity and hook up the prototype.
Resources and Documentation
- Google Material Design - Side Sheets - Specs
- Google Material Design - The Type System
- Google Material Design - Sliders
- Google Material Design - Lists
- Google Material Design - Selection Controls
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 that we have a side sheet in place,
let's start adding some filters to it.
0:00
When we're done there,
we can start working on interactivity and
0:05
hookup the prototype.
0:10
In the documentation for
0:11
the side sheet toward the bottom of
the page there is a specs section.
0:13
Here there's some guidance on
how to space elements apart, so
0:19
let's try to follow that.
0:23
Each element should be
56 dips tall with a left
0:25
margin of 56 dips for the scrim,
0:30
and then 16 dips between the item and
0:35
the edge of the actual side sheet.
0:40
Don't worry about
memorizing these numbers,
0:44
I'll refresh your memory when
we put everything into place.
0:47
One more thing to note here
is that the baseline for
0:51
each piece of text should
be 40 dips from the top.
0:56
So if we flip back to our
original mock-up over here,
1:02
the filters we have are based
on a date range and locations.
1:08
For the date range,
we'll use a component called a slider.
1:15
And for the locations,
1:19
we'll use what material design
calls selection components.
1:20
But first, we need to create some labels.
1:24
So in the UI kit, let's zoom out a bit.
1:27
And let's zoom in on this typography
section in the second row of Art Boards.
1:34
I'll zoom in a little more, There we go.
1:42
We're not going to go into depth about
material designs typography system
1:47
in this videos, but
if you'd like to read more,
1:51
check out the notes
associated with this video.
1:53
For the title labels, we'll use
the sixth level of Roboto Medium here.
1:57
So Copy that to your clipboard.
2:06
And then let's go back to our mock-up, and
we will head over to this side sheet here.
2:09
And let's Paste it.
2:16
And there's a few things
we need to do here.
2:18
First, right click in the layer panel and
Unlink it from the UI kit.
2:20
And if you need to,
make sure it's on top of the side sheet.
2:28
Next, change the label to say Date Range.
2:32
Now we need to move it into place.
2:40
Adobe XD has smart guides, but
at the time of this recording,
2:43
it doesn't have regular guides,
like Photoshop.
2:47
So we're going to need to improvise.
2:50
I'm going to draw out a box here.
2:53
And using the inspector,
I'll set it's Fill color to black.
2:56
And then I'll remove the border.
3:01
And then I'm going to set the width and
height manually.
3:04
So I'll set it to be 16
units wide by 40 units tall.
3:10
Now I can use these snapping and
3:18
smart guides to align this to
the upper left corner of the sheet.
3:20
So I'm gonna zoom in just
a little bit here, and
3:26
I'll move this to the upper left
corner of the sheet, just like that.
3:29
And now I can drag this text, So
3:38
that it is, 40 pixels from the top,
3:44
or 40 dips, and 16 from the left.
3:50
I'm gonna move this measurement box so
that it's outside of the text there.
3:55
And we'll hold on to it in
case we need it for later.
4:00
Next, go back to the UI kit and
let's look for
4:04
the range slider, and
I think it's down here
4:08
toward the bottom cuz these art
boards are in alphabetical order.
4:15
And here's the sliders.
4:21
The one I want is down here towards
the bottom of this art board.
4:23
I'm looking for this range slider, so
that we can actually specify a range,
4:27
rather then just say a single
point along the range.
4:33
So I'm going to Copy this,
switch back over and Paste it in place.
4:38
Then, I will Unlink it.
4:46
And let's move it so
that its aligned to this Date Range here.
4:50
Maybe down a little bit like that.
4:57
We'll use this box to measure
16 from the right side,
5:02
and we'll increase the size of this,
so that it's hitting 16 on both sides.
5:07
And then finally,
we'll just move this knob, To about there,
5:15
so it's covering up the filled
section of the range.
5:21
This is good, but we should also include
a dynamic label to indicate what
5:25
dates are actually being selected.
5:30
So once again, let's go back to the UI kit
and let's go back up to typography here.
5:33
And I'm looking for this one, Subtitle 1.
5:40
So we'll grab that,
switch back to our mock-up,
5:50
Paste it, move it into place there.
5:55
And then, once again, Unlink it,
so that we can change the text.
6:01
And we need to put in a date range.
6:07
I'll say 1995 to 2002.
6:10
And you could add months here if you want,
but
6:15
I'm just going to have
a resolution of years.
6:17
And then, let's zoom out and
see if this positioning looks good.
6:23
You may need to adjust the vertical
spacing of some elements,
6:28
To make it look right.
6:34
The documentation for side sheets doesn't
include a whole lot of guidance on
6:37
this particular subject of how to
space these types of things apart.
6:42
But I'm adjusting these
using my own intuition.
6:46
If you want to add a little more
precision to your measurements,
6:50
I recommend checking
out the list component.
6:53
You could find a link to that in
the notes associated with this video.
6:55
Now we need to add the locations
using selection controls.
7:00
From the UI kit, I'm going to
find the Selection Controls here.
7:05
And that should be somewhere toward the
bottom, since these are in alpha order.
7:10
And there they are, the Selection
Controls, so let's zoom in here.
7:17
And I want to use these check boxes.
7:22
I'm going to use this check
box that's already checked.
7:26
So I will select that, Copy it, And
7:29
Paste it into my art board here.
7:35
And we're actually gonna move
that out of the way for now.
7:40
We'll position that and
copy it in a minute.
7:43
But first, we need our labels.
7:46
So, Copy the date range label,
7:49
And move it so that it's a good
bit below the slider here.
7:55
And change this to say Locations, and
8:04
then Copy the subtitle and
Paste it, and move it down here.
8:08
And I'm going to name this with
the first name city, Orlando.
8:15
And of course, you can use
whatever cities you would like.
8:22
Now, let's get the check mark and
this label aligned together nicely.
8:26
I'm going to push these over to
the right and move this check mark up,
8:31
and make sure it's aligned to
the middle of the text here.
8:38
Oops, there we go.
8:42
And let's zoom in on this.
8:46
Can move this a little closer.
8:50
And I'm going to push these over to the
right just a little bit, so that it looks
8:54
like they are underneath locations
in the hierarchy, which they are.
9:01
So I'll move over a little more,
maybe a little further down.
9:10
And I'm gonna move the label just a little
further from check mark, like that.
9:14
And I think I actually want a little more
vertical space on this Date Range and
9:20
its subtitle, so we can make these
little adjustments, like that.
9:26
There we go.
9:32
And now I'm going to Copy and
Paste this selection,
9:32
so that there are five
of these check boxes.
9:38
So we will Copy, Paste.
9:42
And I'm just moving this down,
Copy and Paste,
9:47
And the last one, There we go.
9:57
And I'm just actually gonna
space these out a little more.
10:02
So I'll select all these.
10:07
There we go.
10:12
Space that out, and let's see.
10:14
Probably be easier to do this with the,
Layers panel.
10:18
Let's do it that way.
10:24
Go, Those and this last one.
10:25
And now I'm going to relabel these,
so that they are other cities.
10:36
So I have Orlando, and
10:40
I'm going to put in Los Angeles,
10:45
San Francisco, maybe Paris and London.
10:51
And it looks like I moved that
side sheet a bit by mistake.
11:05
We're gonna move that back into place,
there we go.
11:10
And now we can get rid of this guidance
box, we won't need that anymore.
11:13
So just select that and delete it.
11:17
Let's zoom out a bit
to see how this looks.
11:18
I like that.
11:24
And as the last step,
11:26
we want to shorten this art board
because this is a modal side sheet, so
11:27
we don't want to scroll at all when
it's an interactive prototype.
11:33
So lets grab the actual art board.
11:38
It'll be easier to do it
through the Layers here, or
11:43
you can click the label on the art board.
11:46
And all we have to do to prevent
scrolling is just bring that up.
11:49
And I'll zoom in, just to make sure that
this is accurate to the pixel level.
11:54
And now I can zoom back out.
12:05
And when you're done, Save your work.
12:10
You need to sign up for Treehouse in order to download course files.
Sign up