Figma Fashion Web App UI/UX - Design a Complete Web APP UI/UX - Learn Figma Advanced Features

1. Introduction: Welcome to this figma web app, UI UX design course. My name is Danny Chelsea and I'll be your instructor in this course. In this course, you will design a complete fashion web app, UI UX. So this is the complete app that you are going to design in this course. While you will design this web app, UI UX UI can alarm and different kinds of techniques and best practice of Figma. I will show you how can you prepare your project? How can you do system design, color system design, grid system, create component, create group, and so many things. Let's have a look on the app that you are going to design in this course. So this is the complete app that you are going to design here. So on top, we have our navigation item, and then we have our nice heterosexuals. And after that we have our woman fashion items, men fashion items. We have our pigeon is shown, and then category subscription sexual and our footer. Here in the main section, we can see that we have this horizontal scroll button. So if I click on the Horrigan to this chromatid is going to scroll horizontally. I'm going to click here. It is going to go back to the first position. Even doing this, we can also do Horizontal Distribute you. We're also going to learn how to do this kind of a scroll scroll view options in Figma. And from here, if I click this item, we can see a model works with our fashion items information in the model box. We also have this bulge on top esco options. So you can do your items in this way, or you can simply click on the button and then we have our information, and after that, we have this close icon. If I click here, it is going to remove. And if I open it again, and if I click our side, it is going to also remove from here. And two, while you will design this category section, you are going to learn how to work with images. In Figma, you can see different kinds of shapes I have added in these images under this juice category section. So I am going to show you how to select images, how to work with images in Figma. And then we have our subscription sections and our footer sections. You are also going to learn a lot of things about Figma plugins. You can see all these icons that we have in this web app I use from plugin. So you are also going to learn how to use a different kind of plug-ins for icons and other stops. And we have also our sign-up features. So if I click on the Sign up, it is going to show our modal pop-up. And this though sign-up form. If I click on the signup, I can move to the sign-in page. And from sign-in, I have ODP based. And after verifying this RTP, we will be able to our home-based. And one thing is noticeable here is that while we are showing the sign-up, we can see a little animation and transition from different sites. So what you will do this kind of prototype, you are going to learn how to use animation, overlay and delve different kinds of prototypes, functionalities, for instance. So if I, if I click on it, so we can see that the sign-in is coming from the right side. And if I click on the sign-in, it is coming from the top. And if I click on the periphery, it has gone. And now we can see our homepage. It goes same here. So you can see little animation at the time of offer let. You are also going to learn how to do prototyping in this course. This course will help you a lot to improve your skills. And most importantly, after finishing this course, you are going to have a complete project that you will be able to add to your portfolio. Therefore, I will hide, encourage you to enjoy this course. See you in the class. 2. Project Layout Grid and Color System Design: Welcome to this lecture. In this part, we're going to start working on our fashion or web app, UI UX. So as soon as you login to your Figma account, you see this kind of user interface. Now from here, we have a new design file so fast we need to create, we need to open InDesign file. And after that, we need to select our friends. Here on the top bar, you usually see all the tools or Figma. From here, we need to select a frame. So I'm going to select the frame here in the rash that corner. It is going to give you a couple of options. So under this deck stop, I'm going to select this indexed of options. Now it gives us one frame, right? So we are basically going to design this kind of fashion nowhere, but not exactly the same because we're going to add a couple of more features and a little bit of changes, not just for reference purposes, so we can just look on it to what section we have. Alright, so now let's move on to the projects so fast before starting any design, it is always a wise decision to prefer your system design so that you know what kind of color, what kind of bridge, any style you want to use. And then you can reuse it this way. You can make your design same for every pages. It is going to organize your project and it will look pixel perfect. Alright, so fast. And we will have to create a layout grid. So I'm going to create a layout grid here, and it is going to give us this kind of grid, but I want to have only column. Therefore I'm going to select column and then I'm going to have 15. And then we can start working from this side to this side. I mean, whatever data we will add, we will add from this side to this side. Now I'm going to make it R. Now I'm going to make it a style layout grid is tokens egregious tell. So I select the grid, then I click on this icon, then I click on this plus, and I can say main grid column. Okay? Now it is going to save here. But if I have now let's say I created one more frame, then I can just simply select this frame from here, from the grid and then I can just reuse it. Alright, This is how we can maintain a distance from left side and right side. And we can weekend, we know that from where we need to start our design. Now, let's create one more. Design is a design system which is for color. So I have selected couple of color code for that. For adding this color code, I'm just adding some random rectangle and this is my color code that I want to have. So you can simply write this color code or you can use your own color-coded, doesn't matter. Now, this, this rectangle is selected, and this is the color code. So I'm going to just replace this color code with my color code and then click on. This process is almost same. And then here we can see couple of pre-built color that figma has added. But we're not gonna use any of these. So I'm going to click on it. This is called, now as this item is selected and I have added this color, we can see this color. And here I can say primary color. As soon as I create a style, it is going to stay here. Now create one more rectangle. Now we have this field, we have this color. Now if I click on this style, then you can see this is our primary color that we have just created. Okay, now, it goes same. For this one. I want to have a different color code. And I have this color code, which is in this. So I'm gonna select this one here. And I'm gonna say this one is for footer. And then I'm going to create one more rectangle here. And then I have one more color code. So you can just add as many colors as you have for your project and then just add in your style. Then I can say Subscribe button. After that, we have one more. And now this one, I'm going to change this one to this color. And I can say it's an Eastern grid for category background. I can just try to add or any meaningful lab so that it makes sense. And later if you have to change anything, then you can easily understand it. And do we have one more color code, which is going to be this? And this one is going for our Add to Cart button. Now, as soon as I have everything now I can remove this. Now I don't need to have any objects because our color color is already saved in our color style. So first and foremost, we have this background on the head. Let me add one background, so it seems that we still have one. So I'm gonna remove it. So now we have this one. So I'm going to select a rectangle from here, and I'm going to design this rectangle for our header. And then we have our color is still right that we just created. And you can see all the color code is here. I'm going to select this one color style. Now if I run it, if I run this, select this frame, I'm sorry, we need to select this frame to run it. Okay, so the connection is interrupt, so that is the reason. So the frame is selected. And then if I click on it, then it is going to open. And definitely to work, there is nothing to worry. We just added one rectangle and I'm going to add this. So we can see our frame, we can see our layout. I think we can keep this height. I just wanted to see the height if it is bigger or smaller. Let me rearrange it and then match it with this one. Call. It looks really nice. And we can keep this height for our rectangle. So I'm going to stop this video right here. And in our next lecture we're going to design all this theme. So see you in the next lecture. Bye bye. 3. Navigation Bar and Header Design: Hello, Welcome to this lecture. In this part, we will design this header section so we can see that we have one EMS and then we have these Dido and Barto and a little bit of reason here. So first I'm going to add the image here for that fast, I will have to select this rectangle here. I'm going to select this rectangle here. And then I'm going to double-click on it so that I can do a little bit of design here. So what can I do here? Just double-click here. And then I need to select this one. And here you go. So I want to have from this shelf here. And after that I need to click on the Done. Now from here, I need to select this place, MS, so that I can select the image here. So I'm going to paste the image here. So now we can see this EMS and I'm going to add it here. Now. It looks nice. So what can I do now? I think I can just adjust this in this way. And after that, we have, so we can also change the name of this one. So I'm going to rename this name. I'm going to say either image. So it is always a best practice to make to add name of your item or of your groove so that later you can easily identify. And now we need to add this kind of design. So for that, what I'm gonna do, I'm gonna create and select our ellipse here. And it should be the same height and weight, maybe 25 by 25. And then I'm going to add a color. So let's add the same color. So I'm going to add this color here. But what I'm gonna do, I'm gonna, what I'm gonna do. Okay, so we need to add addition color for this one. So this is the color that we have an after selecting here, we can just change the contrast on this color so I can say 50%. Then it's gonna look like this, but we will have to use a different color. So I'm gonna select this color and then I will have to click on it. Let's change it to 50 per cent. Yeah, maybe 40 per cent. But we don't need to have this effect. I'm going to remove this effect here and let's see how it looks. So it is outside of this one. So it looks like this similar to this color. And now what I'm gonna do, I'm gonna make, I'm going to duplicate it a couple of times. And I'm going to draw it here. So to make a duplicate, you just need to press select this one and control D, or in the right-click and copy and paste. And now I'm going to duplicate it a couple of times. Control D, Control D. Now we have all this ellipse. So what I'm gonna do, I'm gonna make them a group so that we can, I'm going to press Control G or from here you can say group selection. Then I'm going to make another, now I know I'm going to duplicate this group so that we get some design here. Now we have two groups, group one and group two. And combined in this group, I can say heater leaves. So we have this thing now here. I'm going to drag it here. I'm going to make a duplicate of this one and put it here. But this time we need to eat vertically, so I'm going to rotate it in this way. And then I am going to put it in this side. And here we go. Now let's see how it looks. It looks nice. And I am going to put it in the same size. Alright, so now we have one text and buttons. So let's add this title fast. So what is the text here? Find your dress here. We can add different texts. And that's another issue. So I'm going to, okay. So now we can again enable our we're going again, I'm sorry, I'm going to remove this text first from here. We don't need to have this text here. And I'm going to add this grid again and we will start our, we'll start adding our text from these. Great, so I'm going to add this text here and I'm gonna say, I'm gonna say, I'm gonna say, fine TO fashion here. I can say, oh, everything make it capital. Fine to you. Here. And now I am going to increase the font size of this one to 48. It looks nice, I think 4848, maybe 36, so we can select. And I'm going to change the color of this text. So change the color of this one. Maybe we can choose the white color. What color is not going to look good. So we can try block one, I guess black one is good here. That's not a problem. So we can choose this black color, but the spleen is not good, so I will have variety. So I will have to write to find your fashion here. And here it goes so fine TO fashion. And after that we have another text. So I'm going to start it from here. And the text is select your dress from allows collection. So we can just float right here. Slave to your dress from online. But this time we will need a smaller size of text, so we don't need to have same-sized. Maybe we can select maximum to D6 and not 20 exactly. I'm going to select it 20. And after that, we are going to add our button here. So now I'm going to add it, put it this way. So if you do it in this way, then you can see this dot line is going to impede, means that both are in the same size from the same starting point. Now, we will have to design our button. So I'm going to design our button here. And the bottom name is going to be a sharp now. So I'm going to start it from here. So this is going to be our button. And here first I'm going to add this border radius to add border-radius 20. And then one text I will have to add here. So I'm going to say Shop Now. And again, and we will have to change the font size of this one. It's not tightly six is going to be 16. And I'm going to put it in the center. And here you go. We have this Shop Now text and now fast, make it a group. So this tool is going to be group and we can save button sharp now. From here, we will have to change the background color. So we will have to change the background color. So what can we do? We can add our color. For this text, we can add white color. So now we have this Shop Now button and find your fashion here. What else we left? We have button. And then one thing that I can do, I can decrease the size of the button. And then I can just put it here. And we have the text here that we can put. We can put the text here. And I can, I think we need we can drag that. You may see it so that we can add our navigation item here. So I'm gonna select this one and put it here. We can also add a little bit of border radius here. And let's see how it looks now. Now it looks better. Now on the top we can add our text of our menu items. So I'm going to start from here, and I'm going to have our home. And after that I'm going to duplicate it. So home. And then we can say, you can say T-Shirt. Then we can say, or instead of, we can say, okay, we can do it. We can say t-shirt and then we can say shoes. Then we can say men fashion. And then I'm going to duplicate it to. So I'm going to have, we can say here, instead of manifestation, we can say manufacturing. And then we will have one more offshore, which is going to be our sign-in and sign up. For the, for the sign-in, I'm going to select our border radius here. So I'm going to not border-radius, I'm going to add a rectangle here. I'm going to add this or this, this size. So what I'm gonna do, I'm gonna add border-radius here, 20 pixel. And then here I can say sign-in. I can say sign off here. And I need to change the size to 12. I need to size is 12 here. So we have sign-up button and then after that, I'll let me group it fast McDermott group and I'm going to say sign up. And we also need to have one more text for our sign-in button, for, for our sign-in option. So we can say it here. So we can say sign in. And I'm going to change the bottom color. We already have our color, which is going to be we can say this color. Let's see how it looks. It looks nice, but I would prefer to have sign-up and sign-in sign-in button. We now with this one. So I'm going to press Command D. And instead of sign off on this text is going to be, instead of sign off, this text is going to be signed in. So instead of sign off, I'm going to say sign in. Now, if I open this one, then we can see sign off and sign in. But I would prefer to have a different color. So I'm going to add different color, this one. And for this one, I'm going to choose this one as well. And for the chance, the cat, okay, so to change the color of the text here. So here we will see that where is the one? So this is the sign off. So you can see that when you select a group or a new create a group, you see all the items of the group. So in the group we have one rectangle and one text. And there's a reason that we can see two color. One is for this one, which is our text. So now I'm going to change this one to white and it goes same for this one. This block is going to be white. Now we have this design. I think it's okay. But before that, what I need to do. So I need to check if everything is in the same side, same distance. So we have this almond fish shown, I'm going to select all this thing. And then as soon as you select all these things, there is a property called tidy data. You can see in the, I've said if your if your item doesn't have it for items and don't have exact a wide or height. Then this one will be in a bowl and if you click on it, then it is going to adjust it. Now. Now we will see that it has same size, okay? And another thing that we need to do, we need to make them a group. So press Command G. Now we can rename the name. We can say nav bar, and now we don't have anything here. You can see now this one isn't visible because we already have this, we already have this, this item in exactly the same distance. So now I can see that looks really nice. We have the sign-up, sign-in text, and as well as we have this nav parts. So for the nav bar, if I select this one, we have 16, or every item, we have 16. Now we have this one. All right, so now if I want, I can also drag the entire thing and I can just drag and drop because we know all of our data now in a group. But another thing that I noticed here, we can just drag that takes a little bit center. And same goes for this one. Let's see how it looks now. Now it looks better. Again, let me check the tidy off If it is. Okay, we have right format now, we have successfully finished our header section. And in the next part two, we're going to start working on this part. See you in the next lecture. 4. Card Design to Show Fashion Item: Well, welcome back once again. In this part, we will start designing our card. For that. First and foremost, what I will have to do so we have one MS and then Dido star, and then when icon, and then the text. So faster we will have to create a rectangle here. So we have one title as well, and we have two icon here that we will have to design. Okay, so fast, I'm gonna, I'm gonna add to one rectangle for the card. So we will start working from this grid. And here also from this grid means that we're going to take a space from this white and then this red shadow, this white, and then this red shadow. We're going to start from here. Our rectangle. We can take the size. We can take this tree row. Okay, So we have this rectangle and I'm going to add the little border-radius move from maybe five. Let me see how it looks now. It looks like this. Okay, so we will need a little bit of space from the top because we will have to put our title here. So now we have this item and then we will need to on effect. So I'm going to add this effect here and drop shadow effect. And I'm going to also change the color. This color is going to be the white color here. So this is the white color. And now on the top here inside the card, we will have to take another rectangle, the rectangle for our image. So I'm going to take this size to this level and also make the borrower has five pixel. And we will have to put it exactly the same size. All right, So let's see. So we have this one and here we will paste our emus. And now what else we have? We have, okay, so I think we need to make our rectangle a little bit bigger because we have cheap text. So first one is going to be able to name. So what can we say? We can say, we can say this option here. We have title and then a star. So I'm going to add a text here. And this text is going to be, we can say, I can say wedding dress, just an example. And texts should be 16 pixel. So waiting just 16 pixel. And then we have 16 pixel for this icon. Then we have one star, so forth. Using a star, I'm going to take help of the plugin called feeder icons. If you don't know how to install the plugin, then simply go to this and browse plug-ins in the community. And here you can just search any plug-in for the icon. Then you can just use it. You can see that neither the plug-in that they have a lot of plug-in they have, you just need to click on Install, then he's going to add. And then from here you can just explore it from here. So now I'm going to take help of filler icons. You can also install this plugin. So in the filler icons, I think, and we have this star icon. So we're just going to open up, pop off here, and here we will be able to see all the icons. I'm gonna say a star. You can see that we have this start here. So I'm gonna select this star where it is. So now it has selected in this way. And I'm going to put it here. But before that you can see that it is going to select outside of the frame, but you have to make sure that it is inside the frame, otherwise you won't be able to see it. So now if I, if I open this view, now we can see this is star is here, but it should start from the starting point of this text. Okay, so we have now this space. And I'm not going to make changes of the height because it's already in a good position, 24 by 24. So what I'm gonna do, I'm gonna make them make it a duplicate. So press Command D. And I'm going to have little less space between this. And I'm going to duplicate it 345. So now it looks nice. So I'm gonna select, make them a group. I'm going to say star. And now we have this star. So what can we do now we have to add what else we have here. We have icon, and then we need to change the color of this one. So you can see that currently the selection color is black. So also one thing that you need to notice that this is not your main and main fill color is mainly a your stroke color because it is. A stroke, you can see this kind of stroke it adds. But if you want to change the background of this one, then you have to do it in this way. Then you have to do this in this way. So now it'll, then it will look like this. We can also definitely do this one. So what can I do? I'm going to, for this one, I'm going to select this 14 here for the stroke, I'm going to select the block. Then it will look like this. But I don't want to have this one. I just want to have the black black color. So we don't need to have this background. We also don't need to have this one. Usually it is not going to show now we have this black color and now here we need to add one more. Takes. This text is going to be here. So I'm going to add a text here. And I can say maybe 50 reading, just a number of writing to show. And in this way, and we can take the size to 16, but it should be in the center so we can just drag it a little bit this way. Alright, so it looks nice, but if we want, I think we can change the color and let me try how it looks. If we select a different color and it looks, it doesn't look good, but we can just stay with a black color, but instead, we can just say it's a bold color. So it's a bolt so that we can see that we have number of reading. So we have title, we uptake script shown. And then I want to add one more text, which is going to be our price. So we can say dollar symbol and they can say to $50. And make sure that the starting point is same. And it comes from 19 by 19. Alright, so we have our price, we have this image. And another thing now we need to have, we need to show our need to paste our image here that we don't have. So before that, before we go further, what I'm gonna do first, I'm going to make them a group in these three item. And then I'm gonna do the tidy so that we can, we know that star. Then we have this title. So make them a group first. And I'm going to rename it can save guard text sign. Now if I go here, we already see that this one is visible. It means that we have same distance. Now another thing that we need to add here, we have one more button here that we need to add. So I'm going to take half of this rectangle of this ellipse tool, not the rectangle. Okay? I want to select ellipse tool. So we have Ellipse Tool here. And I'm going to select the ellipse tool. And to make it darker, you always need to make sure that hide in a wet exactly same. So it looks like this. I think we can take a little bigger, maybe 32 by 32. And we can put it in the same and the same distance. This way, we can put it in here. We will put our icon, so we can put our icon here. So before that I want to change the background color. So I want to have this color here. And then we will select our blog icon here, the heart icon. And I can say, so here I can say this heart icon. And then first I'm going to put it inside the frame and then pulled the heart icon inside this one and make the stroke color to white. And I can just center it a little bit. And here we go. Alright, so it looks really nice. I'm going to stop this video right here and we will continue from the next lecture. 5. Select and Show Multiple Image in Card: Welcome back once again. In this part, we will try to implement rest of the design. So we have this option. Now, we have this card. Now we want to make them a group, the entire part, so that we know that this part we can just duplicate to make multiple items. So we have this heart here. Then this leaves to make them a group first. So I'm going to make them a group and rename it. And I'm going to say here, like butter. Then we have our cortex, which is another design. We have this rectangle for the text and then we have the main cart rectangle. So I can change the name of this one. We can say main cart. And then our EMS card, which is this one, which is going to be humorous card. So now we have our main card, we have our MS card, we have our Like button. And I can make them a group and I can say fashion, fashion card. All right, so now I can make it duplicate. I'm going to press Duplicate so far as it from this card. And then I'm going to duplicate it a couple of times. So four. And then phi six. For now, maybe six. And we have, do we have this card, right? Okay, so we have this number of item now, but we want to have a Scroll View option here so that we can install it. Now it's time to paste our image here. So how can we do it to do so fast, what I will have to do? So this is our cart, this is our card. So I'm going to expand all these so that we can select our image guard. Because I'm going to have multiple, multiple IMS altogether. So now I'm going to select the image. So click on Place the mess. Now I'm going to select three to six or seven card. So I'm going to select the images here. So 12, then 34567. Okay, and then I'm going to open it. So as soon as it loads all the images you can see adding immense. What I will have to do, then I will just have to I will have to just click one-by-one. Then I can just posted, you can see that seven images selected. So now what can I do? I can just click on it. One EMS has been selected, then 10mers. Ok, I'm going to deselect it. Okay, So let me remove it. So I'm going to do with two again because I wanted to show you something that then the number of position of the image. So let's select the image here. So I'm gonna select this image. So I'm going to select this image, this image. These, these, these, these, not this one, this one, this one, and this one. Now let's click Open. And as soon as we select it, so emits three sites. We need to wait a few moments because it takes time to upload the MS. So as soon as our image is ready, we will be able to see it in our miles. And here you go. You can see that 80 mess, the last one you selected will be in the first position. So you can just start doing distinct. Now I can just press click one-by-one, this. And this. Here we go. And we will have one more image here, which is going to be our last item. And so let me see what can we see here? So we have two images here. We have five females, but we're not sure about this item here. And now. We can just save it. So what can I do? I can just press it straight. I'm just remove it now I'm going to remove these images. So now what I want you to see here, if we got this image, this is how you can add multiple limits because we have another card here which is maybe this one. Instead this one we have we have for one text here. So we did a mistake here. We removed our item when I did this thing. So now we have this one, MS. here, but we have another fashion here in this one. So we have this card, which is this card and this card. That though we can see here. I'm going to drag this one to see if we have MAC or not. So we don't have MS here. So we can have to press one image for this item here. So I'm going to drag the EMS, select one you miss. Again. Maybe I can join his left. So we have this one, this item, and I'm going to select this one. And now I have to press this image here. So the thing is that if our frame is outside of four, if our images are sort of a frame, then in that case we will have to or you of it because we don't know then either we have this item or not. So we can add a couple of more items here. So maybe two. But as soon as I put it inside the frame, then I get then I get the same distance. So in that case faster we will have to prepare our card and then we can at our work and then I'll set the position of this item. So okay. So I didn't duplicate it. So it needs to make a duplicate. So we have one item here. We have another item here. So this one is different card. So I'm going to add to defend us here. Now we have another image here, which is this. We already have one picture here. So I'm going to add two more images for this item. So I'm going to place emails from here. I'm gonna say this one for this item and another, another image for this one. So I'm going to select Place image. And then I can say, let's add this one. And here you go. Okay, so now our job is to set all these emails outside of this. So here, now we have fast, Let's put it here. And then later we can rearrange it as soon as we have distinct. So now these two item is outside of our frame. So now what I'm gonna do, I'm gonna put it into deflation is that the frame and this one is incentive frame. So now we have our, this one, which is this one. We have this one, and we have this one. So let's do it. Now. We have, we can see that distance is 20. And this one is also we need to select distance 20. Okay? So if you see this red line is in the same, then it means that your position is same. Okay? So now if I come here, then we can see all the images, but we can see the right side, so forth that now what I will do, I will have to add horizontal scroll view for this fashion card. We have designed our items so far. And in the next part, we're going to learn how can you do horizontally scroll view. So don't get confused. What we did basically we just created a card, added MS multiple images, and then we're just adding multiple cards so that we can do horizontal is called View for right? I'm going to stop this video right here, and we will continue from the next lecture. 6. Frame Selection and Horizontal Scroll: Welcome back once again. In this part, we will try to add horizontal scroll view when you double-click on this, on this icon. And as a lesson, they will track for that. We will have to convert each and every group into a frame. Then only we can do it. So we have our car design and each and every card is our groups. So you can see this card is a group, discard is a group. This card is a group. Discard is a group, and discard is a group. I can also drag it here. I think this card is the groove. This card is a groove. This, this, this, this and this. So now what I will have to do, I will have to make group make a frame, each and every card. Okay, so fast, make, make it a frame. So this cart, we will have to make frame, right? Select the card. And then a frame selection, this one is going to be our frame one. And so I'm going to undo or Control Z to undo it so faster, Let's make a start from here so that we can, we know that our frame one is our first item. Okay? So this one is our first item. So I'm going to right-click and I'm going to say frame selection. And then this one is going to be our frame. And this one is going to be our frame as well. So I'm going to say frame selection. Todd is going to be Frames lecture for this is going to be this, our frame selection. And this item is, are these items. So I'm going to say, I'm going to undo this one because this one is going to be our fifth position. So four, and I'm going to right-click and say frame selection phase. And then this one is going to be our sixth number position. So frame selection than seven from selection. And the last one is frame selection. Let me see which one is the last one. So the last item is number eight, number seven, number six, the number five, Number four. Alright. Now, select all the frame that we have just created. We need to create, we need to make one frame now. So frame these, these, these, these, and then select all the frame that you have. And then after that into right-click and do frame selection. Now you have a one frame and inside this frame, you can rename it. You can set that mainframe inside your main frame. You have your multiple frame, which is your each item. Now. You need to select your mainframe and then you hit the right side, you will be able to see Cliff content. You need to check this one. So as soon as you would do Cliff content, what you will have to do, you will be able to see in this kind of thing. And then you need to drag it till where you want to show, you want to display, we want to display this grid without a scrolling. We want to show it till this grid. Because we, at the beginning we decided we will make it this way. We will leave this gradient of widest white space and the left side and the right side this wide and lifted space. Now, if I come here, I will be able to see our item is only from this. We can also do one thing. We can just show these three item. But we will do it later. But now we have our frame here and then go to the prototype. Here, you can see that overflow is pulling noise pulling. You need to select this horizontal scrolling. Okay? Now if I come here, now, I am able to scroll our data horizontally. But now we can see that we have this little design issue and now we will have to fix it. Okay? Now we can scroll our item horizontally. But before that, let me fix this one. So go back to the design again and I'm gonna open this one. So we have this item here, which is our for our number item, this is our fifth number item. We have problem with our six number items. So six number item is overlap with our fifth number item. We have our item number fifth, then we have our frame number six. So frame number six. Should have this. Okay, so now we have this. So it should start like this, right? So it should do work now. Now let's try again, do this clip content, and then I'm going to again adjust the size here. So I'm going to adjust the size to here. Alright, so now we have this option. Okay, So it seems that we also need to add just our other two part with this one. So I'm going to open that cliff again. So we have our six now, our seven is overlaid with this one. You can see. So now we need to select R7 and then we need to make sure that with a seven, we have this distance. We have this 28 distance. Now. We have our six, we have 07, but now we have our eight with overlap. Now we have same size. So this is our a, this is our surveyed, and this is six, this is our four. This is three, this is our five, this is our 678. Okay? So now again, I'm going to select the mini cliff and then adjusted with our grid. Now, I think, Okay, cool. Now we don't have any overlap. But you can see that in the bottom we have little issue here. So we need to change our height of this clip contents so I can just simply drag it this way a little bit so that we can get the shadow. Now we can scroll our item. Perfect. We don't have any issue with that. So we can scroll it. We're going to scroll it and we can scroll it. Then other thing is noticeable that I think we have little more space from here and then here. So what can I do now? I can simply go here. Okay, so I'm going to again open this item to add just this issue here. So we have, we have this, I think we have this 14420, but from here, from T, from four. So we need to make sure that we have our distance 20 between all the card. So we have six. So if we select six, then we can see is a T only have 277 is also going to have 20. And then from eight, we're going to make it to India as well. Alright, so now select mainframe and then adjusted with the grid that we want to show. So I'm going to add it here. Here we go. Now we can see that we have exactly the same look. And it looks really nice. We can do a scrolling in this way. Now we want to have one more item here, senator fix that I want to show here. We want to show only for car. We don't want to show this small one here. I'm going to adjust it with this grid. And then what can I do? The whole thing now I can add just one too. And I can adjust it this way. We can adjust it. Half of this one from here, half of this one here. Or alternatively, what can we do? We can also change our grid. So instead of 1015, maybe we can now add 20. And then we can decide, then we can select it in this way. Yeah, Okay, so now we have this show, so we can simply state with 20 or so. Let's make it 18. Sorry, I'll instead of 20 Now make it 1919 exactly. We need to make it 21. Okay, so we have this grid and in the right side we are taking his face in this and we need the left side. We're taking one white, one red, one white one red, one white, one hundred, one hundred, one hundred. So this is our main thing here. And now we have this main card. And for the cliff board, I want to have little more space here. Why is this? So that we can see the whole card? You can see the card is not visible. So I need to add little bit more space here. Here we go. So we have this card, and then we have this design, we have this card, and we can scroll our item. Perfect. And in the next part, we will implement this to button and then we will do a scrolling. 7. Horizontal Scroll by Clicking on Scroll Button: Welcome back once again. In this part, we will try to add this to our button and then data, and then this takes, then after that, we will add this horizontal. Let's call option by clicking right now we can do is calling my doing this swapping kind of thing, some drag-and-drop thing. But we want to have two button here. And then when they will click on it, we're going to show this origin to listicles too fast. Let's add the text here. So I'm going to add text here and I'm going to say here, I can say here almond fissure. So this gold woman fashion. So make sure that it is, the starting point is same with this item. So men facial and we don't want to have it bold. We can say it's medium bolt and then we can say these things. So I'm in facial and I'll, we can do one thing, I guess. Okay. So here we have this underlined. I don't want to add this underline. So I want to leave it in this way and then on to add this to button here. So first let's add a button. So I'm going to take up this ellipse tool and then I'm going to draw our lives here. So make sure that it has same height and weight. 46 by 46 fast, I will have to look on it. How it looks, it's bigger or smaller. So now 4243. Then I will have to first add effect and then change the background color of this one. And this is going to be this white background color. And here we have to add one icon. So I'm going to again take half of this plug-in called feeder icons. I'm going to say, okay, so we have this arrow right and left icon. So I'm going to say select this icon. And then I'm going to select this icon and then drag it here. I'm going to drag it here. And the center, we wouldn't be, okay, so it is inside this one. So we have this icon. And now what can I do? What I'm gonna do, I'm gonna make them a groove. I can say group and then say right icon. And then we can make it duplicate. So press Command D. And then we need to have one more icon, which is going to be left icon. So I'm going to remove this icon from here. And then I'm going to select this left icon. This left icon is going to appear here. And I'm going to put it here. The same. Now we have our left icon and ride icon. This is our arrow left. This is a right icon. So this is our right icon. This is going to be our left icon. So I'm going to change the name to left icon. Left icon. And I'm going to put this arrow left inside this groove. We have this left and right icon, and then I'm going to make them a group. So this left icon and right icon, we have selected two. I can name this one and this one, make them a group. Say, we can say Scroll button. Okay, so now these two thing, we can just add a starting point from this group. You can see the line in the left side of the text and in the line in a grid. Okay? So it means that it is in the perfect position here. So now all we need to add is call options. So when user will select this one, we want to show the last frame which is decent. This way we will be able to do is called. When a user will click on this item, we want to show them the first one. So this is how we can do a scrolling. And the good thing is that in our previous part, we already created our frame. So we can only do this one easily if we have a frame selection because the prototype prototyping is always look for the frame. Now we have all these frames are first frame is this one. And our last frame is frame eight, which is the last one. So when a user will click on this right side, we're going to select frame aid. When either click on the left side, we're going to select them and the frame number one. So this is the main logic here. So now let's click on the prototyping and now click on the right's items. So when we have, when we have this. So now you can see that by default it is going to select the whole group, but we need to select this button exactly. This one, right icon button you can see. So I'm going to click on it. And now inside the prototype where you need to click on these interactions and here click None. So instead of on. So when user will do onclick, we want to show, we want to show, we want to scroll too. Okay, not navy get to. Normally we use navigate to, to move from one place to another place. But this time we need to select a scroll too, because we want to scroll where we want to go. We want to scroll to our, you can see. Our frame where we want to scroll, we want to scroll is Columba frame number eight, which is the last item. Again. Before selecting, let me clarify it. So you go to the prototype section. You select your button that you want to show. After selecting the baton, you add interaction. You add these indirect shows. Here. You select it, click on it, you select an onclick, and after that, you click scroll to and after school to where you want to scroll, you want to go to frame eight, which is the last item in the right side. And you have to make sure that it is a frame that we did in our previous lecture. So I'm going to click on this frame eight. And after that here you will be able to see any mention what kind of animation you want to have, you want to animate and then you have this animation here. You can simply say easy in and out, then costume or heard about you have, you can just do it this way. So maybe you want to have bouncy, maybe you want to have slow. Keep the slow. Now if I come back here and then they can see that we have this icon now. So if I click on it, Here we go, are in the last frame. Cool. Now if I click on leftward on it is not going to work because we didn't enter prototype model. Our swab is call is always integral because we did it earlier. And if I click on it, it is going to go in the large side. Okay, so now what can we do here? We can simply add, we can simply add another prototype. So select this item again and click on it. Go to this click section, select a scroll tool. And then this term is going to be our frame one. Cool. And again, we want to have any met and intimate. It's going to be slow. What about the gentle? What they mean by gentle? Zen? Okay, so let's select this one. Now. We are in fast pace. We're in then the last item. Now if I click on it, and then we are in the first frame. So this one is working. This one is working, and this one is working. So you have learned how to do it. So I think gentle means it's going to give you a little animation. There's just a name of the animation. You can just play with this one. You can just play with this kind of animation. Like they have couple of options. Which one? Hormone or whatever you prefer, you just select any of this one, then it is going to add in your our project. So we have successfully added in this design. We have this little icon that will design here and then this fashion. And we can track this one in this way. We can also drag this one in. Our button is also working. All right, so I'm gonna stop this video right here and we'll continue with the next lecture. See you in the next lecture. Bye bye. 8. Men Fashion Card Design: Welcome back once again. In this part, we will try to add one more section for men fashion. For that first and foremost, I will have to increase the size of the mainframe. So I'm going to just select this one and then drag it. And now we will have to add one more texture. So I'm going to duplicate this text here. So I'm going to say Command D, and then I'm going to add this one here. So you can see that you always need to follow the red line that it will show you so that you can understand that it is starting from the same size, from the same, from the same starting point. Now, I'm going to say it to men fashion. And after that, we will have similar kind of car design with different image but drift. And this time we are not going to show this scrolling option. Rather, we're going to have to column, okay, so first I'm going to make it a duplicate. So not this frame. We don't need to select the frame, rather I'm going to select this card. Okay. Then I'm going to make it a group duplicate. And then I'm going to drag one more here. And from the same starting point that we have here. Okay, cool. So now you can see that we have some distance 37 from the top of the title. And now we can see we have men fish. And so what I want to, I want to have. So rather we can still read this image, but later we're going to change it. So I'm gonna, what I'm gonna do, I'm gonna make it duplicate. We want to show for as we have four here. Then I'm going to press Command D and then four. Okay? All right, so there is a mistake that I did here. Instead of selecting the whole group, I was just selecting. So what can I do now? I'm going to say, let's change it to nim. I'll say men fashion card. Now I'm gonna make a duplicate. Now I can duplicate the whole card. And then we have this starting point. Then do and do. All right, so first I'm going to make them a group. So make them grow faster. All these men fashion card. And before that, okay, so we have our tidy. It means that it is in the same distance. You can see that 202020. So we don't do make any sense or anything. So I'm going to make them a group. We can say men fashion one row. And then I'm going to make it a duplicate. So this is going to be our second row. I'm sorry, we need to have, we must have this starting point from here. Here it goes. So we have this thing, 202020. And now we can say these men fashion. We have this fashion design here, which is going to be these men fashion. So, okay, so now one thing that I want to add, I want to make these two row in a group and we can now give them an African slave. Men fashion. We can say men fashion section. And now let me see if we have tidy. Okay, so we have this tidy, we have 37 distance. We have our distance for this one. Okay, so we don't have an issue with that. Alright, so now it looks really nice. We have added this one. Now it's time to add multiple images for these four items. So for that, I'm going to select Place image again. And then instead of man or woman facial, the stem, I'm going to select men facial. So we have 448 image, so I'm going to select eight, MS. here, 2334567, and then eight. Now what I will have to do, so it is going to add our e-mails here and on moment. So it takes some time to load all the MS. Based on your internet speed and the image size. So as soon as our images ready, we should be able to see it in our mouse. Here you go. Now we have eight image, so I'm going to select, I'm going to replace this image by this one. So replace this image by this one. And to replace this image by this one, this one, this one, this one, and this one. Now, we should be able to see our e-mails here. It will take some time or we can just do Refresh there. It is going to replace our MS with this main image or minimise. So now we have men, facial and woman fish on ready. What I want to have, I want to have one pagination here in the bottom for this man fashion. So we have this design, we have this design and we have, so I don't like this picture, so I'm going to replace this picture. I'm going to select another picture. So I'm gonna say, I'm going to select this one. I think we did an add this one. And I'm going to replace this picture by this one. But it doesn't have face. However, is still it is better. Okay, so we have this thing here now. Now I want to have our pagination here, so we will add it in our next part. I'm going to stop this video right here to see what the next lecture. 9. Pagination Design: Welcome back once again. In this part, we will try to add our pagination. So far we have done this design and our application looks really nice now. So we have this card, we have this option here. And now it's time to add our pagination right here. So to add a pagination, we will try to take health from our ellipse tool. And then I'm going to start designing from this middle of two items. So I'm going to take ls and from here I'm going to start designing this. So we need to make sure that we have same height and weight. So we can say 35 or maybe 40, I guess. We will change it later, don't worry. So 40 by 40. Now let me see how it looks. It looks like this. I think it's the perfect size, so we can stay with this one. I'm going to add effect here. And then I'm going to change the color to this white color. And now we need to add the position exactly. I wanted to have this position. Okay, So we can start from this. We're going to start from, we're going to start from this one, which is our a d subshell, this grid. And then we can say 123456, then 123456 till here we can add our pagination. Alright, we will do it. That's not an issue. So now I'm going to add, and then in here we will have to add one icon. So we already have our icon, which is this icon, arrow left icon. So I'm going to, okay, so we can directly, we can directly get this icon from our plugin that we already have. So filler icons, so we're going to add this, this icon here. So it's going to add here. And we're gonna put it in the center. And then I'm going to put it in the center. And now we have this icon. So Fastow, we will have to make them a group. So this ellipse. Before making them a group, I'm going to duplicate this ellipse because we need some ellipse for our other options. Okay, so the thing is that I could, I go select the ellipse earlier. Okay, so now we have this lifts. Alright, so we have this text, we have this icon, and then we have this ellipse here. And here you go. Snow here. Inside the ellipse, we will have to add a text, and this text is going to be a one. And we will have to add multiple texts. But first let me put it in the center. In the same size. It should be in the middle. So what I'm gonna do, I'm gonna put it in this way thing. Still we need to. So instead of 16, make it 18. Make it 18. Alright, so now it is in the middle, so I'm going to make, make it a group also. So not this one. I just need to make group this ellipse and this tool. So I'm going to make the make group. I can say pagination item. Pagination item. Now we have our item, we have our next button, Previous button, then we have our item. Now I'm going to duplicate this group so that we can add couple of, couple of button, couple of pagination items, 123 and then four. And this one is going to be a dot. So for an ok, so we will need more actually, four, then five, then 67, and then the 81. And then this is going to be our two and this is going to be C. And this is going to be four, and this is going to be five. So we need to add ci dot here, not five. We're going to have this dot four. And then 54 is, then this one is going to be five. And then this one is going to be six. And Seven and here we will have to, here we don't need to have this text. We want to have this right icon. So now I'm going to take health of this ellipse, sorry, not the lifts. So we need to take health of this plug-in so that we can add our icon. So this time we will have to add this right icon. I'm going to put it in the center. And then what I will have to do, first put it inside. And this is the right icon. And what is the pagination? We have couple of pagination item. So 4321. And so we can see in this way, but we should have another ellipse here for mean. We must have this ellipse here. So where is this ellipse? So this one and this ellipsis. Look at it here. We don't need to have this lifts if I delete this one. Okay, so we should not delete this one. We have our how this pagination item this is, are these pagination items. So we have this item, but now we don't have, okay, So this is our pagination item, so this is our right icon. So I'm going to put it inside this one. So now we have this and this arrow left should be inside this pagination. So we have this pagination and seven to one. So I am just looking for this pagination item. Oh, okay. So these two thing is not in a group, so make them a group. Okay? So now we can say pagination item as well. Okay, so now I'm going to select all these pagination item here. And then I will have to do this tidy up so that we can see we can have the same distance. And then we can see that it's still, our data is not Distribute Horizontal Distribute vertical spacing. And then we have distributed horizontally scrolling. Then we have okay, but we need to make it in the same size because you can see that this one is not in the same size. You don't need to have this thing in this way. You don't need to have this thing in this way. We don't want to have it in this way. So what do we need to do? We need to make sure that it has in the same this layer. We can also increase the space, but now it is okay if we take this, this way, but still we need to make sure that each item is selected from the same distance. And this way we can adjust it. But later we can do the tidy of again. But now I'm just focusing on the same, ah, same height and same starting point from top and bottom. You can see now it looks same. And this way we can. So let me put it here so that it doesn't make any issues here. Well, we will do it. So now we can put item one by one here. And then we can make sure that everything is aligned perfectly. Six, seven. And then this. So now we can select all these pagination together. And I can say df, perfect. So now we have everything from same-size. You can see that starting up the top and bottom and from each item we have the same distance. Everything is fine. Now we have our origination. Now one thing that I want to make changes here. So this item, I want to change this background, this background color, this new green color, so that it means that this one is marked and this one is selected. And now we have everything from here. To check this one, what can we do? Basically, we can select our another grid. We have our grid options, right? We have our main grid column. So we can we can select, tell just for testing purpose. We can select and greet, and then I can select tardy. Then we can, here we can just have a look on it, that everything is starting from this way, from the middle of the line. Okay, so this way you can also check your grid so that we always have, so this is what we have now. Other right? So our pagination is done. We have successfully implemented our pigeon is shown as well as our horizontal is called View, and this is our header. And in the next part, we will try to design our category section. See you in the next lecture. Bye bye. 10. Fashion Category Design: Welcome back once again. In this part, we will add our categories section for our fashion design application. So first and foremost, what we basically do, we will try to design like this so that you can know how to work with the image contrast. So I'm going to show you this thing. So first we will have to take half of this rectangle tool. So I'm going to add this rectangle tool. And before that, we will need to add our text here. So first I'm going to duplicate this text here, this title. I'm going to duplicate this one, and I'm going to track it here. So exactly the same starting point that we want to have. Maybe here. And I can say this one, okay? Or we can take a little bit more space from the top. I can say choose category. So we can say Choose Category. And then we're going to have the same design. So choose category. And then we want to have one rectangle here. So I'm going to add this rectangle here and then add, sorry, we need this size, normal size. And then we have this category. So we can track a little bit more. And then we want to have this category, these inside this rectangle. And here we go. So we have this option now, but we were prepared to one color for this one, which is this color. So I want to add this color for this category of background. And after that, we will have to add our rectangle to add our category image. So I'm going to add this size and make sure that, okay, First let me add, let me add some margin here. So border-radius here, so five. And let's see how it looks. Maybe we can try to add ten. Here you go. And then we can just select the card from here. And this is the card. Now we want to add. So I'm gonna say, I'm gonna, so I can rename this one. I can say Category, Category mean card. Then say category item card. And now I want to duplicate this one. We want to have we want to have this kind of and make sure that we have the same starting and ending point. So this is going to be our starting and ending point. Then we can make this thing 43. Okay, so we have now forty three, forty three, forty three. And our starting and ending in the left side is same. So we have this point. So if I select this one, I can see that this red symbol is connected to this one. And this one is also connected. Okay, so now what I'm gonna do, I'm gonna select all this rectangle card, not discard. I'm going to make them a group, and then I'm going to do so we don't need to do tidy up because it's already it's already has the same distance. So I'm going to duplicate it. And then I'm going to add, I'm going to add one more row here. And let me make it, it's in the same. So if you see this red symbol, then it is in the same from top and bottom. Okay? So now these two, I'm going to make them a group. Then I can just rearrange it. Okay, cool. Perfect. So I need it in the center of this item. So far we have these 44 or four items. Now what I'm gonna do, I'm gonna select MAS for this four items to place images. And then instead of this one, I'm gonna say fashion category. We have 36. Let's select this. Let's select these all. And we will add two different, I've got two different famous soul. It is going to take some time to add this one. Still is loading. And now we have six. So I want to press this one here. I want to press this one here. I want to add this one here. I want to add this one here. This one here, someone here. Alright, so we still need to image, so I'm going to place image. I'm gonna go to this folder. I'm going to add. I'm going to select this. And I'm going to select this. And then I'm going to press it here. So this, and this. Cool. So now we should be able to see our four images. Now on top of the images, I want to add text. So for that, what I want to have, this is our group, and this is our old group, right? So grew four. We have, and we have this group. And we have these emails. Okay? So now we have this image. Then we have this image, this image. So if you select this image and then it will have an option to change the MS contrast. Okay, So you have, like it has lot of functionality you can just try based on your, you can just change the exposure association. Couple of other options they have. In this way, you can just chance the main design of the EMS add background color or anything. You can do it in this way. So I'm going to increase the contrast. And for this one, I'm going to also change the contrast. I need to change. Okay, so for some reason this one is not selected. So I'm going to select this image here and also change the contrast of this one this way. And then select this one here. And I'm going to change the contrast of this one and this exposure so that it looks a little dark. And we're going to put our text here. So this one is going to be this. And here we go, We have this one. So our contrast is going to look like this. And these are the four. And here we have another MAs. And for this image, I'm gonna select this contrast like this. These images. We need to add this, not this month. And then we have this image. And then we have this shoes. Alright, so we have all this thing now. So we can just add the text here. So I'm going to press the text here on top of this one. I can say wedding dress. Now, it doesn't. This one is not visible at all. So what do we have to do? We will have to change the color to white for this one. But it's still, it is not feasible. So now what can we do? We can just change the image contrast of this item so that it is visible. Now, you can see that. So we can say a wedding dress. And then for this one, we will need to one more text. So actually, what can I do? We can basically duplicate this text. And then I'm going to put it here. I can say winter jacket. So I can say winter jacket and it is visible. And then I can say shoes. And then we have this one. So we need to change this to shoes. So I'm gonna say shoes. And I should put it in the center. And the center, we have shows but it is not visible. So I'm gonna add a little more contrast and the little dark so that it is a living symbol. So shoes. And then for this one, I can say, oh, I think I need to make it more dark. So I'm going to duplicate this text here. So I'm going to drag it here and make sure that it is. I can say a winter jacket. Alright, then we have our T-Shirt for that dish art. I'm going to I'm going to duplicate this text and then we have to add, I'm going to say a t-shirt. But it doesn't look good here we have two. Again, we have to change this contrast on this one just to make it a little dark. Cool. This is the contrast, then this is the normal chart. I think we need to genes this one here. And here we go, we have this mood. And I'm going to change this duplicate. And then we have this one, shard. And then we have another, another category here. But I didn't change the contrast, I guess more. So I will have to Mecca this. And then I can say, duplicate this one. This one I can add to our winter t-shirt. I'm just adding a random name. And then we have another one which is going to be able to shoes. And then we can say thermal shoes. We need to make it a little contrast. Here it goes. So we have our categories ready now. Alright, So you have learned how to add images on top of emails. How can we text? And then you know that how can you add the contrast? So this was the main purpose to show you how can you add in this one? So I'm going to stop this video right here and we will continue with from the next lecture. See you in the next lecture. Bye bye. 11. Newsletter Section Design: Welcome back once again. In this part, we will try to add subscription I've shown in our design similar to this one. Solve for that. So what do we have? Basically we have this one here. Alright, so first off, I'm going to increase the frame size or horizontally so that we add, we can add more options here. Now we need to take half of this rectangle here. I'm going to draw a rectangle here. And this is the rectangle that I want to design here. And then let's see how it looks. So we have this size of rectangle. I can decrease it a little bit and then we have this issue here. So I'm going to select this color as well. And after that, we need to add to one image here. For that, I want to add, I want to draw a rectangle here to put our e-mails here. So I want to add to one rectangle here. And what I want to have, I want to add little design here. So double-click. So I want to have this. We need to select this one here this way, and here also this way. And the middle. And here also in this way. And after that, I want to add little bit of water radius 20 pixel. And alkalis. Do it. So add whatever it is, 20 pixels. Let's see how it looks. It looks like this. Now I want to paste our e-mails here. So please one image. And we see mess I want to paste here, I can paste this one. And as soon as we have this one. And we should be able to see our image here. Alright, so we also have one input field here and then one title. So we have this one. So I'm going to quickly add a text here. And I can say subscribe to news letter. So we have this issue here. We can say subscribe to our newsletter. And so I'm going to increase the font size of this one. Should be 30 to a little bit bigger. And I'm going to change the font, style up this one. Not this one. I'm going to add something like this one. Not exactly this one. It looks nice, but it is not feasible totally. So we are going to select something else until we can choose this one, subscript two newsletter. And here we have two more design, which is these two design that we had earlier. So what is it basically is basically hit our ellipse design that we had. So I'm going to duplicate this one. So where is this header ellipse design? So this header ellipse design is here. So we need to go up. So we need to go up and down. So this is our main illustration that we designed earlier. So what I'm going to do basically I'm going to make them a component. So right-click and then create component, okay, So that we can reuse it. So now it is inside our asset. It is inside our asset. Okay, So we have this thing. So what I'm gonna do, I'm gonna just duplicate, I'm going to just drag it here. I'm going to just drag it here. And then again, I'm going to just drag it here. And we have our newsletter and just over here. And then I'm going to add to one rectangle here to add the text here. So I'm going to add the text here for our subscription, for our button. So it should look like this. Then at 20. And then I'm going to choose this one. I'm going to add this chalk. So what do we have basically here we have this result. We don't have any stroke here. So we don't need to have any stroke here. So we have 20, I think. Instead of 20, let's add party. So now we have this design tardy. And I'm going to duplicate this one. And I'm going to chance the second button size. And I'm going to merge it with this one. So fast, change the background of this one so that we know basically what we are designing. So this is all subsequent buttons. So this is what our second button looks like that I just duplicate it. So just duplicate the same button here and then folded on top. Now we have this one here. I think we need to increase, we need to increase our need to increase our this bottom side. So you can just increase a little bit in this size and this side. And here we have one text which is going to be our placeholder text. And this one is going to be 12 pixel. Lot more than that. I'm going to put it here. So email. And then I want to add to one icon from our icon which is called r. We can say cent icon. And just in shock it here. Put it here. Also add just the text and the center. And let me so it is outside of the frame, so it should be inside the frame. Now we have our icon and we have our texts. So I can add just a little bit closer to this one. Here we go. We have this e-mail, we have this. Now we have this text here. We will have to add subscribe button. And I'm going to select it to 16. We can select it 20, I guess so twenties or descend font size for this kind of button. So we can say subscribe here. Cool, we have this, this, and why do we need to fix this issue here? So we need to add it in this way. And then we have our image, we have our this design, our subscription, and then this text I want to add here. And we can add. And I'm going to duplicate this text here. And for this one, I'm going to make the font size is 216. And here I'm going to add another text. I can say. You will get far and discount by email promotion. So you will get discounted offer by email promotion. There's eight for this one. So we have our subscription, we will get all four and discount by email promotion. This is our newsletter. It just the basic newsletter. All right, so we have designed our subscription part so far. And in the next lecture we will try to do something else. So see you in the next lecture. Bye bye. 12. Footer Section Design: Welcome back once again. In this part, we will design our photo section for that, I will have to increase the frame size a little bit more. Alright, so in our footer we have this kind of design. So we have our, we have our two item, so product and then information on little information and then social icon. So fast I'm going to design this rectangle here. And then I'm gonna draw this rectangle because we need a rectangle to add our item here. And let's see how it looks. How the white looks basically. So it should be this. So these white areas, okay, so I'm going to add the color of the background. I'm just folder. So it looks like this. So this is our footer. Now we are going to add our, we're going to add our item into a folder. So first we're going to add our title and we can say that we can see this is the efficient application. And you can say, all men dress. Just a random name that I am just adding. It should not be meaningful. The main purpose is to show that text. So we're going to start our item from here, oranges. And then I'm gonna, I'm gonna duplicate it. And for this text is going to be 16 pixel, or maybe 15 pixel. Here I can say that. I can say wedding dress. Then we can say party dress, DJs. And then I can say, we can say a winter collection, window collection. And then I'm going to add one more text here and I'm gonna say someone's shoes. All right, so we have this thing. So I'm gonna, let's have a look on it. So fast, select all these things, make them a group. And here you go. So we don't need a good idea because it's already in the same distance we have. So now what can I do here? Basically, we can make them a group. And then I'm going to duplicate this one. And then I will have to duplicate it for this item. And then I can say child dress. And then we have another information and the text and the right side. So I'm going to select the text here, and I'm going to add the text here we can say about. And here we go. We can add these about from here. And this about size is going to be in this side is 20, right? So this one is also 20. And here you want to add information seconds, say Loren Ipsum. I just want to add some dummy text here. So to add dummy text. And we can take, you can just add this dummy text here. So this and this. So we have this text here. And then I'm going to draw, so you just need to select the Text tool and then draw this inflammation in this way. So that this side, so that whatever you paste here, APR within this, within this option. But instead of 15, so 20 we do Add Selected 12th. And then only it will work. Or we can do one thing, we can take it one step back here, and then I can do it here. So we have our about, we have our information, but still we need to add just this one little bit. I think from here we can adjust it. Cool. So we have this one and in the bottom we have shri icon for this one. So I want to design this icon in this way. So I'm going to not rectangle, I'm going to take ellipse tool. So I'm going to add this ellipse tool in this way and then define the Ellipse tool 40 by 4040, and then 40. And let's see how it looks. So it looks like this. So we have this 40 and then I'm gonna, I'm gonna duplicate it. Duplicate selection. So how many icons we have? We have our four icons. We have four icons. So I'm gonna duplicate it four times three and the four and make them a group. All this item, economic growth. You can say, we can say like going. And let me see, okay, so we have the same distance and now I'm going to change the background color of this one. We can select this color. And now inside this, we will have to add our social icon font that I'm going to take icons from feeder icon. And I'm gonna say, I'm gonna say Facebook. I'm going to say Facebook. So I will have to select this whole Facebook. I need to select this one inside this. And I'm going to take it inside. So our Facebook is here. And then we need to add in star. So I'm going to select this instar, put it inside this frame, and then drag the Instagram icon inside this. So now we have our Instagram icon, but we think we need to put it in the center this way. Yes. Now we have our LinkedIn. So we have our LinkedIn in this way. And then I need to put it inside the frame. And then after that we have Twitter icon. So I'm gonna see Twitter. So Twitter is going to appear here and then put it inside. Before that, put it here. And then here we go. So we have all of our icon. So we have successfully designed our footer is just a basic food or item. And I'm going to stop this video right here. And in the next lecture, we will try to design our sign-up and sign-in. See you in the next lecture. Bye bye. 13. Sign up Page Design: Welcome back once again. So far we have designed our main homepage. We have designed our footer, our subscription newsletter part, our category section on pagination, fashion section, this origin to the scroll view. And now we will have to do two more things. One is for sign-up and sign-in page. And another thing is that when you double click on it, we will show them one pop-up modal box like this kind of card. And we will also implement this kind of horizontal scope view that we did earlier. And then we will do, we will have to design this thing also. So for that, first, I'm gonna complete this sign-up and sign-in page. Then we will look on it. And now we have our design section here. So for that to add sign-up and sign-in features, we will have to create our different frame for our sign-up sign-in. And I will try to show one more screen design. So this is our deck stuff. Now I'm going to select one more frame. So we'll set of desktop. I'm going to change the name, I'm going to say it home. The main piece. Now I'm going to select a frame. And now this time I'm going to draw our custom frame. So I'm going to draw a custom frame. So you can draw a custom frame. I'm going to draw it in this size. So we will add one EMS and then we will add our information. So I'm gonna make it in this size. Yes. So I'm gonna say sign off. I'm going to add a border-radius to into pixel. And not trying to fix that, I guess I can fix that this pixel is enough for this one. And here I'm going to add one more rectangle. Here, or an indirect angle. We will show our MS. So I want to, I'll make it some rectangle so that we can adjust it with the left-hand sides. And now from here, what can we do? So I'm gonna make it little this. And now I will have to add the MS in this part. So what can I do? Let's try to add this MS. Let's select this image. And now, so I'm going to paste this image here. Okay, so what else we have? We have any other shopping amaze? Maybe we can try this EMS and let's see. Oh, not this one. I'm going to keep the previous one. And here we need to add one text and this text is going to be sine of sign-off. So, and then we will have to add this to 20 or maybe 24. And then I'm going to change the color to, I'm going to add one color that we have, all, the dark one that we have. So I think there is a pre-built and dark green color. So I'm going to keep this one. And then here we also need to, we can now slick our grid so that we know that exactly from where we started. So we have our pre-built grid. Then I'd can I do now? So this is our text. So I'm going to put it here. So we are going to start designing our items from this. Great, okay, so I'm going to select our rectangle here, and here, we will have to, we will have to draw our input field. I'm going to add border-radius in two pixel. And we need to add our border here. So at border one pixel. And before that, let me run this one and let's see how it looks so that we know exactly where we need to make changes. So we have this one and it takes some time to do this thing. Alright, so we have this design, so I'm going to change the background of this one. I'm going to make it white. And then we have this white. And inside these I'm going to put a name. I'm going to say, put a text here. I'm going to say name. Name is going to be this name. And instead of 24 and it's going to be 12, is going to be 12th. We need to adjust this one. So this name and this rectangle, I'm going to make group. And then I'm going to make a duplicate. So we need to have two item, two more items. So one is for e-mail, one is for password, and we also need one for our button. And before button we need another item. So I'm going to say name and I'm going to now change the text, so name. And then this is going to be our E-mail, is going to be our email, and this is going to be our password. All these are placeholder, placeholder text. So password and this one is going to be our text, but this text is going to be here. So I'm gonna, I'm gonna change, remove this takes from here. And for this one, we don't need to have any border. So we need to have our background color, which is this color. And now I need to put this text here. And here we can say sign out. Alright, and I can put it here. So I want to increase the font size of this text. So I'm going to add it, I guess, and then I can just make sure that it is in the center. Now we have our sign off and we can add our icon here. So I'm gonna select Filter icon here. I'm going to add this icon. So I'm going to just drag this one here. And I'm going to change this color to white and put it in the frame. Alright, so we have our sign-off, we have our sign-up page. And here I want to add to one Agree button that we often see with terms and condition. So we have this term and condition. And here we go. And we can add a little border radius. So I can add to this border radius 1010. I can add this border radius five. And this is how it is going to look like. The right. So we have this pagination and I think we can add one icon here, which is going to be our Don icon or select icon. So there isn't any icon for this one. So there isn't any icon for this. Okay. So there is icon. I was looking for this one which is called Check icon. Yeah. Alright. This is the name of this one. And I'm going to put this icon inside this box. All right, so our sign-up page is ready, and now we need to add one more text here. So I'm going to select text here. I can write here at text, I can say already have an account, then sign-in here. So already have an account sign-in here. So if you are already already have an account, then they can sign in by clicking here. And if they don't have ten, we can send them for sign-out pace. So now I'm gonna, um, okay, so our sign-up basis done, and I'm going to stop this video right here, and we will continue with the next lecture. See you in the next lecture. Bye bye. 14. Sign In and OTP Page Design : Welcome back once again. In this part, we will design our sign-in paste and our ODP based design. So we need similar kind of design for our sign-in page. So what I'm gonna do, I'm gonna select this frame. And then I'm going to duplicate this frame. Okay, so now I'm going to make it sign-in page. Okay. So I'm going to make you I'm going to say sign in. And I'm going to also change the text to sign in. And then I'm gonna change this. Remove this one rather. I'm going to add this thing here. And also I'm going to add this thing here. And we don't need to have this one here. We don't need to have this one here. So, okay, so we have this one here, so we can track it here. We can start from here. I think we can just rearrange this one. You can also drag this one here. So maintain 34. And I'm gonna put this text here. So I can say here, don't have account. I can say don't don't have an account. Then I can say I can say sign off here. And this one is going to be sine. Alright, so we are done with our sign-in base, and now we need another design for our OTP. So I'm going to duplicate it. So we have our sign-in phase and we have our sign-in. Now, it is all going to be our RTP, ODP. So here we don't need to have this one. We don't need to have this one. But it's still, we need to have a button here instead of this text. We can, Okay, I think we can keep this text here. You can, I can simply write here or the p that is going to be okay. So all the P here. So this is going to be where OTP pays. Here. I'm going to change that takes to verification. I can say verify. So I'm going to say verify. This is going to be what text. Here I want to add for rectangle box for our OTP that we need to put. So I'm gonna say this size. And I'm going to add this white color. And then I'll shadow. And then one stroke. Yes, a little bit of border radius, maybe ten pixel, not ten pixel, five pixel. And let's run it and let's see how it looks. So far. We have our sign-up sign-in page. So this is our OTP pays and it looks like this. It is okay. We don't need to have this text here. So now I just need to duplicate this one a couple of times. So I'm going to add it. Okay, so we need to make a duplicate. And then 23456. So we have 61 and then we can see verification, Alright. As soon as the verify it, we will send them to the homepage. Alright, so we have designed our sign-up pace, our sign-in pays, our design pace. And so far we have designed so many things. And so we have OTP players sign-in page sign up, pace and homebase. And then the next part, we will try to design this model box and we will also have to add our prototyping. See you in the next lecture. Bye bye. 15. Item Modal Box Design: Welcome back once again. In this part, we will try to design our model box for our item. For that, I'm going to create a first-time, I need to create our custom frame here. So I'm going to select a frame here. And I can say, this is our frame. Yeah, we can do this size and then I'm going to add border-radius ten. And this frame name is going to be, I can say what I can say. I can say item model bulbs. All right, so now I want to add image. For that. I need to add a rectangle first. And this is our rectangle that I want to add ten. Okay, so we have this one rectangle and I'm going to duplicate it. I'm going to add one more here. So I'm going to add two. Okay, let, let us put it in the same size. Now, I fast, I want to add two images here. So what I'm going to add, I will have to add to EMS here. I'm going to select this one and this one. And let's put it first here. So this one is here and this one. So these are the two EMS. And as I already told you how to do this, scrolling, you already know it. So what we're going to apply the same techniques so fast. I want to make, make it a fragment, fragment, make it a frame. So this is going to be a frame nine. And this is going to be our of frame, frame number ten. But if you want, you can also change the name because this number is coming from the whole project. Or in our other, in our homepage, we did eight frames. So as a result, it is going to start from nine and then ten. Okay, so now I will have to make them a group. So I'm going to combine, sorry, we need to make them in one group, which is going to be our group, elephant again. Okay, so now what we need to do basically, so we need to click on this clip content and then we need to size it till this one little space here. Okay? So we have these things and okay, so another thing that I forgot to add, let me add it fast. So fast, Let's select this one. I forgot to add this effect, so let's add this effect here first. And if we run it, we can also run this one this way so that we can see it. So we have our frame. And I'll, we combined all these in one frame. And then okay, So it looks good. Okay, so there is an issue here. This one doesn't have a border for, I mean, for this one. So if we look at here, if I look at this frame number ten, and this one is frame number ten, but this frame doesn't have borders, so we need to add water to this frame so that we have exactly the same. Okay, so select the frame and add border-radius here, not the border. So we have these two border-radius. Alright, so now we can select our mainframe for these two. So then click on the clipboard and then do it in this way. Now go to this prototyping. And here at horizontal scrolling, now, we should be able to see, we should be able to scroll our item right now we need to put these to do item here, to button here. So we already have our button ready. So we can just reuse it. Reuse it. What can we do? Where is our buttons? So we have our home. And let me minimize this so that we know where is our button. So we have our pagination item, we have our frame fashion card, and we have our main section, section pagination rectangle. So main section. These are the two things that we have. We have right icon, we have left icon. Okay, so what can we do here? So we can duplicate it and then you can drag one icon. We can drag it from here. Actually, I'm going to undo this one. I'm going to undo this one here. I hope we didn't break anything. I hope we didn't break anything. Okay. Everything is fine here. So what I'm gonna do basically, I'm going to make it where it is. So I'm going to make it a component so that we can reuse it. So create component and the left icon is going to be created. Component. Alright, now we don't need to drag and drop it from here. We can directly do it from our component, from our asset. So we have our left icon, so I'm going to drag it right icon. I'm going to drag it here. And then we have our left icon. So I'm going to drag it here. How easy it is, so we don't need to do the same thing again and again. And now another thing is that we need to put it inside our box. Okay, so we can make sure that we have, are exactly the same distance here. And we also need to add this one from this size. So we can make it this size. And let me see how it looks. So it looks like this. Okay, so we need to sorry. I think we've made some mistake here, so I'm gonna put it here. Okay, so we have now the same distance from this size and also the starting point is same. Make sure that we have this thing. So we have semi starting point. Now, if I move to this prototyping, so for this button, we already have, we already have one prototype. It's coming from the previous one, so I'm going to remove this one. Now, we don't have any prototype for this button. And as we met component, it took all the functionality and features from our previous pattern. So you just need to select this one here. And from here, you just need to remove the prototype. Then we don't have any prototyping now in this pattern. And we can do about prototyping from here. So now I'm going to add interactions. Here. Click on it, click on onclick. And then from here we need to add a scroll to where we want to scroll. We want to scroll. We want to scroll to this one is frame nine. And I need to check which one is exactly frame nine and which one is trimmed ten. So this one is frame nine and this one is framed in August. We are now in from nine. We will have to go to frame ten. Okay, so we need to now, we are supposed to move to scroll to frame number ten. And then we need to have animation intimate. And then instead of easy out, we need to set gentle. Okay, so we need to say gentle from here to here. Okay, so it's gonna look like this kind of, this kind of innovation. And from this one, if we click on it at interactions, select a scroll from none to scroll to add frame nine. This is our frame nine. And in animation. And then select this and gentle. Okay, So hopefully we are able to see we can, we can, we can scroll from left to right and left to right. So we have learned how to do it. All right, Now, what else we have? We have to add one text and then we need to add of normal text. And then now a couple of other options. So I'm going to add R. So now I'll go back to the design section here. And here. First, let's add this layout grid so that we know from where we can start. We can start from this one. So I'm going to add a text. So I'm going to edit text here. I'm gonna say, we're gonna say, we're gonna start from here. We can say summer facial, the summer dress, or I can say summer t-shirt. Just random text. Okay, so we have this instead of 15, I'm going to select it to 20 so that it looks bigger. So T Some are t-shirt. Here we go. And then after that I want to have, so I'm going to copy this some text from Loren ipsum. Again, I'm going to add this text here. And I'm going to draw a text. And I'm gonna paste it here, but we don't need to have twins. We need to have a 12th. Cool, It looks nice so we can reduce the distance between these two item. And then I can also reduce this height of this text. So we have this information now. And after that, we want to have a one plus icon. One price icon and then plus and minus buttons. So I'm gonna say dollar for 5450 and the size is going to be 20. All right, it looks nice and it's still, we need to add a couple of options here. So here we also need to have a one plus and then the number and then the minus button. So for that, I'm going to add a rectangle here. I'm going to draw rect, small size of rectangle, add border-radius five, and then change the color to white. Then we can add our stroke and let's see how it looks. It looks like this. And then I'm going to Command D. And the D of what I will have to do. So I'm going to add here minus icon, that takes as minus. But you can definitely draw it. And then I will have to add vary because size of and here we can put it in the center. On the right, we can put it in the center. And then we need to add a number here. I can say five, but we will change the font size to normal size, maybe 20, and then put it inside the text. So the number is five. And then we're going to add one more text, which is going to be our plus icon. So this plus icon. And again, I will add it because size of font size. So I'm gonna say 40 are not 44, this one, I think 36 or 24. I need to put it in the center. So now we have this minus and then we have this plus icon. I'll write. It looks nice, but now what do we need to have? We have some other things to add. We have this oh, LMS excise and then this one and this button. So I'm going to add, so what I can do here. So we can make all these items in a group, this, this and this, and also this, make them a group. Okay, I know we can say number of item. And here we will need to add our size. And I'm going to add effects of this one. And let's see. So we have this and I want to have a border radius five pixel, and then I can duplicate it four times. So I'm going to say Control D. So instead of directly doing this thing first, let's add text here. And I can say large, and this one is not going there. So it's going to be 20 pixels. And then we can put it here. We can put it here, are not in the right side, but in the rare side. So now we have this and we have this. I'm going to press Command G. And now I can make a duplicate of this item. I think for large. Then this one is going to be medium. This one is going to be small, and this one is going to be extra large, extra large. These texts, I think I need to adjust it. And I have this thing here. But it is not in the same size, so we need to adjust this one here. Alright, so now it looks same. And though we can also check it this way, we can select all this group. And then we can check our tidy. So there is an entirely off. So we have this thing here. And here you go. We have this thing I think is still is not in the center. So I want to make sure that it is in the center. Yeah, it looks center. But let's check it again. Right now. It is in the center. And right, so i, now we need to add one button here. And this button is going to be one button and three colors. So I want to add ellipse tool here. So Ellipse tool. And then here I want to add 45. This is our 45 lifts. And here I want to add T items. And now I can choose this number and this one, and also this one. We have T icon. And now we have to add one more button. For that. We need to draw a rectangle here. And then we can add this 25th cell. And here we go. We need to tense our color. And I'm going to add plugin. So we need to select our cart icon. So this is our cart icon. I'm gonna put it here. And what I want to have, so I need to first put it in the box, in the frame, and then change the color to white. And then I will have to edit text. So I'm gonna say, I'm gonna say Add to Cart. For x equal we have Add to Cart. All right, so we have our button design now. But for the font size, I think, for the fonts, I think I can change it to 14. And do we have this? We can take it a little bit closer to this icon. So we have our button, we have our design. But here I want to have one icon, which is going to be this icon, which is our clothes icon. So I'm going to put it here. So I'm going to change the width and height to 35 by 35. And drag it here. And let's see how it looks. It is outside of the frame now, so put drag it to inside the frame, then only we can see it. So now we have our icon, we have our design and we can do is calling. All right, so finally we have this end, this one. Now in the next part, we will try to connect this model box with our mainframe, where we have our, where we have our item. So when user will click on this item, we will open this model box. So I'm going to stop this video right here and we will continue with the next lecture. See you in the next lecture. 16. Prototype Overlay to Show Modal Box : Welcome back once again. In this part, we will add our model box, our item model box with our card. So fast, let me run this home. What we can see in our home. So this is our model box that we need to connect. Okay, So for that, so let's say when user will click on this item, we want to show this model box, which is our item model works. So now this is our main homepage and this is our main design. And the weekend horizontally Skoll, we can particularly scroll this way. And then we have our pagination design. We have our section, we have our pagination. We have our footer. So now I want to, and I will click on it. This card, I want to show our model box that we just design here. Okay, so now I'm going to click on this prototype mode here and then select this frame. Only this frame. Now, when you select this frame, you can see that this frame, okay? So now I will have to add this interaction. So click on it, click and we need to have a quick option. And then here, instead of navigate to, we need to select Open. Open overly means the model box that we will show where we want to show. We want to show with what we want to show you and to show our item model works. Now here you will see a couple of options. So this one is already connected. Okay? So now if I come here, if I click here, I can see in this model box. Okay? But still we need to add a couple of options and this one is also working. So here we have two options. One is close when a clicking outside, it means that if I click outside of the modal box, we want to close our awfully are not. Currently, it is not working. So let's select this one. And let's see, now it is going to remove if I click RC now, actually it doesn't look overlay. I'm in the model books because when we open modal box, which we usually see some kind of shadow, like the background is going to get a little bit of blur, so forth that they have this option to add a background behind overlay. Select this one. Now what can we see? Now we can see this one now. It looks really nice. It looks like original model works now, kind of things that we usually see. And now here is an option. So how much color you want, like if you add 100%, then it is going to give you the whole black background. If we add them, then you get this, this kind of soil, give it a party. And now how you want to show your option. I mean, how you want to add your model works. So we have these kind of background now. Now if I click, our site is going to remove. Now, we can see that our model is coming from left side, but we can also select from right side, left side. Now if I click it, it's going to come from left side. We can also select from TAF. So now it is going to come from the top. So I'm going to keep this one n. Now, again, we need to work on this icon. Now if I click on this, it should go on, but it is not working now, so forth. That what I will have to do, I will have to go to this frame, which is this frame. And here I will have to select this one. And now I need to add the interaction here. So what I want to say here, when onClick, what I want to, I want to say close overlay. Okay, now I'm just going to connect it here. Now if I click on it, it is going to close, open this one and then close. So I can also add the dimension here. Close overlay. Overlay is going to go back directly. So it's going to automatically call back from the officer from the offside. And I think I need to adjust this design a little bit. So let's go back to the design. I'm sorry. I need, you wanted to put it here in this size. This is our sine. And do this. And we can just call it, we can click our side. It is going to go on, Remove and then click on it. Alright, perfect. So we have all of our design and in the next part, we will add this prototyping for sign-up and sign-in pays. See you in the next lecture. 17. Prototype for Sign up and Sign in Page: Welcome back once again. In this part, we will try to add prototyping for our sign-up and sign-in base. Alright, so fast move to the prototype option. And now from here, and now we need to click on the Sign Up button, click on the Sign Up button, and then add indirection. And here click. And instead of navigate to click Open overlay because we want to show our, what do we want to show up in overlay? We want to show sign-up base. So here, select all this option and also this one. So instead of instant I want to have, I want to say move in and then add moving from tough. And then you can select, you can select the handle. Okay, So now let me try. So if I click on sign off, then we have this nice design. So we need to add any like the background to 40% because we have white background. Now it looks like that we have this issue, maybe 50 per cent. Now it looks nice. So when user click on the sign-up page, we want to send them to the homepage. Okay, so now first at an image, firstly at the sign-in prototype. So click on the sign-in. So click on the sign-in and then add interactions, click on it. And here you need to click again open overlay. And from this open overlay, this time we need to select our sign-in page. Click on this item, select the color contrast to 50 per cent. And at morphing animation, whatever you like. And then gentle. Now, let's see. If I click on the sign-in. So we are in signing phase, but there is an issue. I didn't notice this one. Okay, So we have another background image, another image here. So let me solve this one quickly. So we have our sign-in face here. So from where this thing comes. So I'm going to remove this one, and now it has gone. So our sign-in is done. Now, when user will click on this, the sign-in, we want to show them to homepage. Okay, so I'll go back to prototype. When user will click on the sign-in button, we want to send them to home-base. So on, click and then navigate to where we want to go to our homepage. And then instead of instant, I want to say move in and out. Okay, so let's try. Okay, so we're in homepage, click on it, sign-in were in homepage. And when user will click on the sign-up page, we will send them to sign-in phase. After sign-off, we will send them to sign-in page. So I'm going to add indirection, click on it, and then I can say navigate to wherever you get to. We are going to send them to sign-in pace. Instead of instance, we end to say morphine and then this thing. So sign off and then sign off. Okay, so there is an issue here. Now, thinking logically that we have our model box. We can say that if you get to, we will have to sit open overlay. Okay. So open overlay to sign-in phase. Okay, so now I'll go back. Now if I click on the sign-up is we have this d. Now if I click on the Sign Up phase, now we are in sign-in page, and if I click on the sign-in page, we are in our homepage. And another thing that we need to add already have an account sign-in here. Again, it goes to our sign-in peers. So click on it and then click on Open overlay. And from here, we need to click Sign-in here and then add 50 versa. And instead of instance, add moving at some tough. So already have an account, already have an account sign-in here. So sign-in and if sign-in, then when home-based and there is another okay, so we did a mistake here because I'll go fast added here. So don't have an account sign up here. So I need to add one text here, which is going to be N is mistake. So sign off here. If don't have an account, so click on it and then we need to send them. We need to send them to sign up is open overlay. We want to go to sign up pace and then instant move in to the site. Okay, so we added this. I'm going to remove this prototype from designing pairs. So if you click on the sign-in, we will send them to the RDB phase because we have our OTP players. Okay, So now, so click on it. So onClick non open overlay. And this one is going to be OTP and add. All these things. Move in from toe and it's going to be 50%. So sign-in paste from here, don't have an account sign up here. Already. Have an account sign-in here. And then click on the sign-in were in order we face, but we have lost our image. So I'm gonna fix this one here. So we have this image. So I'm going to, I'm going to quickly duplicate, I'll quickly duplicate this EMS From here. And I'm going to drag this one. All right, so we have our image here. And now when you double-click on the verify, we will send them to the homepage and go back to prototype. When they click on this button, we add one directions and it's going to be our onclick, navigate to where we want to go, we want to go home paste. And it's going to be instance. Okay, so now if I click on the verify, we are here. So now click on the sign-in and they sign-in is going to be our OTP pairs from the OTP paste. If I click on it, we move to this one. So are we are in our sign-up base. So I will have to fix this text. Already. Have an account. So we are in a sign-in page. Don't have an account sign off here and then sign it. Sign off, then signing and verification in. Okay, and if I click on it, we can see our model box and then we have added artists call option as well. Alright, so we have added all sorts of prototyping. 18. Export and Share Design: Welcome to this lecture. In this part, we're going to learn how to export our design. So far we have created for frame. One is sign-up, sign-in, home item design and art if you frame. So let's say I want to export this home fast. For that, just need to select the frame that I want to export. And then in the bottom there is an option called Export. Click on the plus icon. Here, there's a number of item. How many items you want to export? 12 or three, whatever you want. Like, I'm poor, like how one X0 to X. Then the format. I want to have a JPEG format and include this thing. Now, you can just explore the quantity, export it, it's going to export your design. So depending on the size and the MAs or whatever you have added, it is going to take time based on it. So now it is exporting. It will take, it will take you a while to paper to export. This way, you will have to select your frame and then click on the Export button. Then it is going to. You can also select the format that you want to have for your for exporting. And then you can also our face and you can't wait for them, become less molding, sit on the space. So I'm going to click on L1 so you can see that it has downloaded. So now if I click on it, we should be able to see our homepage. So this is our homepage that we just design. Here you can see everything is here. Everything is here. This is our image. It looks really nice. All right, so now let's export our sign-up base. So just select the frame and then from here exports, and then select JPEG and then export sign-on piece. Then I'll click on it to check it. So this is our sign-up or frame, and then this is our sign-in. So if I want to import, export our side in that I'm going to add this sign-in and then I'm going to click on it. This is our sign-in, then our OTP. So click on it and I'm going to explore everything. And then the last we have our item models. So this is our OTP and we have our item model here. So we have our export. And this is how we can see. This is our item model design. Alright? And from here you can also share. So we just need to click on the Share. And you can select, can view or can edit, can, just, they can see the mess. And then you can just put the e-mail address of your team member and then send invitation. Or you can just simply copy the link and then share it. Okay? This is going to also work. So this copy the link and then for example, you can just share it here. And let me open it in a different window. Now I'm going to paste it. And we shouldn't be able to see our design here. So it is going to load two is going to take time couple of moment. And so I want to say a few things here and here. You can also get embedded code. You can add. You can also, if you want, you can also publish to community. They have so many options here. Here it goes. So this is our design. Now, it is asking for login, but to view this one, we don't need to login. We can access our design here. And depending on how many files you have, it takes time to load. We can see all of our frame now here, but it will still take some time to load our MS and because we have lots of images, so now this is our homepage. So this is how you will be able to share this thing with your team members. I can see is just a you miss that. Tell anyone can see. But if you have login access and then you will be, you will be able to see other, other functionalities. All right, so I'm going to stop this video right here.