So let's start with the selected item screen. So right click on this one guides, copy guides, selected item, right click guides, paste guides. And what we want is to select this arrow so Ctrl C Ctrl V because it's going to be in exactly the same location. And then you can select all of this Ctrl C Ctrl V, and then ungroup them and just leave the orders icon in place, delete all of the other ones and simply move it until it meets with our guide. order it up a bit better, like so move the status bar at the top. And what we want to do now is select some text so you can select these two for example Ctrl C, jumping right here, Ctrl V, and we can leave them like so for now.

Double click right here it right in product name. Right here we're going to write in one line of text For now, and we can move it. So for example, 10 pixels down Ctrl D, make another copy, like so 10 pixels down, and this is going to be our price. So 124, for example, and maybe we can order them up a bit better, like so move them down to here. And what we want to do now is to create an image. And we can create an image by using a rectangle and just position it a bit better like so make sure it's 375, which is the width of our screen, remove the border, jump right here to the assets is going to be this Eb color same for all of our images.

They'll click right here type in image, or you can type in hero image, for example. And BG, because this is just going to be a background and we're going to place a PNG image over Which is the image without any background, and you're going to see what it looks like. Once we get to the designing part of this course. Make sure it's 468 in height, like so. And make sure you move it 20 pixels from these icons like this. And make sure you do the same for these texts.

So maybe move 20 pieces like so, now we're going to need to extend this artboard all the way down. And you can do for example 1706 is going to be enough and moved home indicator down like so. Next up what we want to create is a color, a size and maybe writing something like about the product right here. So you can use exactly this same text so Ctrl D, and position it 40 pixels. From here, double click inside and type in color. And we want to copy these colors.

So you can jump inside the card, one info, and maybe we should group these and rename them to color. And do the same for the another card. So jump inside Ctrl G now quick. And that's why I keep saying that it's really important to name all of your layers and groups, because it's going to be really easy for you to navigate a bit later on when you have really a lot of them. So select all of them, grouped them, and move them like so. Next up, we want to create a size so Ctrl D, move it and just below so 1234 Now we can say type in size.

And let's do one more, and 1234 what we're going to write right here is about the product And below, we are going to write in some information about the product. But before we do, let's quickly select this. So Ctrl C Ctrl V right here. And maybe we can create something like 49 centimeters, because that is going to be for the chair. And maybe we can type in, for example 59 centimeters, and we're going to create a frame around it. So we're going to use something like let's create a frame first, and then use something like 64 with 30.

I think that works quite well. And for the frame color, we're going to choose this color as we did before, jump into the Layers panel and type in frame. You can position the text inside of the frame a bit better. So you can select the text and make sure to position In the center, like this, and like this, that make sure you move this all the way here. And make sure all of this is aligned in the center with our size. So with perhaps, one two, and make sure all of them are in the same exact line, like this.

And once again, make sure it's 40 pixels from the top now with the frame selected, so make sure it's like this so 1234 and do the same for the about the product because now sizes increase because we created this frame, so one, two, and it's 40 pixels from here. Next up, we're going to create an image which will go right below here. So you can either copy this image, so Ctrl D, mu with all the way down below and for the dimensions use 375 and To 16. And just make sure it's 40 pixels down from the text so 1234 like this. And now what we need is another of these. So another title Ctrl D, position it like so and maybe writing for example, comfy and stylish.

And we are going to move this down 40 pixels, so 1234 and we need a text like this. So Ctrl D place, it's right here, like so, one to maybe, and create an area text. Make sure your area is all the way from guide to guide and move it just down below like this. And we're going to use the plugin. So once again, a lot of ipsum fill with placeholder text insert text. Maybe we can have six rows.

Of Texas, oh 12345 and six, and maybe we can double click right here and end it right here. And maybe we can include one more image. So Ctrl D, and position it 40 pixels, like so. And for this one, let's use different dimensions. So 335 with 216. Let's see.

Yeah, and make sure it's 40 pixels down it is. And for these ones, we're going to use 0550. So what we did there is we rounded these two corners, and these two stayed the same. So finally, select this Ctrl D, and move with 40 pixels down, so 1234 like this. And finally, double click inside typing design with user in mind apply that. And there we go, we have created our selected item screen.

One final thing I want to do is group all of them and order them a bit better. So we're going to use this this this this Ctrl G, I pin hero image because that once again is going to be our main image. And we can move status bar and these two icons all the way out at the top hero image just below. We're going to select colors so color and that is going to go just below our hero image. Next up we have size and you can select them like this if you want to. So Ctrl G, type in size.

Move them right here, about the product, place it like this. So this is our image. Now click Copy. Copy. And we're going to place this image just below here. comfy and stylish like this and control g comfy and stylish presenter.

And you can also group these two. So just move the image at the top Ctrl G. And finally this is designed with users in mind, and this screen is finished. Now what we can do is double click right here, extend this down, delete this, right click guides, copy guides, right click guides, face guides, and now we're going to select everything except for status bar and home indicator or because we delete it home indicator, we can use it as well. So hold Shift select everything Ctrl C, jumping inside control V, and you're going to paste everything in exactly the same position as it was right here. Now what we're going to do is when users select any of these, so let's quickly jump inside. And we're going to simply hide this frame because we don't need it for now, it's going to appear in this screen.

So they can, for example, choose this color, and it's going to appear right here. And this image is going to shrink to the top and one button will be introduced right here. So let's start with the image. So let's reduce its size to 435 presenter. But make sure you select just image so 435, so it doesn't affect anything else, but the image itself. So what we want to do now is select this color, so Ctrl D, and maybe increase its size by holding Then Shift Alt and left click, and we're going to simply remove and fill include the border, and maybe make it a bit bigger like so.

Zoom out, and you can see how that looks like size is always selected, so maybe we can move them to the top and reorganize this a bit better. So 1234 and what we need to include now is the bottom. So let's select this one Ctrl C, jump in right here, Ctrl V, and simply move it four pixels down. So 1234 and what we want is to hide about the product text, you cannot see it anyway. But just to make sure it's hidden from view 1234 As you can see, we have 43 pixels now, but it's okay, because we don't want to skew any of these later because you just want to keep them as data Are these bottom will appear as soon as they hit something from here. And one final thing I want to do is just make sure that this is selected.

Color Ctrl C because I want to use exactly the same layer in this screen. So Ctrl V, and make sure you are in the middle here in the middle here, above color too and simply hide it because later on when we start our animation, we're going to use Adobe XD as auto animate feature and for it to work properly, you have to have all of the layers in exactly the same place and naming them correctly because it won't work as it should other way around. So that's basically it for this screen. In the next video. We're going to start with order details and as you can see As soon as you have some items to order around, everything works a lot faster. Everything moves a bit quicker and you can order them however you want, and it will make your job a lot easier down the line.

So I'll see you in the next video.