Figma UI/UX - Design a Complete Web App UI/UX. Learn the best technique of Figma (Project Base)

1. Introduction: Welcome to this figma course. My name is yes, tan h or three. And I'll be your instructor in this course. In this Figma, you AUX course, you are going to learn how to design a web app, you a UX. Using Figma. You will design this complete web project. You are going to learn different sorts of tools and the best practice of CDMA. You will learn how to create group, how to create component colors, different kinds of blogging, and that you just saw plug-in and many more things. This is the complete project that you are going to design in this course. Let me show you all the functionalities, all the design that I have added in these web API where you eggs. So on the top we have our navigation bar, then we have this main heater section here, and then our property card options here. You can see that each and every card has existed since same size. And it looks really nice. Then we have this pagination with a different icon and then this mark selected options. After that, we have one About section with kind of co-ops features that you were going to learn in this course. And then we have this feedback design section where we have added to cart, then this indicator and this Next button and the previous button. After that, we have our substitution system, and in the bottom we have our footer section. So while you will design this app, you are going to learn how to add different kind of plug-in, how to use icon from those plugin and use it in your project. And after that, you are going to learn how to add in new app. On an F bar, you can see our sign in and sign up button. So if I click on the Sign Up, Now I am in the sign-up face. And you also notice that there is a little animation at the time of prototyping. So you are going to learn how to, how to add prototype in your web app with animation, different kind of prototype features and many more things. So now if I click on this text, already have an account, then you're just going to send me to the sign-in page. And you can see a little animation here. And if I click on the sign-in page, I will move to the homepage. And now I can access this homepage. So this project is going to help me a lot to learn how to design a web app using Figma. After designing and prototyping the whole app, you are going to also learn how to export your design, how to export your design, and then how to share your file with others in the team members so that people from around the world can access your design, can work in a team. So these are the few teams that are going to learn from this course. This course is going to help you a lot to become a good designer because I tried to follow the best practice, the best technique of Figma. Therefore, I will hide encourage you to enroll this course. See you in the class. 2. Design Navigation: Welcome to this lecture. In this part, we're going to start working on our project. So first and foremost, you will have to login to Figma. So you can see that I have just logged in using my account. If you don't have your feedback on years yet, then simply you can just sign up using your email address. And as soon as you log into your Figma account, you will be able to see this kind of dashboard if you have already worked on some project previously, then you might see this kind of recent a work project. But otherwise you will be able to see only this thing. So now here we can see often called new resentful and then new Figma, Faker Gem file and then new input file. So for us, we're going to start by clicking new design file because we're going to start working on our project from the very beginning. I'm going to click on it, and then it is going to open a new project. Now currently we don't have any art board here. Okay, so this is the basic dashboard or Figma. On the top bar, on the, on the toolbar we have all the tools that is able level within Figma. And then we have this frame option. So first we need to add a frame. So I'm going to click on the frame and we're going to work on a web. You can see there is a couple of options. The display size of the phone. If you're working for phone, phone FU, a mobile app UI, then you can select any of these. But for us, we're going to design our web apps. I'm going to click on the deck stop. And in the deck stop, you will be able to see this kind of view. So I'm going to select index 121440 by ten to four. Then it's gonna give us a art board. Okay? So this is our main output. Now we have our art board and over here we will have to design our app. So we are going to achieve in this kind of design in this course. So if we're going to have our navigation bar, then we're going to have e-mails, these things. And then we will have our property list, then the pagination and our subscription option. So more or less, we will try to achieve this kind of design. And we will also have to design one sign-off and assign in pace for our application. So let us start working on it. So fast we have our next part. So how can we add our helper? So add our nav bar we are going to create, we're going to take help of this rectangle tool. And I'm going to draw a rectangle on the top. And here we go. I'm going to draw a rectangle here. And if I look at this image here, we can see this is a white color, backgrounds, so I'm going to change the color. So once you select your nav bar, then you will have option to add this background color, click on the fill, and then you will have an option to select the white color. And now we don't understand anything because our background is also wide. So what can I do here? I want to add, I want to add our effect here. So if you click on the effect, then it's gonna give us our drop shadow. So there are a couple of shadow here if you want, you can simply play around with this. It will give you inner shadow. Then he's going to give us shadow from inside. But we need to have a drop shadow here. And now let me run the app so that we can see our life changes. If we are making any changes. If I click on the Run button, then it's going to open to a new tab here. And here we go. We can see this is our nav bar. Now we need to add a text here and then our menu item. So we can simply take help of this text tool, click on the text. And in here, I'm going to write a text called Find home. Cool. Now, we need to change the font size here. So this is the form says by default 12th, but I'm going to select 44, this one. And if you want to slit anything, you need to click on this movie to able to select an option and then drag and drop. And here you go. We have this home now here, but it's way too much bigger. So I'm going to select, Add it to. And then from here, I would love to add different kind of design here since sort of regular color, I'm going to select with medium. And then here we can simply select different kinds of texts. I mean, font-family name, that is by default here. This is not going to look good. I'm going to select a different one. Okay, so it's looked like this. So it's look like this. And maybe this one, not this one. And it doesn't make any chance. And we can give this one or we can try to add other one. Okay, so it looks good. I think we can try a couple of more options and it doesn't make any change. Okay, So it looks good. I like this one and then I'm going to change the color of this one. So we can add this default color for this one. Okay, so now we have this option and then we need to add our Now for items, so we have four items here, home property, new lists, sign-in and sign up. So I'm going to click on the Text tool. And from here I'm going to start adding this one. So we can do one more thing here, which is that we will always have to do so I'm going to click on this one. And here we can add our grid system. How can we add our grid system? So I'm going to select the frame. And as soon as I select the frame, there is the option called Layout Grids. If you click this one, then it's going to add a grid system for us. So now it looks like this, but definitely we can, we can change it. So now we can, instead of size ten, we can add 60. Then it's going to look like this. And we can also select, if we need only column, then it's going to only add column. But if you need column and row, and then we can also, maybe we need three column. You can also count the column five column. Then instead of 20, I can select five, or maybe I can select two. So this is the space in that, great, but we need column and row. We need grid in this way. We can keep this one and it looks good. Now we can add our text here. So first, I'm going to start from here. So I can say home. And now here we will have to change our font size because we don't need to have 32. So we can add here. I think we can add 16 here, and we can also test it in our real-time live view. So it looks good. So we can keep with 16. Now, I have added this one. So now I don't need to click here again and again. What can I do? I can press, I can select this text and then I can press Control D to make a duplicate. And you can see we have two item here. Now I can drag this one here, and then I can simply change the text name. I can simply say I can say property. And what is we have here? We have our name, property, new list. And then I'm going to duplicate it. And then I'm going to add up the property. I'm gonna add new list, new list. And then we have our sign off, we have our sign-in option, but for sign-in, we have this background. So I'm going to take help of this rectangle tool London. I'm gonna draw this rectangle here. And I must add one border radius for this rectangle. To add a border radius, I will have to add it here. I'm going to select 20 and then change the background color to this color. And I need to adjust it. You can see 18 from from every every item we were maintaining a distance. So I'm going to keep this one here. And then let me try how it looks here, so it looks good. And then what can I do? I can add text here. I can simply say Sign In. And then from here, I can simply add this one here and the center. And we have another one. I'm gonna make a duplicate. And this one is going to be our, this one is going to be our sign up. So this one is going to be our sign-up. Sign-up. Alright, so, okay, cool. It looks really great. Now I can make one thing. So this, this text and this background, I should Mecca grew because when we will do prototype, we don't need to make it groove. So when we will do prototypes so that when user clicks on any of this area, we can show the prototype. So I'm going to make it group. So to make it a group, I need to press control Z on my keyboard or you can right-click. And then you can also say where you can also click on it. You can say group. Now, R group is here. And we can simply rename the group name here or Control R. I can say Sign In, button. Cool. It looks nice now. And OK, so everything is fine. One thing that I want to show you now, so now let's make a group all this part. So this button, this new list properties sine of home and finite time, I'm going to press command to find home only this item. And I'm going to press Command Z. And now I can simply drag this whole thing a little bit if I want. So I will not have to do this thing. And if I, even if I want, I can increase the white of this one and this way everything automatically going to add chest. Even if I want, let's say I want to change the, let's say I want to change the font size. Let's say I want to change the font size of this item. Let's say I want to change the font size of this one here. Then I can also change it from here. And this way, we can simply change it. Then select this, and then I can simply change 16 to 20, then it's going to bigger. But I need to have 16 here. So it looks really great now. Perfect. So finally we have added our nav bar. I think we need to add just this one little bit because the texts has become a little bit smaller because we increase the size. So now it looks really nice. So we have successfully added our sign. We have added our navigation bar. And in the next part, we are going to learn how to add this home screen. So I'm going to stop this video right here and see you in the next lecture. Bye bye. 3. Home Cover Image and Card Design : Welcome back once again. In this part, we will try to add this homepage and design. To do so, first and foremost, I am going to draw our rectangle here. So select this rectangle and from here, or maybe from here. So from in the middle, I'm going to draw a rectangle here, this part to this. So the height will be a little bit bigger, I think. Okay, let me check it how it looks here. So it looks like this size of a screen. And I think it is okay to have the size of the screen. And maybe I can drag it a little bit down. Okay, so now here we can simply drag our image from the file. So I have already downloaded this EMS. So let me try What a mess I have used here. So I have used in this one here. So I have used at this image. I think this one, not this one. I have used in this one. So let me drag it here and then drop it here. And then if you click on the right side, then it's going to add this one. So if you are going to do this thing this way, then at the beginning, it is going to automatically show the full size of the image. So this is not the best approach. So I'm gonna remove this one. But figma has this option, so please email option. Okay, so what can we do? I'm going to select this one here and then I'm gonna go to my directory here. And then if I click on it, and then let's say I want to add this image here and then open it. It's not going to show here. Now, if I do right-click, if I do it now you can see if I hover with the mouse, I can see this picture now if I click, right-click. So now if I click my mouse in the leftmost, then it's going to add this image here. Cool. So now we can see in this image on the, on top of the e-mails we have another rectangle. So I'm going to draw this rectangle over here, is going to be a white color. Rectangles so fast I'm going to add a little bit of border radius here, maybe five pixel. And then I'm going to add this one here. And I can see this thing. Let me see what else we have here. We have one button and we have one text here. So I'm going to add text over here. I'm going to click on this one, and then I'm going to write the text here. I can say find your dream home. Cool. So I can, oh, okay, so we can increase the font size fast. So we maybe we need 40. And I'm going to add it in this way. And now it looks good, but we can still adjust it in this way. And then we can minimize, we can decrease the font size to 36, or it looks good, but we can change the color and we can add a little bit of design of the text so we can choose different kinds of texts. Font-family. It looks good. I'm going to chance or color of this one. Maybe this color, I'm just using some random color. But if you have your favorite color or if you have any selected color, then definitely you can use this one here. And now after that, I'm going to draw our rectangle. So how can you do a rectangle? Click on the rectangle tool. And then I'm gonna draw this rectangle in this way. And I will have to add border-radius here. So click on this border radius. And then I'm going to change the background color of this one. Not this one. Maybe a different color or something close to read. Maybe this red color. And here I am going to write a text. I can say book your appointment. So I just not able to adjust in here because the font size is way too much. So I'm going to select 16, and then it should all work. And let me try. Why do we have or we can simply say book appointment instead of book your appointment because it's taking a little bit more space. And now I can say this. So it looks so good. No issue with that. I liked it and everything is fine so far here. And I wanted to show you one more thing. So if you want to add a border here, how can you do it? So definitely you can do it. There is option called stroke, and if you click on the Stroke, then it's going to add the border. And you can also change the border color to a different color. And you can also change the border size. Maybe you want to have a bigger size of Boehner. So then you can choose from this model. And then if you come here, we can see this border here. And even you can also select the border style here. So you can say center outside. And then if you want this or different kind of border, you can also see instead of solid, maybe you need in dashboard and then you can also see these indels often use APR in here. So there are a couple of options that you can apply based on your requirement. But for now I don't need to have this border. I'm going to disable it. If you click on the i option is going to disable and then it's going to enable in this way as well. So if you click here, it's going to do the wall. If you click here, then he's going to interval. Now, if I come here, everything is looking great. But I would love to add little bit of linear gradient here. So if I click on this linear, so instead of this way, I will try to add it in this way. Or this way it looks really great. Now I'm going to make it a little bit closer. Here we go. We can still see a little bit of shadow on the bottom here. But there are a couple of other options. Maybe you can try this angular chef. Then it's going to look like this. And maybe you have a diamond chef and then it's going to look like this. And maybe you have radial shape is going to look like this. So you can play around with this one. So I'm going to just select the linear one. And then I can simply keep this one here. Alright, I'm gonna stop this video right here, and we will design our this portion in the next lecture. See you in the next lecture. Bye bye. 4. Property Card Design: Welcome back once again. In this part, we're going to start working on this, on this card system that we have for our property. Alright, to do it, how can I do it? So what can we do? So first and foremost, we need to increase our size of the frame. So I'm going to select the frame. And then in the bottom, then I'm going to just drag a little bit, maybe this. Okay? And then after that, we will have to, now we have this look. Okay, we have this nav bar, we have this loop. Now here we're going to add this card. So to add a card, first and foremost, I'm going to add this rectangle. Let's say we're going to start from 123 and this tree, okay, we're going to start from this or maybe from here. Let us start from here. So this is the beauty of using this grid system so that we can easily understand for each and every item. So we're going to start from there, and then maybe from here, I'll get this added fast from here and then later, we will do it. Alright, so one thing that is noticeable is that we have similar design for each and every item that we normally have in our web application. So for that first, we are going to make this whole part only once, and then we're going to make them group and then we can simply duplicate it. This way. We will not have to do then the same thing again and again. And this is the best approach. So mostly you will have to work in this way. For example, if you are showing a 100 data item in a cart and then you, and definitely we're not gonna do that 100 cards separately. When it looks exactly the same, you will earn one, then you just need to make a duplicate. Okay, so now first we have our emails on the top. So to add a mess. So I am going to at another card for the EMS, another rectangle here on top of this one. So we can simply add this card maybe from this line. And then this card will contain our discarded, mainly hold our image. So now I'm going to add the image fast. So from here, I'm going to click on that place. And then I'm going to select this image. And it is going to see here, it takes some time. And as soon as I have this one, I can hover over and I can see this image. Now click on the mouse and you got this image. I'm going to add little bit of a border-radius of five pixels also for the main cart and that we have, I'm going to add a border radius, five pixel. Ok, so now we have this EMS and we have this cart. Cool, it looks really nice. Now fast. We need to add a shadow here. So to add effect here in the main cart, not the rectangle. The rectangle six, which is our main card, not the EMS card. Okay. Our MS cardiac rectangles six hour. This one is a rectangle. So one thing you can also do is that you can simply change the name of the zone so that you can understand what you are doing. We can simply say emails rectangle, rectangle, whatever it is. So now this way we will be able to really understand and we can, and this one we can simply say main cart. We can say main card, okay, this one, and this way you will be able to identify very easily. Now, I'm going to add an effect here, is going to give us a shadow here. And again, you can play with the shadow, you can add different kind of shadow. You can do so many things with this one from we said to the side, maybe you want to blur for, maybe you want to a block eight. Then he's gonna look like this. It's gonna give you a little bit more blurred option on the bottom. Okay, cool. Now we need to change the background color of this one. So I'm going to add this paragon color. And it looks like this. Now we have our, our price, our location, and our button here. So I'm going to quickly add this price here. So I'm going to click on this T tech. And from here I'm going to start this price. Maybe we can say it and then just some random text. And I'm going to change the color of this one. Maybe this light or green light, this light color. It doesn't look good. We can choose a different one. Yeah, it looks good. And now maybe we can drag it a little bit closer to this image. And then I can add, okay, so now to adjust this one, what can I do here? Mainly you can see that our grid size is really bigger. So this the reason that we're not able to understand it. So what can I do? I can simply add just the grid. So click on the grid system. So instead of size 16, I can add 40. Okay, Now, now I get a small size of grid. So I can easily understand from from whisper, I haven't started. In this text. So I'm going to, instead of this, we can also rename the text here. You can simply say price gold. Now I can make a duplicate, so press Command D, Then I can start from the same line. Now, I hope you understand that why I have added this small size of grid. We can see that we're starting from this line, this one, you can see this line. And I can take a little bit more space. And then I can simply change the name of this one. I can simply say location is going to be here. So location, you can say London. We can say the location is London. And definitely if you want, you can simply change the color of this one. So I would love to have a different color for this one. Maybe this color. And maybe I would love to add different font family for the text. Cool. Maybe this one. Yeah, we can do it. And now we can add one rectangle for the booking button. So I'm going to start this booking button from here to here. Again, adjust it from the middle and I think not from there. We can adjust it. We can add it from from this part. We can add it from here. Yeah, I think we can do it in this way. We can let me see how it looks. It looks good, but we can change the background color first. And to add this one, I'm going to choose this background color and add border-radius 20. And now we can add a text here. We can say book now. And this is the book now button that we have just designed. It is not in the center. Cool red, looks really nice now. And now we can duplicate this card and to do it. So I can say rectangle, this rectangle six is our book. Now. Button. So fast, what can we do? We can make them in groups. So this book now and this book now button is together. So we're going to make them a group press Command G, and then we can say, what can we say? We can rename them and we can say Book button called, we have Ungroup this one. So now we have this group Book button. And then these are main card, this price and this price. So we can change it to this text. We can simply say location because this is okay, so I think we did it in a different way. Okay. So let me undo it. Okay, So this one should be location. So I'm going to add location here. So rectangle five, rectangle five is not this one. So this book appointment. So we spot this book appointment, this book button here, and then this image, then the location than the price, then the main cart. But there is another text which is called book appointment. So this book appointment is this button here, this text. Okay. So these are the main thing that is containing this card. So I'm going to make them a group together. So I'm going to press Command Z. And we can say, we can rename it, we can say a bulk property, main card goals. So now this thing hold our whole system we can jockey together. We can put it anywhere, wherever we want. So we have these things. I'm going to press Command D, Then I'm going to press this thing here. And maybe this way. And then maybe we can press one more time and then it's going to, once you are duplicated, it's going to automatically adjust it for you for a couple of times. So now I can adjust it in this way. Maybe we're going to start from this two and then we can do it this way. So now here when we drag and drop, we can see that we still have this 20 by 20. And then we have this 2020 card. From each and every item we are maintaining 20 by 20 distance. Okay, now let me see how it looks cool. It looks really nice. So it looks really nice from both sides. We have the same design. So another thing that we can do now, we can make this for item again in a group because in the bottom we will need one more item for this one, right? So how can we do it? We can make them group, group, group. Then I'm going to press Command G again. And here I can simply rename this one and I can say, so if I'm going to rename this one and I'm going to say it. Guard item first row. Cool. So now as all these are in a group, what can I do? I can simply move them and then I can just adjust it in this way. I can adjust them in this way. Now I think that from both sides we are having, from this side we are having the same space, and from this side we are having the same space. Okay, cool, it looks really nice. So this is how you can organize your file. You can arrange your document, any kind of design that you are doing. You can just do it. You can just follow this technique and then you can definitely do it. Now, what can I do? I can, so before duplicating them, I think I need to increase my main frame size, mainframe height. So I'm going to increase it in this way. Let's add it in this way. And now what can I do? I can just select this one. I'm gonna make a duplicate Command D. So I'm going to press, I'm going to put it here just on the bottom of this item, maybe one line. And exactly the same as it is in this position. Then I'm going to press Command D again, and it's going to add one more for. Now. Let me see how it looks here. It looks really nice. Now, we have these three nice-looking design that I really liked. Cool. So we have designed something really unique in this part. And I'm going to stop this video right here. And we will continue with from the next lecture. We will try to fix few more things and try to add few more features in this project in the next lecture. See you in the next lecture. Bye bye. 5. Pagination Design: Welcome back once again. In this part, we will try to add a little bit of pagination in our applicant, in our web app. So you can see that this one is looking really great, really nice. No issue with that. But here first I'm going to add our pagination. So to add a pagination. So we will try to add this kind of pagination here, similar to this one. Not this one. But just for basic idea, we're going to add to this kind of pagination here. To add a pagination first, I'm going to add a rectangle here. And I'm going to start designing this rectangle. This rectangle exactly from this side, so that it matches exactly the same. And from here it matches exactly the same. Okay, So if it is matches the same line, then you will be able to see this kind of line. It means that we are in the same or we are in the same line. Okay? We exactly have the same thing here. And then cool. So now we have this design and we can try to add a different color, I think, for our pagination. Or maybe we can try in this color and cool. So we can definitely add our bottom, our border radius. So let's say add border radius five. And now over here we are gonna, we are going to add our pagination. So how can we add our pagination? To add our pagination number? We are going to draw a circle. So I'm going to click on this ellipse tool here. Let's just start out pagination from here. And to make it exactly circle, we need to make sure that wide and height is same. Okay, so we have Y 28, then we have high 28. And then, and then it will look exactly a circle. It'll look exactly circle. And we can also make it a little bit bigger and then make it 38 by 38. And this and this size, we have this one and we can add a background color for this one. So this is the background color of our vegetation. And another thing that we can do is with this pagination, we can add a border. Let me see how it looks with this. Okay, so we need to add a little bit bigger size of border. So this one, and this is not going to look like good because we already have a colored background color, so we need to make it white and are different colors so that we can we can visible this one. So I'm going to increase the border size to five. Now we can understand it. But we don't need to have HIV, I think for the good, or maybe three, the good. And let's try to add a different background color for this border-radius and how it looks. Okay, it doesn't look good, so I think we don't need to add a border color here because we already have this background color. The reason that this background color and adjust here. So now we need to add, we need to design a few more things here. So first one is going to be our number. Okay, so let's start by adding a text here. So this ellipse is going to be our pagination, our pagination number. And then I'm going to add a text on this pagination. And we need to have, okay, So first let me adjust this text here. Okay, Let me add draw by the faster one here. If I write the one here, then I can just put it on the middle. And for this pagination, we don't need to have this font size because it is going to look different. And so rather I'm going to choose the regular one. Maybe we can choose this one also. So where is the regular one? And that will by default have. So if somewhere in our regular recursive, I'm not getting the normal one here, it's somewhere, it should be regular. The text is written this way. Or it, it is in the tough no idea of. So we can simply add maybe this, then it is not going to look like. We can simply start setting here. So it is not coming in this way. We can. What about this one here? I think we can start it here. Nothing is coming with this one. So nothing is. Okay. So I think we've got these regular one here. This is the regular one or you can choose it by your own or you can any other option. I think we didn't get it, but we've got something different than this one here. Cool. We have this option here on moment. So I'm going to this one. This text style is not only nimble here because previously we used this one. There's a reason that we have this option here. So we can choose a new text one here. And from here to here. And maybe this one. Okay, so it is kind of bigger ones. So I can give this one here and I can put it in the center. Now let us see how it looks. It looks like this. Again, I think now it is in the center. Oh, exactly. It is not in the center, so we need to put it in the center. Okay, so there's quite center. Now, I'm going to make it a group so we can say base number, this number. So this number and this pagination, we're going to make them a group together. And we can say, we can say get pagination item, we can say pg nation item is item, cool. And then I'm going to make a duplicate. I'm going to put it here. Now. Let me try how it looks. It looks good. So what can I do? I can just press duplicate and duplicate and duplicate and duplicate. I think. No issue with that. So I can now now we have this number of duplicates. So before from doing anything else fast, I'm going to make them a group altogether, all the pagination item so that if I have to re-add and seed or if I have to put it somewhere else, then I can simply do is I'm going to make it to grow. And I'm gonna say it, pagination items, I'm going to say imagination, Origination. Okay, cool. Now, what can I do for each and every item? I can make changes? So for example, let's add this one is two. I'm going to remove this one and I'm going to add two here. And because the first one is going to be able to icon. So I'm going to remove this 1 first 1, and I'm going to remove this, remove the last one from here, because here we're going to add a next button icon. So how can you do it? I have installed R, installed a plugin called feeder icon. I'm going to take half of this icon. So if you don't know how to install the icon, so you can simply click on browse plugging in the community. Then here from here, you can simply search icon and then you can just install the icon. It will open. So you can see that a lot of icons are here. You just need to click on Install, then you're just going to appear here. So when you click on it under the plugin is going to show this one. So I'm going to install these filler icons. I already installed this one. I'm gonna get a couple of icons from here, is going to show me this one. So I can see this arrow right and left icon. So this one I'm going to select, and I'm going to select this arrow left where it dropped. So it is here now. So I'm going to just drag it and then I'm going to just put it here. And okay, so the other thing is that it is, it has gone outside of this one. So what I will have to do, I will have to drag it and put it inside the origination number. We got it is inside the pagination. This one, okay. Now let me see. Okay, we can see this one here. And for this one also, we need to have the right icon. Okay, So it is here now. And where it is, this one we have in this one is here at the last one. So I'm going to drag this one to the last one here. Okay, so we have this one here and let me try this one. So we can't see this one here. Let me see what happened exactly here. So okay, so it is not coming here. Let me are removed. Okay, so we got this tool option here. So I'm going to remove this whole part from here. I'm going to delete this one. Okay, So we can, we can, we can disable it here from fast so it is visible. Now. Now I'm going to add this icon here. And this icon is going to add here. Okay, cool. We won't be able to see it because it's outside of our frames. So what I'm gonna do it, I'm going to put it here. Okay, so as soon as we put it here, it is not usable because the issue is here. So we should, we should give it outside of this one here from there. So I'm gonna put it just offset of this one. Or we can just put it in the bottom, then it still is going to work. Okay, so we can have these issues here. We broke so many things for this one here, even this one is going to block down from here. Cool. Now it should look. So we have this one, but this arrow item is inside this one. So what we can do here, we can just drag this one inside this text of this in the deck stuff. And yeah, now it is working so you don't need to put it inside this vegetation here. So we did a mistake when we do need it in this way. So we just need to put it as long as it is inside the frame of this text. It can also work here. You don't eat is not mandatory to put it inside that use pagination item like this way. So we can definitely also do this thing here. But when we tried to do it, we broke something. That was a reason. Now it is working perfectly. Now. Let me quickly chance the text number. So I'm going to press this arm two to 32 is going to be C, and then this one is going to be, for, this one is going to be five, and this one is going to be six. And after six, I'm going to add double dot, triple dot, and then I'm going to add seven. This one is going to be eight. This one is going to be nine. Only nine. And this one is going to be, then this one is going to be o of n. This one is going to be 12th. Cool. So now what can I do? I can simply adjusted here and this one also in the center. Cool. So now we have this 1123456789101112. We have this nice pagination. Another thing we can do, we will have to do excellently. We will have to make markdown one option which is marked. So I'm going to select this one. Maybe you can select any random option. So what can we do? Basically, we can change the background color of this item. We will have to add a different background color for this one. Let me just see how it looks. I'm happy with this color. And then I can simply choose this white color from here. And here you go. Okay, but this red is not going to look good here because we have what? We already have a background color. Okay, So we are changing this one. That's not good. We need to change this red color to something different. And I'll not exactly this one. We can try we can tie the black one, I guess. Yeah, the black one is going to look good because this one is marked. Still. I'm not happy with this one. Little bit of shadow of this background one. But the problem is that we already have a background color. That's the reason that the marked one is going to look good directly. So we have this one or we can still try a little bit lighter color in this area. Maybe this area. Okay, so it is going to look good and I'm going to change the text color to black. Cool. So now it is easily identifiable which one is smart? So three is marked down here. So nice. We have designed something really nice in this part. I'm going to stop this video right here. In the next part, we will try to add a few more features in this app. See you in the next lecture. Bye bye. 6. About Section Collapse Features Design: Welcome back once again. In this part, we will try to add one more section here, which will be about section in the left side, we're going to put our EMS and the right side, we're going to add another sexual. Let me show you how can we do it. So to do so, first and foremost, we need to increase our main frame size, which is our deck stops. So I'm going to select this text off. And then I'm going to increase the size of our main frame. So I'm going to drag it a little bit more in this way. Cool. Now, if I look at here, then we can see we've got this space and our application is already looking great. We have pixel perfect. And then everything is looking really great in the perfect position. All good here. And maybe we will try to add a little bit of modification if it is to recur. But for now, I'm going to add one more section here, which is going to be about section. And here we're going to have couple of details. So let's add this one here. So first I'm gonna design, I'm going to add a rectangle here. We come this way, click on the rectangle. And then maybe from here. Maybe from here we can go from here. So we can draw a rectangle. And from this side to this side, or maybe this side. This side. And a little bit bigger. And now let me adjust it with the same position so we can see this red mark. So it means that we are in the same position. So here I'm going to put our e-mails here. So I'm going to click on this place image, and then I'm going to select this image here. So I got this email from Internet. So you can simply download any email or you can use any image here. Now if I click on it, I got these images over here. And now over in the right side, right sidebar we can put, let me see how it look, how big it looks in the real size. So it looks like this. And we can try to add some other things here, some other stuff. Okay, so we can add to what, what I mean by this one. So I can add another section. So what can I say for this rectangle? I can say about Section. And I'm going to draw one more rectangle here, maybe from this side to this position. Now it goes directly to this size. Okay, so now we have exactly the same size from right side and in the same position from this image. So we can, It's still increase the size of our, of our cart. And then I can add a border radius five pixel, little bit of shadow, a little bit of shadow, drop shadow. And then I'm going to add this white background color. So now we have this kind of view. On the top. First I'm going to add about us. So what can I say? I can simply rename this one. I can say about details. Here. I'm going to add a text, and the text is going to add here, I'm going to say about us. So about us is gonna look like this for now. And in the live view is going to look like this, but it should have a bigger size, maybe 32. And then it's still a, we are going to add a different color for this one, nor exactly not the black one. Any color. I'm just selecting some kind of, or maybe I can still select this color as you're using these color mode. So then for this text style, we can choose a different one. We can choose a different color, a different design. And maybe this one or this one, or this one, or this one or cool, it looks nice and the bad. So we can use this one here and we can just put it here. And after that, we're going to add a kind of a collapse of shown here. We can simply add one more card option here. So what can we do for this? So it looks really nice. I'm happy with that. No issue with that. But I'm going to add a car off shown here. So about us, I can simply say. We're going to rename this one fast about Title. I have this one about title. All these About section. So here first I'm going to draw one more rectangle. I'm going to take half of this rectangle. So I'm going to add a details text here. We can simply resize this one in this way. And so we have added weight Hamas bigger than the mean size of our design. So we can add this one here. And then we have this design of Sean. And we can add our icon color here. So what can we do now? What I wanted to do here, I wanted to add title and the description for that. I can simply Loren ipsum just for some random texts or you can use some plug-in as well. That's not a problem. So I can simply select Laura Nixon, this title here. And then I can select a text here. I can put this text here, and then I'm gonna change it to 14. And here we go. We have this 14. And now I can select 1619. And we can adjust it in this way. We can put it, sorry, we can put our text in the center. We can put our text in the center. I can put our text in the center. And then we can add a border radius, five pixel here, little bit of border radius. And we can also do this thing in this way. So this is the rectangle we can say about item, about item. And this one is going to be about item text. So about item, about item text. And here we need to let us change the background color first. We can choose this background color and for the text, we can choose this text color. Fast. So we have this and this color. And here we can put a one icon. We can pull to one icon here. And here we go. We can put 21 icon here. So again, we can take health of our, this icon plugin that we have installed is called filter icon. And I'm going to choose this. I'm going to choose this icon here. And I'm going to drag it to here. I'm gonna put it here. And here you go. I'm going to change the color to white. Cool. It looks good, but I need to put it inside the deck stuff. So I'm gonna put a drag-and-drop to desktop. Now, it should be able to do it. So now we can see this icon is also here. So what can we do now? We can also rename the name of diachronic can say about them arrow down. So we have about item ever atom takes and about item, this one. These are the three things that we can now make. Group I'm going to press Command Z and I'm going to say About item. We can say about them card, cool. So we have this airport item card, and now we can add this about item card here. And we can add these abode item card here. We're going to add multiple time discard. Or we can make one thing. We don't need to have this thing. I think we can let me try to duplicate it. How it looks. Now we can duplicate it a couple of times. Now we have this nice card design. But for the first one, I want to have different things. I want to open it and I want to show our text, okay, it's kind of a call option. So to do so, first let me put it here. Let me try how it looks. It's still it is inside this one. And then we can jog it here a bit more. Okay? And then for this item only, we can make it o, we can name it. We can MDs one about item collapse. Okay, and then I'm going to make it a little bit bigger for this item. Okay? And then I'm going to remove this icon from here because we will need a different element here. And then I'm gonna put this text over here. And then I'm going to press Command D and drag a little bit down. And I'm going to add a different text here with some more items. So we can do it. You can copy and paste a little bit more text here. So normally you see this kind of design in a call absorption or frequently asked questions section. So we have this one now I'm going to decrease the font size to 12th. Cool. Now, it looks really nice. Okay, cool. So another thing we can do is here. We can add a different, we can add a different icon, which is going to be an app icon about item card. And here we can add, again **** Tech health of our icon called feeder icon. From here, we can simply take this icon, which is going to be the app icon. And this icon I'm going to copy. And then I'm going to post, I'm going to put it here. I'm going to make the color white ghoul. And again it goes outside of the frame. So I'm gonna put it here. So we can say, I can rename this one or you can say, I bought item collapse, arrow up. This is how we can check if they have to, if you have two dessert, okay, so another thing is noticeable that it is not in the same line, so we can make it in the same line. So how can we do it? We can simply, now it is in the same, same line. Okay? So when a user will click on it, when you double-click on it, then this is going to open, and then we're going to open this one also. Okay, so this is how these About Us section we have designed. All right, And another thing we can try. So in the next part, we will try to add our, okay, so we can add one more thing here. So if it is open, then we can simply mark this item also. What I, what I mean by that. So normally you will notice that if this card is open, then we're going to mark this one also. So we can also do it. That's not a big issue. I'll let me try to add this one. So before that, let me check what we have used. We have used a more radius five. Okay, cool. So I'm gonna draw a line here, another rectangle and put it five. And minimize the, sorry, we need to have this one here. This and then we can simply mark this. Are we going to use this color? Okay, cool. So we have this one or we can simply use the white color is going to also look great here. But no, it is not going to look great. So we need to adjust this one in this way also. It is in a way and we can some color. Maybe this color. No, it doesn't look good Exactly. So we can do basically we can choose some different colors. Yeah, maybe it good, but we can also change the white to maybe seven. Excel. Also, this one is open and this one is marked. But it would be good if we could choose some really good color, light color that can easily identifiable. But I'm getting, maybe this block is going to look good. Okay, I'm going to skip this one here. Alright, so finally we have designed this average section and it looks really nice. So this is how we can design our About section and this collapse option here. Okay, so I'm going to stop this video right here and we will continue from the next lecture. See you in the next lecture. 7. Feedback Slider Design : Welcome to this video. In this part, we are going to discuss about About section and not exactly about section because in our previous part, we have designed our About section in this part. And basically I want to add one feedback section. Alright? So how it will look like is it will be kind of a slider options or we will just try to give a look like this. And then we can simply design this one. Okay? So for that, first, let me start drawing this thing. Okay, Cool. We will need to increase our, our frame size, frame height. So select the frame and then we can, we can increase it from here. And then cool. So now here I'm going to add our feedback section. In the middle, I'm going to add a title feedback. And then after that, we're going to have this option here. Okay, so fast to add a feedback section. First, I'm going to add a text here. And I'm going to add feedback. And fast, let me change the font size to a bigger size, maybe 36. And we can put it here exactly. And let me see how it looks. So it's going to look good. So we have this feedback in the bottom, and then we have this feedback, okay, cool. We have this offshore and we can just drew it in the middle of this one. Okay. And we can just add it. You can take a little bit of space from the top. I can just do a little bit of a space from the top. And after that, what can we do? Basically, we can at two items here. One will be our card item. Basically we will have to design a card on the top of the card, we're gonna show the picture of the pupil and then the and the picture of the pupil, then the name and then the message. On the other two things that we want to show so fast, I'm going to rename the name. You can say bag title. Okay, cool. So this feedback title. And after that I'm going to design our rectangle. Maybe we can start from here. We can start, I can start from here. So I want to show two item. I'm going to take this kind of size, little bit of border radius, so you will add. And then this option is going to add here. I think it's going to look good. So then I'm going to let me see how it looks. So this size. And then we will put one button here and then another button on the right side. And then we're going to have to option here and on the bottom we will add this one. Okay, So it'll look good and we will have to, I'm gonna say feedback main part. And I'm going to design, I'm going to draw another card. On the top. We can define r. We can define our ellipse option here exactly. This one. We need to make it same height and white, one on two. And then we can, okay, So we will need a little bit more space from the top because we have our text here. So we can just drag it and we can take from this row. And then we can take it in this way, in the middle of this one. Okay, exactly. This is the medial. How do you understand this is the medial? We go, you can see this point here. And okay, cool. So here we're going to put the picture and here we're going to add the shadow. So fast, I'm going to add that effect. I'm going to change the background color to this color. And now it's going to look like a card. And don't worry, we're going to put this one and we will have to add a name here. So what I can see, I'm going to rename it. I can say Feedback. Use our MS user profile picture. And then on the bottom of this one I'm going to put em tags. You can say John Doe, just for an example, any name that we have. Okay, so and then we can do one thing. We can simply Okay, I think it is not in the center or it is in the center, but we can put it in the center of this one. Okay. Now, it is in the center. We can simply change the form design. We can add a different design for this name. We can, maybe we can choose, I'm just selecting some random texts. So if you have any preference, if you'd like to use any other, then you can definitely do this one here. This is not going to look good. So we can add this one. No, this is not going to look like this. So we can choose I'm not going to like this one. Not this one. Okay, we can select this one also. But we're Tomas bolt. This one is good. We can choose this one. So one thing that I can do is here is that we can make this text a component. So that again and again, we don't need to copy from Loren Ipsum. So I'm going to select this text. I'm going to right-click and then I'm going to make it components. So you can see Create component. So what does this component means? So as soon as this one has become a component, you can see this icon has been changed and where this a component, APR, this company appear in this asset directory. So we have this. Now we have this component, okay, which is this. And now, if we want, we can use this component as many times as you want. So what can I do? I can simply drag it here. And then I can, I can select this one, and I can simply change the background color here also. Okay, so this way, I will not have to copy and paste again and again. So you can, this way you can make anything. You can create component even if you want, you can create component of this item. Let us say omega component, create component. So it has become a fear here. So now you can just reuse it as many times as you want. Okay? So this is the beauty of components. So now you have learned how to use component, how to create a component. Now if I look at here, then I can see that I have these options. And this is the user feedback, but now we don't need to have this large card. So what can we do? I can rename this one. I can say John Doe is going to be, we can say Rename again, simply say feedback, username. So everything is feedback is under this one so we can let her make it a group. Okay? So now this is the cart feedback main car. I'm going to just minimize this card little bit more. And now let's see how it looks. It looks like this. Okay, so we want to put our e-mails here. So what can I do? So I can simply I can simply download some images, same profile picture, and then I can just put it here. Now, we can simply place our images in this card. So now we don't have any image so far. What can we do? Basically, we can simply click on this place image of Sean. And then I'm going to just select some random e-mails here. And now we have this option. Now if I click on it, it's going to add here. And here we go, we should be able to see the image here. It takes some time to load the image. Or we can simply what happened here. It is here. So we can see this profile picture, profile image here. And now we have prepared this card perfectly. Okay? So now what we have, this is the first image, and this is the profile picture. We have this feedback. We have this feedback, username, feedback card, feedback main card feedback title is not under this one. So these are the four things that we need to make groups. So I'm going to press Command G and then I can simply rename it and I can say feedback, mean card. Cool. Now, we can just do it in this way. So now we have this thing. I'm going to make it duplicate. And from here we can add this one in this way. We have this card off shown in this way, but it is not in the middle. So fast. What can we do? We have these two main cart. We can now make them a group, and then we can rename it. And we can simply say that feedback. All items, you can give any name. And now we can rearrange it. Okay, maybe this is the middle point, okay, so we can see this line is appearing in the middle. So this is the middle point of this one. One, and now we have this item in the middle. Okay, So we have this one, it's at least not in the middle, but do we can simply is on this one from this, we can just put it in the middle of this text and it is now better. And now in the middle of this one, we want to add tool icon. Okay, so everything is fine and fast. Let me change the e-mails of this item. So I'm going to select another image that I downloaded. And it is going to initialize fast. And as soon as it initialized, then I can just replace it with this one. Again, you just going to take some time to add this one. That's not a problem. We can just do this one here. Okay, so now we need to add, we need to draw one circle here. For our, our four hour. This option. Or we can do one more modification here. I think I forgot to add this one. We can add a border of this one. So let's add a border so that it looks much better. So I'm going to add a border here. So we can say stroke is going to be three. And then, okay, so what I did here basically, so I think I added this border for this, for this rectangle. Okay, so we added our rectangle here by mistake. So I'm going to control Chet. We need to do it exactly with the e-mails here, this main MS, and here I can add this image. I'm going to put it to C, and then I'm going to change the color to white. And here we go. I think white is not feasible because our background is white. So we can choose this background one. And then it's going to look, okay, so we have the same design for both item. Cool, it looks really nice. And now, what can we do? We can draw one our lives for forward button on a lifecycle, the backward button. And I can just put it in the middle. And it seems using the perfect size here. So I'm going to make the hydrogen watch them. So he's already 36 by 36. And then I am going to make the color white. And then I'm going to add the effect here. And then I can put this arrow icon over here. So we have our arrow icon in our peck plugin. So I'm going to add this one is called filter icon, and then I am going to choose this icon here, is appears here. So less than drag it here, put it here, and then drag it here. So we have this one and this one, both of the two. So we can just make them a group. You can say Feedback arrow left cold. So now we have this feedback arrow left exactly in the same size. I think, I think it is in the same position because, okay, so let me fix it. Is it will statistics with 36. So now it is in the group. So what can we do? We can just measure it in this way, so it is in this size. Now, okay, so we can make a duplicate. So I'm gonna make a duplicate. And then we can put it in the same, same way. Okay? I think we are in the same position button now we can simply just rotated instead of using a different icon. Okay? So we need to rotate it in this way. Cool. So now it looks exactly the same thing, is the same image, same icon that we are using here. So it looks really nice. And now what can I do? Or we can add our ci dot here, actually three ellipse here. So I'm going to take help of this ellipse, and then I'm going to draw this ellipse here. And what can I do? I can simply say ten by ten and let's try. Let's see how it looks. Yeah, it looks good, but it will be good if we could add few more, 151515 by 15. And now, what can I do? I can, okay, So we can, so fast one we can add different color. First one we can add a different color. And for the second one, we can use, and for the other two colors we can use In this color. Okay, So I'm going to add this one, then I'm going to duplicate it 234. Let's see how it looks. So we have full color and for the first one, we are going to change it to, we're going to make it active. It means that we can give it different colored, means that the first one is active here. Cool, it looks really nice. Perfect. So we have added this feedback section and nice looking. So what can we do? So we can simply mark all these items, and then we can simply make them a group. Then we can rename it. We can say feedback dot items. So whenever you work for any kind of design, you just need to make sure that you are making them a groove so that later you can reuse it and you don't break anything. And you don't break anything on right. So I'm going to stop this video right here and we will continue it from the next lecture. See you in the next lecture. Bye bye. 8. Design Subscribe Section: Welcome to this lecture. In this part, we are going to design our subscription newsletter system. So now, so far we have designed this this part. So I really liked this design. I hope you enjoyed it and you'll learn a lot. Now. It's time to add our subscription system over here. So how can you do it? So it's a very basic soft tissue system that we are going to design. Nothing fancy and it's not a difficult task. So fast I'm going to add our frame. I'm going to design a rectangle here. I'm going to add a rectangle just after this one. I think I'm going to draw a rectangle here. And let me see how it looks here. So this rectangle and here we can add or we can place our EMS, or we can place a background MAs are then we can simply add our input field and then the bottom, we can add. And to do so, what can we do? Basically, let's add our background image or we can simply add maybe some color here instead of background image. And then we can simply, what can we do? We can simply add this one where it is. So we can simply change the APRNs little bit this, or maybe 10%. Then it's gonna give us this kind of scholars shadow, but maybe 80%. And then we can try to add again as so they have couple of other options. For example, you can choose this screen. You can choose this light and color. You can choose this hard light and couple of other options they have. But normally it is passed through. And then here we can simply select 20 per cent is gonna give us this kind of thing. Okay, cool. So we have these options, but instead of this one, we can select this color, maybe can some linear color. So escalate, the color is not going to look good here. So what can I do here? I'm sorry. I need to, we can simply add I can simply place a background image here. So we can simply place a background humans, maybe these summits. And it's going to, I'm sorry. So I need to select this one here. Where is this rectangle? Eight. So this rectangle aid is going to be our subscription rectangle. In the subscription rectangle, we will have to add our background image. So let's try this one. So we shouldn't do put it on top of this rectangle. Okay, So I'm not sure what, what we did here basically. So let me remove this one because we made some changes here. So the reason that it is creating problems, so I'm going to draw a rectangle here. And this is our first rectangle here. Now I'm going to place the image. So I'm going to place the image, and then I'm going to place this image is going to show here, cool. So it looks really nice. And then I'm gonna remove you name it. We can say subscription. So the name is going to be subscript shown and on. Let me see how it looks. It looks really nice. And on top we can add one, this option. One input field. We can draw our input field using our rectangle. Let's add border-radius, then, maybe a little bit more, maybe 20 pixel. And then we have this one. And then we have this one in the center. We have this. Okay, cool. And what can we do? We can simply add this one. And maybe we can try to add some border. We can add some border is going to be C. And we can change the border color to white. And now we don't need to have this one. We can keep it white, light gray. Or we can remove this background color. We can keep this one here in this way. And let's first add one placeholder text here. So we can say IMO, actually to eat only be visible here because we have a background image. So we must add, we must add a background color here. So we must add a background color here. So I'm going to enable this background color. And then this, then this dx is going to put in the center. Now, we can identify our text, but what can we do? We can simply increase our font size up the text and then we can just rearrange. It may be from here, email. And then maybe we can define our Send button here. We can define our different buttons. So this color is looking really nice. I don't want to change this color anymore. So here we can add a button and the button height and what is going to be same. So what can I do? I can simply duplicate this rectangle. And I'm going to put it in the same level, in the same way. But I'm going to minimize, though. I'm going to minimize the weight of this one. And then definitely we need to change the color to a light color, this color. And then it's going to look great. So we don't need to have this stroke here. We don't need to have this border. Background color is this modern radius for this one, this border. But what is this is for? I'm going to remove it called Subscribe button input. And here we will have to put a text. Okay, So first let me make them a group, subscribe input, fill and subscribe input for McDermott group, I'm going to say subscribe input. And from here I'm going to add our texts. You can say subscribe. I can put this subscript here. This is the subscribe text. So we have this input field and then we have this text. It looks really nice. I'm going to make them a group. So this Subscribe button, I'm going to make them a group. I'm going to rename it. I'm going to say Subscribe button. Here we go. So we have the subscribe button and we have these subscribe designed. Perfectly. Cool. So it looks really nice, and I really liked this one. And in the next part, we will design our footer section. 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. 9. Footer Section Design: Welcome to this lecture. In this part, we are going to start designing our footer section. So we have done so many things so far. But now it's time to design our footer section here. So to do so fast, I think we don't need to have this mass of space in our footer. So we can simply minimize it a little bit. I'm going to select this text off, and then I'm going to minimize it a little bit more. And then from here I think I can add this put option. So I'm going to take a rectangle design from here. Then I can design this one here. Cool. And then fast, I'm going to add this background color. Not exactly this color. I think this color. Let me see how it looks. I wanted to use this color. I think I think we are using this color is still, it is really big. We don't need to we don't need this bigger size of our footer. We can minimize it. And then I can taste it. Yeah, it is. Okay. Now, it's looking really nice or we can use a different color, maybe. Let me try how it looks if I use a different color instead of this color, what about this color is slightly dark. I guess. It looks not bad. It looks good. I'm going to keep this one. And now, now what can I do here? So basically, we can add two different part, two different section for this one. And maybe I can add a title here. And then we can simply add collapse option, note collapse option here. So what can I do first? First change it to Footer, Footer rectangle, whatever it is we are writing. And then I'm going to add a text here. So we're going to make it to section. We're going to start it from this, this grid. I'm going to add it. We can say services and make it a little bit bigger. Okay, So instead of, we can say 24 maybe, and then we can add, alright, so 26. And then before and then we can translate to adjust the font family of this one. We can choose exactly this color, this one, I think. And, um, but in the bottom, we can also add one unknown length. So how can we design this underlined? I think we can choose a different one. I think this one we can choose. And I wanted to get something really bold or something really unique. And yeah, it looks good, but then I will have to make it a bigger size. Okay, so just keep this one. So now after that, I'm going to add our underlined. So to draw an underline, normally I prefer to use it in this way instead of using the line tool. Because line tool is bit difficult sometimes to design. So I'm going to add border-radius 20, and then height is going to be three. Then we can select the color to white or execute this color. And then I can, I can, I can draw this. I can drag this color just, just the bottom of this service. Cool, It looks nice. So now I can also decrease the height to two pixel. It is looking good. Now, I can add here a couple of items. Services we can say. Now here I can say from here I can just start writing. I can say, I can say new home, But definitely the font size will be very small here. Maybe 161616 is really small. Maybe 2424 will be good. So home is going to be 24. Now, I am gonna, I'm gonna add it from here and I'm gonna duplicate it. I think in this space. It look good. Okay, So I'm going to duplicate it a couple of more times. Cold. So we have this one. We can say new era new home property. Property properties. And I'm just writing some random services. Just for just to add some text here called support bank loan. You can add to any texts whatever you want tactically, it actually doesn't matter. Then bank bank loan, then we can add credit card. So it should be bank not L, it should be bank loan. And then creating credit card, make it capital. Alright, so it looks really nice. So what can we do now? We can make them on group. So all this part gate guard, bank loan called support and the new home McDermott group. I'm going to make them a group. I'm going to make them a group. And then I'm gonna say IT. Services item. Then I can. Okay, so another thing we need to make group for this one and this one, sorry, these to make them a group also we can say food or title. The title and then I'm going to make a duplicate. And I can just put it here. And then I can duplicate it as well. And here we go. So this is the beauty of this thing. And now instead of services, so we can simply say product, incident services, we can say product. And here we go. So we have these surfaces, we have this product features, we have this option also product, and then we can change something from here we can say is going to be we can say all real estate. Real estate and then Part D, then dresses. And then you can say shopping mall. Then shopping mall and up. And then we can add card. And then we can say phone and just writing some random name, garden phone. So product card and phone. And here we can add another thing. We can. What can we do? Normally we have these kind of things in the photo, but we can add 21 more text and one more description here actually. So maybe we can, we can edit text here. We can simply add a text. We can say future goal. Future goal. Okay, So basically, instead of this, we can simply duplicate this folder title. Okay, so we have this photo title here, so we can just drag this one in this way. And then I can simply say future goal or future, future goal. And then how it looks, It's going to look great, but we don't need to have, okay, it's fine. We can simply, why do we can simply say 80 or maybe a 100? And then we can add our text here. We can say, our future goal is that Congress is described here. And then what can I do? Basically, I can decrease the font size to 40. And as I told you earlier that we have our, we have created this asset here. So I'm going to drag this. Text here. And I can just put it there. Cool. So now we have these three options. So we can simply make it or we can simply add few more texts, but I think we don't need to add any more text here. But the one thing that we can do here, definitely we can add a couple of our icon here. What do I mean by this? So we have this, we have this, our, we have our plugin here. So filter icon. So we can simply say facebook. Then we can say Install, then we can say Twitter, LinkedIn. Okay, so we have this icon here. To add those icon. What can I do? I can simply take help from the Ellipse tools and then I can draw this icon. So make sure that it looks the same. So it's going to be tardy way tardy. Then it should start from the same same size and then how it looks now. So it's no tardy. Let's add a 35 by 35. Here we go. So instead of this, I'm going to choose this white color so that it looks really nice and we have this one. So what do you mean by that? So now let's try to add this plugin, this icon fast. So we have this icon. And we can say fast, Facebook. And I'm going to put it here. And let me try. I'm going to drag it inside the box. So I can see this Facebook icon is here. Now as we have our icon, we have our ellipse. Let's make them a group. So we can say social icon. Now, duplicate it. So Command D, and I'm going to put it in this space. Before that. Let me see how it looks. Now, I can duplicate it four more times, so we need one is for Facebook, instagram, Twitter, and LinkedIn. Now, let me remove this icon fast. So I'm going to add now Instagram icon. So this plug-in, these filler icons. So I'm going to add Instagram. So I'm going to add Instagram. So his Instagram is going to appear here. And I'm going to put it here. And then I'm going to remove this icon fast. And then I'm going to add Twitter. I guess there is here. So I can simply drag this Twitter. And from here I can remove this one also. So there's tutor is going to be on LinkedIn. And I can do this linkedin also here. Okay, so we can see any of these because everything is epi or outside of this frame. So what I need to do, I need to just drag everything inside this frame. Now, we should be able to see our icon. Cool, it looks really nice. I liked it. Alright, so we have successfully implemented this footer section, and it looks great. And in the next part, we are going to design our login and sign up pace. And then we will have to add the prototyping section. So I'm going to stop this video right here and we will continue with the next lecture. 10. Sign Up and Sign in Page Design: Well, welcome back once again. In this part, we will start designing our login pays you a UX. So normally we are going to design this thing. So in our sign-up page, we're going to have three of shows. And in sign-in page, we're gonna have two options. So first and foremost, what I would love to have, I would love to. So let me collapse this one. So we will need one more frame. Let me give it a try, give a look on it, on that one, our main design, if anything is missing here, everything is fine. We don't need to do anything here. Everything is looking great. We don't want to change anything. Perfect. And now here, click on the frame. We need to add one more, which is called Index TO 14 by 14. And here you go. Here. First I'm gonna drag, I'm gonna, I'm gonna design, I'm going to take a healthful rectangle. So I'm going to add a rectangle this side. So, but before that, let me try. I think we need to go in this side a little bit so that we can see the mean is paste. So instead of 47 per cent, let's make it 70 per cent so that we get a bigger, a bigger screen. Or we can simply going to simply run this one. So just want to run again simply. Okay, so let's change the name. We can say sign up. This is going to be all sign up pace. So I'm going to run designer pace so that we can exactly see how big our rectangle is in our sign-up paste. Okay, so it takes time. Okay, So we took more space for this one. So I'm gonna I'm gonna, I'm gonna, what I'm gonna do, I'm gonna select this rectangle. Okay, let's click on the down first. I'm going to do this thing in this way. So then we get more space on the right side. Now for this rectangle, I am going to add to our MAs, okay, so I'm gonna add one image for this one. I can choose this one. Lets me, let me try who's want to look good? So now we have this one. I'm going to press this one. Okay, it doesn't look good. So I'm going to remove this one. Maybe the other one. We can choose this one or maybe we can try this one. So what happened here? So we why we press this? Okay, so I have removed the instead of immense, I have removed the whole thing, so I should not do it in this way. So let me replace the mess. So I'm going to replace this with this one. So it looks nice. Now, I think it looks better than the previous one, but it creates a little bit of shadow. But we can choose one more image, which is DC mess. Maybe we can try this TMS or the other one. The other one is also good. Maybe this one exactly this one fit in this small, smallest screen. Yeah, it is going to fit. So I'm going to keep this one. And now I am going to take help of this rectangle, okay, First we need to have a text here. So I'm going to put a text here. We can say sign-off. We can say sign off. Let me increase the font size of this one. So we will have to add it, maybe 2032, not there. And here, we can add this one here. Okay, so if we want to, we can also change the color of this one, maybe this way. Now, what can we do? We can simply add one rectangle here. And we can change it to 20. Little bit more. Maybe it hearty. And then we can add our border here. And we can change the background to white. Cool, It looks nice. So what can I do now here? We can simply add a name here is going to be named is kind of a placeholder texts. So I'm going to drag it here. And for this placeholder, we don't need to have to add it to. Maybe we need to have 16. And here we go. We have this one. Now I'm going to make them a group command G. We can say the group name is, we can say name, input, float, input, filter. And 21 more thing that I want to do. I want to make it. Make it a component because for the same design, we need for our sign-in phase so that we can reuse it. So make it great component or control ultra k, it is going to make components. So icon has been colored, icon has been changed and in the asset, we will also able to see this. Okay, So now let me duplicate this 11 more thing we will need. So this one is for name and this one is going to be for our e-mail that we will take from what? User? Email. And then we're going to take, for this one, we're going to say password. Okay, so we're going to take password and we can also add a checkbox kind of things here if we want to check box, why not? So for that, let me try to enable this layout grid loud fast. So this grid layout is going to be 50. And we can add our checkbox here. So I can simply draw the check box right below here. Maybe here we can. I can draw a check box kind of things here. And then I can match it with the same size. I mean, the starting point, we can match it. Now, it looks like this, but it should have same height and weight. So we started by 30. Is 30 by 30. And maybe we can add a border. Let me tie how it looks. If I add a border here and it looks like D. So we can maybe we can change the border size and then let's change the color to white. And how it looks like. It looks like this. But the gray one looks good. And I'm going to give a little bit of border-radius here. Cool, it looks nice. Here. We will have to add a text. Maybe we can simply say agree with terms and services, terms and condition. So agree with terms and condition. I'm going to put it in the mail. And let's see how it looks. So agree with terms and condition. It looks nice we have started it from the starting point of this one. And cool. Okay, so now we need to add one more button. So why don't we add from our component, from our, from our component that we have created? Because we, we, I want, because I want to have the same, because I want to have the same size button. So instead of this name. And first I think I don't need to have fast. Let me change the background of this one. I'm going to add this background. I don't need to have this I don't need to have this border here, so I'm going to remove the border. Okay, so I don't need this border. Let me see how what can I see here? It seems that it's still I have this border. I don't know why. I have this border. It has removed now. Yeah. Okay. So this stroke is going to remove them now. Okay. So I don't have any border now. So what can I do now? I can maybe we can try to change the button color, a little bit of this color. Yeah, we can try. You can keep this one and then I'm going to edit text here and the middle lighting, we can say, sign up. Cool. So we are going to add this sign-up texts in the center. And we will have to add This text little bit bigger, maybe 24. And here we go. We can see sign-off in this space. It looks really nice that we have designed our sign-up pace. Now, what can we do here? We can also add few more things, so we can simply duplicate this one and then we can keep the same thing for our sign-in, okay, and we will do some modifications. So what can I do? I'm going to duplicate this entire, I'm going to duplicate this entire frame. Command D. Cool. Then I'm gonna change the name to sign in this, so sign-in page. So here I'm going to make the changes. So instead of sign up, I'm going to make it sign-in and I don't need to have Nim in my sign-in page or I'm sorry. I don't need to have name filled. So what can I do now? I'm going to just pull it a little bit closer to this one. And we also don't need to have this checkbox here. And instead of this. Okay, So I think I didn't make this one. This one and this one just to make it a group paused. I can say button sign-in of I could do it in in signup signup page, but I forgot to do it. So you can make it group so that we can track it easily. Now the sign-in. So it is not group yet. So this bottom sign-in and these sign-in deck and this bottom side and isn't Ungroup. Now I think it is. Okay, so now we can just bring it a little bit closer and it should be in the same line. And then we can also adjust it in this way. Okay, Let's see what can we see now? Cool. We should be able to see this one here. But I'm not sure exactly what is going on. So this is our sign-in paste and we have our emails, and this one was our sign-up page. So we have our sign-in pays, our sign-up base, and we have our text. This is not going to be decks to me instead of desktop, I'm going to change the name to, we can say home. Alright, so here I'm going to make a little bit of modification of this one. So this takes should be in the center node on the top, on this one. Okay, so maybe in this way. Let me run this one and let's see how it looks. I'm going to select this one. And if we run this one, we should be able to see. Now we can navigate to different pace because we don't have on the prototyping yet, but I hope we will be able to do it. So in the next part, now it looks good. So sign-in. And another thing that I forgot to add here is that we can add a text here. I can say, I forgot to add this one. So we should have a text here and we should add a text here. And we can say already have account sign-in, sign in here. So we can simply it should start from this side and I'm going to make it duplicate. Then I'm going to take it to the next part here in the sign-in pace because we will need to have one more text here. We can say, I don't have an account, sign up here and just need to change the text. We can say don't have account. I can say don't ever come sign up here. Alright, perfect. So 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. 11. Prototyping With Animation: Welcome to this lecture. In this part, we are going to start working on our prototype section. So far we have designed this. There's three. Reframe or she pays. One is homepage, so one is our sign-up page, and then one is our sign in pairs. So now we can move from this place to this sign in or sign up paste. Therefore, we need to add our prototype here and I'm going to do it in this part. So to add a prototype, you can see here in just next to this design we have a tab called prototype. So I'm going to click on this prototype. So as soon as you click on this prototype, now you will have option to add prototype, okay? So when user will click on the sign-in pace, when user will click on the sign-up page, we want to send them to the sign-up pace. When they will click on the sign-in page, we want to send them to the sign-in page. So let's add prototype for the sign-up so fast, you need to exactly click this Sign-up Text and you can see the tick has been selected in the left side also, don't select the whole group, okay. Only the texts, only the group or button that you want to do it for us. Here we have this text sign off. So now if I click on it, then I will be able to drag it, maybe here or other components. So if I wanted to go to the sign-up paste, I can simply do it. And as soon as I drop this one, a little pop-up is going to come off here. And here we can select our prototype option. Okay, So for example, what kind of prototype we want to have onClick or on drug, or moving mouseover mouse, leave mouse down and couple of other options. So for us, now we want to have unclick. It means that user will click on the sign-up page. We're going to send them to the sign-up paste. Therefore, we need to select on click. If you want to add an Jagger and drag and drop, then you will have to do these kind of things, okay, depending on your requirement. So I'm going to click on the onclick. And then here we need to select navigate to it is because that we are going to navigate from one frame to another frame. We're in home-based and but we want to move to sign up pace. So therefore, we need to add this navigate and they have couple of other options. For example, open overlays, swab overlay, close overlay back openly, and couple of other options. So open overlays kind of model box. We're not going to discuss it here now. So I'm going to click on this navigate to where we want to go. We already selected this sign up there. The reason they're signer be selected. But here you can also move it. You can also select sign-in. Then it's going to select our sign-in page. But we want to go back to, we want to move to sign-up paste. And now right after that, we have our enemies and section. So when, while our user will click on the sign-up pace, if we want to show any kind of animation, then we can do so by clicking here, you can see this instant instead of instant, we can simply say move in, move out, slide in, slide out. So I'm going to select, or I can also, I'm going to select slide in. It's going to look like this. And we can also select this one here from left side, from bottom to top, top to bottom. And what about these small animation? We will also have this option to see this. This is going to give us this kind of idea. And dissolve is like this. And move out is like this and this. Okay, so we have these options here. And then push is going to look like this. Okay, So you can also see how it's going to look like. So I'm going to use this slide in. And now I'm gonna, now let's see what can we see here? So this is our base and we have our sign-up. And if I click on this sign off, then we can see our sign-up base. Cool. It looks really nice. I just noticed that we should add one more thing here. First, let's complete the prototyping of Sean. Okay, so now we need to make sure that, okay, And one more thing that when user will click on the sign-in, we should send them to the sign-in page. So if I click on it, now, we can send them to our sign-in pace and then unclick to sign-in paste. So let me come here from signing to sign-in, and we can also add it here. So we're going to sign the sign-in. And from here, instead of sliding, I'm going to say slight or can, we can give slide in here, also the same animation. Now let's give it a try. We need to run it fast. And we will also have to add prototyping from here. So if you already have an account, then we can simply send them to signing pace. Okay. So I'm going to make sure it you can see this one now I'm going to click on the sign-in. So we are in designing paste now we need to add prototyping for these two texts. Okay, so if, if there is in sign-in pace, then we will send them. Okay. Then we will send them to you that is in I already have an account. It means that either already have an account, so they can simply sign in. So we're going to move to navigate to sign-in. Then we're going to add this sliding. And if from the assigning pairs, if don't have an account, then we can send them to sign up base. Okay, so now we should be able to click on it. So don't have an account sign up here. I'm gonna click. So we're in sign-up pace and already have an account, then sign in here, and then sign-in. So now what can we do when user will click on the sign-in button? We will give them access to our home-based. Okay, so when a user will click on the Sign In button, we are going to give them access to. We're gonna give them access to our homepage. So we can click this one. And then we can say onclick, then never get to from here to homepage. So this is how we can also add our navigation. So for example, you have maybe 50 or 60 pages. So that time it will be very difficult for you to drag this one from here to there to, to your desired screen. So in the interaction, you can simply add your, you can simply add your everything. I mean, you are prototyping option. You can simply select, click, navigate to the screen and then the instant. So for this one, the animation I'm gonna, I'm gonna select. Let me try how it's gonna look like. So I'm going to select Dissolve. Let's see how it looks. So if I click on this sign-in, and here it goes. So we are now in this home-based cool. It looks really nice. So we have successfully added our prototyping. Now, let me try again. We are in signing pace. Don't have an account sign up here. We are in a sign-up page and then already have an account sign in here. And then sign-in, sign-out here. Already have an account sign-in. And from here we are assigning and we need to add one more option here. So if I click on the Sign Up button, it is not going to do anything. So what I want to have when you double-click on the sign-up, it means that they have done it successfully. Then we can send them to sign-in pays to sign in. So we can add one more prototyping here in our sign-up base. I'm going to slip this one. And then indirect shown. So the clique, so onclick and then navigate to and instead of none, I'm going to say sign in. And then instead of instant, what can I say? I can say slide in. Okay, cool. So if I click on this sign off, we are in signing. And if I click on the sign-in, then we are in our home base. So we have added this prototyping section keys. So what else are we left? I think we have done everything that we wanted to have in our project. And I hope that you guys have learned a lot from this course because we have designed our complete web. And it's going to help you a lot. It's going to add your next available in your portfolio. So this is our fully functional complete design UI UX that we have just finished. And our prototyping is also working. And everything is working perfectly. No issue at all. Alright, so thank you for enrolling this course. Bye-bye. 12. Export Your Design and Share Link: Welcome back once again. In this part, I'm going to show you how can we export and share our design. We have completed our project, we have designed everything. We did our prototype. Now, it's time to share our design with the team or the people around the world. Or maybe you are working in a team. So you will have to share the link or you will have to share the design to the development team so that they can build the app and they can write their programming and stuff. Okay, so now how can it do? There is nothing to aura is very easy. So now I'm going to move to this design part. So this is our app and everything is working perfectly. Nothing too early. So we did everything and then sign-in, then everything. So we have three frame, so we can now export it for example, at first, I'm going to export this homepage. Okay, So how can I do it? So select the frame, and then in the bottom you will have an option Export. Now from here, you can select export options. So what type of format unique, maybe PNG JPEG or SPC. Let's say I want JPG. And then I'm going to click Export home. Then it's going to download. Now, if I click on it, then I will be able to see the design. Okay, this is the format and I can simply zoom in, and then I can simply see the whole design in JPEG format. You can try other format as well. And it looks really nice. Okay, So this way, you can download each and every frame that you have designed. Now, let's download the sign-up frame, so slick sign-off frame. And in the bottom you can simply say Export again, JPEG, and then you can export, sign up pace. Now if I click on the sign up page, now we can see our sign-up page has been downloaded. We have downloaded our sign-up page. Now click on the sign-in page and it goes same. So it doesn't matter how many you have. You can just select your frame and then you can just download it. And you can also, you can also download two times, three times, four times maybe you need to file and you can just select, you can add multiple time, then it's going to download three times. So I need just one. So I'm going to select JPEG and then export sign-in. And let me check it so we can see our sign-in page is here. Now, the most important thing is that how to share this file to anyone. So you will be able to see option called Share, click on it. And then here you can see a couple of instruction. So just to read it carefully. Here they're saying that to add editors, fast move this file from jobs into a project. You can do it into a project file and then you can add different type. So you can add people email address and then they get an invitation. And here you can see Set Role of it. For example, you can just give them permission to see. You don't want to give them permission to edit. Okay, so now if you select can eat it and if you put the Emulab and then if you send the invitation, the person is going to receive the invitation will have access to your, this frame to all of your file in this project to edit and update. Okay? If you just want to show them, then you can simply click on can view. And then you can also select it. Anyone listening, only people invited to this file and a lot of security option they have. And, but in general, you can also click on the Copy link. Then to end with this link you can share and then anyone can access this link. For example, if I add it here, then I will have an option. So I'm in this browser already. So definitely they will have an option, but let's open our open a different bird browser in cognitive browser. And here I'm going to paste it. And let's see what can we see here. So it is going to load the piece. And hopefully we will be able to see our project here. And still it is taking some time. Okay, cool. So here is our complete file. You can see this is our complete file. We're not locked in. Figma is asking us what do we can still access our design, access our file, and then we can see it, but we don't have any access to edit it. We can make any changes here. We can change anything here. We can just view it here. We can just see it here. Cool. And then I can do it. This is the homepage, this is the sign-up pace, and this is the sign in pairs. Okay? And this is how it's gonna look like. So this is how you can share your project. You will design with anyone, you can download, you can give access to your project to anyone. And this is how it works mainly. I hope you have planted and thank you for enrolling in this course.