Building the Filters

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