So let's start with our search filters screen. And first thing I'm going to do is select the snapper Ctrl D Ctrl V right here, sorry, I should use Ctrl C and then Ctrl D. And what I'm going to do next is select these two Ctrl C Ctrl D right here, and I'm going to use sulfa once again, so Ctrl D, and I'm going to move it right here. Next up, I'm going to select the X icon or the close icon from here Ctrl C. Jumping to this screen Ctrl V, and I'm going to position it like so. So in the middle of this is the navbar. The, the clothes insight, and for example, select clothes and menu and make sure to line them up perfectly. Drop clothes out, delete navbar because we don't need it anymore.

And what We're going to do next is right click right here, use guides. And maybe we can simply right click right here. No. So we have to select name, right click guides, copy guides, click right here, guides, base guides, so we can use the same guides. And make sure you move the clothes right here so far is aligned correctly, but we are going to double click right here and type in filters. Because these are going to be our filters and users can then filter out what they want the items to show.

So first in line is going to be color. And I'm going to move this a bit down we don't need it at the moment. So what we want is move it like so and then hold Shift 1234 so that you can move it 40 pixels down like so. And we're going to use these two arrows so you can see to both of them at the same time Ctrl C Ctrl V so that you don't jump in all of the time, use this arrow lining up in the middle. So you can select both to them line out like this. And what we want is more with in the middle of the x, because the x is a bigger icon.

So place it like so. And then move this icon just below like so until it lines up perfectly, which I'll do on the color, hold Shift, and one, two, we're going to filter out by price, like so. And now you can move this one and select both of them and line up the arrow. And next up, I'm going to use this so let's say for example, 349 Ctrl, D, once again, and on this one, let's say on thousand 239, for example. So you can space them up evenly and you can maybe even do it So, and we are going to move them from here 40 pixels down, like so just to have a bit more space. So when they're close, they're 20 pixels apart.

And when they are open, they're 40 pixels apart, just so that we can have a bit more breathing room. Next up, we're going to create a circle. So create a nice big circle, maybe 16 with 16, for example, we're going to remove the border and for the color, let's use this one here. And we're going to align it up with this text or you can select both of them and do like so. We're going to jump into our Layers panel. Once again, they've been circled like so Ctrl D, and make sure you're in the middle with this one.

So like this, and we're going to put sort of a timeline behind it. So how we're going to do that is use a rectangle and grow go from n To edge like so, remove the border for the corner radius, we're going to use five. And for the color, let's use this one for example. And I think it looks good, we just need to move it below. So let's call it a timeline. For example, with below Ctrl G on all them.

And you can even filter out by prices. So like this and move this price up, double click right here, and we're going to type in, for example slider, all the range, however you want to call it. And inside we have our two circles and our timeline. Or we can maybe, for example, type in range, BG, let's say like that. And we're going to group all of them so select the price, select this arrow and select all Have these Ctrl G, and we're going to group them by price. Next up, we went to move it all the way down and alter some of these layers up a bit.

So status bar right here, I'm going to choose filters and close moving up like this. So up arrow and color, we're going to position them like so Ctrl G. So this is our color. And we're going to use, for example, control D on this one, and move it down just a touch. So hold Shift, until they line up with the bottom of our circles like this. So shift 1234 and we're going to use materials like this, and we need a down arrow right here. So you can click inside Ctrl C jump inside of the materials, hit Ctrl V. And then we're going to move this arrow like this until it lines up with our up arrow.

So like this exactly, and we're going to place it like so, delete up arrow, like so. And what we want to create inside is something like a quick selection so they can select for example letter clot. Some other materials or for example sky or whichever material there is on offer, and we're going to need this text so Ctrl D, move it outside of the folder. And once again to like this materials, see why it's important to name all of your layers and groups. So drop it inside and position it like this. And it really doesn't matter because we want to create a frame.

So double click right here, type in letter and do Ctrl D and move it like so. And maybe we want to create a court like this. So what we want is to create a rectangle around it so people can select it, and when they do, it will create a basic rectangle around it. So maybe you want to create a rectangle like this. And maybe typing for example, a 30 by 30, let's say we're going to remove the fill color, and for the border, we're going to use this same color. And now we're going to position a letter inside like this.

And like this, so it's in the middle on all of the sides. And now we're going to use these two so let's call it a frame for Rain and lower, and the clouds will be just below. So these to select them, move them until they meet with our text, like so 40 pixels down and use the clot and position it in the middle. And perhaps even more with let's see, like so 1234 pixels to the right. And next up, we need two more sections. So let's use the color so Ctrl D, and we don't have to create another instance of it.

So we can use exactly the same instance. So use the color but for some reason, it selected the text. Let me quickly fix it. So instead of the color we have up arrow, so Ctrl D. I went to move it down until the middle right here 1234 and this is going to be our washable. So is the product washable or not? With minimal capital at the front?

So, and we need one more instance. So Ctrl D, and we went to move this one. So till the meet like so one tool if you remember, because it's closed, not open and this won't be mechanism. So for example, because we chose sofa right here, is it going to be a mechanism so can you retracted or collapse it or something like that? Or is just fixed so far, and you get what you paid for it? That's it, you cannot move it, you cannot extend it or place it any other way around.

So that's basically what the mechanism is. I mean, quickly check if these ones are aligned. Yes, they are. And one final thing is for us to order these and create the bottom. So let's start from the top we have filters, we have clothes Color is the first price is the second materials is the third. And this should be washable.

Like so. And finally, this is a mechanism like so. And one final thing, we want to create a button right here. So we're going to use all of the wit like so, we're going to choose this color because it's nice and bold. We're going to type in btn, which is short for button, and we're going to position it for example 40 pixels. But let's first use the dimensions.

Let's use 335 with 50. And I'm going to use five for the corner radius. And then I'm going to move it 40 pixels up from this home indicator. And finally, I'm going to need just one text So let's use filters text, like so Ctrl D, move it down to the bottom. And maybe, for example, don't like this, move it inside. This filters will stay at the top, this will stay at the bottom, like so.

And this is going to be white. Now click inside and we're going to right apply selection. Control a make sure it's in the center and make sure you position it like so. And like so switch perfectly in the center. And you can also group it so Ctrl D button. And that's it for our screen.

As you can see, it's really quite simple because all of these selections repeat each other. The most annoying thing about not just Adobe XD, but any software is it puts all of the At the top, I really don't know if you can fixed some of that. And if you can order them from below, but in any case, even if you can, in majority of the cases, you have to order them yourself. So that is the most time consuming bit. If you want to stay clean and tidy, if you don't, it's really up to you. So for example, if you are doing some practice files or you're sending files to a client, and you want to spend more time at the end before the final delivery to the client, then it's fine.

You don't have to name all your layers and position them like I did throughout this project. But it's really preferable if you do so because developers are love you. And it will cut your work short later on. When it comes to when it comes time to delivering the final client final files to your client and to their developers. In the next video, we're going to design a room combination screen so I'll see you there.