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

hookup the prototype.

In the documentation for

the side sheet toward the bottom of the page there is a specs section.

Here there's some guidance on how to space elements apart, so

let's try to follow that.

Each element should be 56 dips tall with a left

margin of 56 dips for the scrim,

and then 16 dips between the item and

the edge of the actual side sheet.

Don't worry about memorizing these numbers,

I'll refresh your memory when we put everything into place.

One more thing to note here is that the baseline for

each piece of text should be 40 dips from the top.

So if we flip back to our original mock-up over here,

the filters we have are based on a date range and locations.

For the date range, we'll use a component called a slider.

And for the locations,

we'll use what material design calls selection components.

But first, we need to create some labels.

So in the UI kit, let's zoom out a bit.

And let's zoom in on this typography section in the second row of Art Boards.

I'll zoom in a little more, There we go.

We're not going to go into depth about material designs typography system

in this videos, but if you'd like to read more,

check out the notes associated with this video.

For the title labels, we'll use the sixth level of Roboto Medium here.

So Copy that to your clipboard.

And then let's go back to our mock-up, and we will head over to this side sheet here.

And let's Paste it.

And there's a few things we need to do here.

First, right click in the layer panel and Unlink it from the UI kit.

And if you need to, make sure it's on top of the side sheet.

Next, change the label to say Date Range.

Now we need to move it into place.

Adobe XD has smart guides, but at the time of this recording,

it doesn't have regular guides, like Photoshop.

So we're going to need to improvise.

I'm going to draw out a box here.

And using the inspector, I'll set it's Fill color to black.

And then I'll remove the border.

And then I'm going to set the width and height manually.

So I'll set it to be 16 units wide by 40 units tall.

Now I can use these snapping and

smart guides to align this to the upper left corner of the sheet.

So I'm gonna zoom in just a little bit here, and

I'll move this to the upper left corner of the sheet, just like that.

And now I can drag this text, So

that it is, 40 pixels from the top,

or 40 dips, and 16 from the left.

I'm gonna move this measurement box so that it's outside of the text there.

And we'll hold on to it in case we need it for later.

Next, go back to the UI kit and let's look for

the range slider, and I think it's down here

toward the bottom cuz these art boards are in alphabetical order.

And here's the sliders.

The one I want is down here towards the bottom of this art board.

I'm looking for this range slider, so that we can actually specify a range,

rather then just say a single point along the range.

So I'm going to Copy this, switch back over and Paste it in place.

Then, I will Unlink it.

And let's move it so that its aligned to this Date Range here.

Maybe down a little bit like that.

We'll use this box to measure 16 from the right side,

and we'll increase the size of this, so that it's hitting 16 on both sides.

And then finally, we'll just move this knob, To about there,

so it's covering up the filled section of the range.

This is good, but we should also include a dynamic label to indicate what

dates are actually being selected.

So once again, let's go back to the UI kit and let's go back up to typography here.

And I'm looking for this one, Subtitle 1.

So we'll grab that, switch back to our mock-up,

Paste it, move it into place there.

And then, once again, Unlink it, so that we can change the text.

And we need to put in a date range.

I'll say 1995 to 2002.

And you could add months here if you want, but

I'm just going to have a resolution of years.

And then, let's zoom out and see if this positioning looks good.

You may need to adjust the vertical spacing of some elements,

To make it look right.

The documentation for side sheets doesn't include a whole lot of guidance on

this particular subject of how to space these types of things apart.

But I'm adjusting these using my own intuition.

If you want to add a little more precision to your measurements,

I recommend checking out the list component.

You could find a link to that in the notes associated with this video.

Now we need to add the locations using selection controls.

From the UI kit, I'm going to find the Selection Controls here.

And that should be somewhere toward the bottom, since these are in alpha order.

And there they are, the Selection Controls, so let's zoom in here.

And I want to use these check boxes.

I'm going to use this check box that's already checked.

So I will select that, Copy it, And

Paste it into my art board here.

And we're actually gonna move that out of the way for now.

We'll position that and copy it in a minute.

But first, we need our labels.

So, Copy the date range label,

And move it so that it's a good bit below the slider here.

And change this to say Locations, and

then Copy the subtitle and Paste it, and move it down here.

And I'm going to name this with the first name city, Orlando.

And of course, you can use whatever cities you would like.

Now, let's get the check mark and this label aligned together nicely.

I'm going to push these over to the right and move this check mark up,

and make sure it's aligned to the middle of the text here.

Oops, there we go.

And let's zoom in on this.

Can move this a little closer.

And I'm going to push these over to the right just a little bit, so that it looks

like they are underneath locations in the hierarchy, which they are.

So I'll move over a little more, maybe a little further down.

And I'm gonna move the label just a little further from check mark, like that.

And I think I actually want a little more vertical space on this Date Range and

its subtitle, so we can make these little adjustments, like that.

There we go.

And now I'm going to Copy and Paste this selection,

so that there are five of these check boxes.

So we will Copy, Paste.

And I'm just moving this down, Copy and Paste,

And the last one, There we go.

And I'm just actually gonna space these out a little more.

So I'll select all these.

There we go.

Space that out, and let's see.

Probably be easier to do this with the, Layers panel.

Let's do it that way.

Go, Those and this last one.

And now I'm going to relabel these, so that they are other cities.

So I have Orlando, and

I'm going to put in Los Angeles,

San Francisco, maybe Paris and London.

And it looks like I moved that side sheet a bit by mistake.

We're gonna move that back into place, there we go.

And now we can get rid of this guidance box, we won't need that anymore.

So just select that and delete it.

Let's zoom out a bit to see how this looks.

I like that.

And as the last step,

we want to shorten this art board because this is a modal side sheet, so

we don't want to scroll at all when it's an interactive prototype.

So lets grab the actual art board.

It'll be easier to do it through the Layers here, or

you can click the label on the art board.

And all we have to do to prevent scrolling is just bring that up.

And I'll zoom in, just to make sure that this is accurate to the pixel level.

And now I can zoom back out.

And when you're done, Save your work.