Figma UI/UX - Design a Messenger Web App UI/UX (Complete Project)

1. Introduction: Welcome to this course. My name is yesterday, Chelsea and Albert instructor in this course. In this course, you are going to design a complete Messenger web app, UI UX, using Figma. While you will design this messenger a web app, you a UX UI gonna land and different kinds of features and best practice of Figma. I will show you how to use different kinds of tools of Figma for different design features. You will learn how to do group, create component feedback grid system, how to use Figma, plug-in, figma prototyping with any mesh shown how to do prototype, offer live features and different kinds of animals shown. At the end, you will learn how to share your design and how to export your design. After finishing this course, you will have a complete real-world project that you can add to your portfolio. Therefore, I will highly encourage you to enjoy this course. 2. Create Project and Layout Design: Welcome to this lecture. In this part, we're going to start working on our projects. So as soon as you log in to your Figma account, you can see this kind of user interface and from here you need to click a new design file. So I'm going to click on it. And then it is going to open a new project file for us. And from here, we will have to create our frame. So we're going to work on the web app. So I'm going to select a frame. And from here you will be able to sit deck stop and the deck stop, there will be a couple of options here. Okay, so from there, I'm going to choose this DIG store, 14401024. So as soon as I select this one, we have this layout. Now first and foremost, I'm going to change the name of this one. I'm going to say home. Now, we need to design our header here. And in the header we're going to have our profile picture and then the name. And then we're going to have two section here. One will be here and another will be here. Alright, so before that, I'm going to select the grid here and click on the grid layout grid. And instead of this grid, I'm going to select column. And then I'm going to select 20 column. Alright? It will help us a lot to design. Okay? Now, from here, I'm going to design our header section here. So I'm going to click on this rectangle and draw here. For now I'm going to just, alright. So now we do have our header here. And now from here by clicking on this field, we can add a different color. For this one here. We can add a different color. But for now, let me hide this one so that we can see our T-cell. So this is our color that we have now, I think this color is good. I liked it. And now after that, I'm going to again show this column. And here I'm going to have one more section to show our user information, user list. Okay, so for that I'm going to select our rectangle here. And after that, till this column, this column, I'm going to put this rectangular maybe from here. I'm going to put this column. I'm going to take this column from here. And after that, I'm going to define our, I'm going to define our stroke here. Now, let's hide this grid system alleged. See how it looks. So it looks like this. I also want to have a white color. So from here I'm going to take little space here. Alright, so I think literally space from here. Now. What can we do? I want to have white color here and also want to have a little border radius here. So I'm going to put border-radius here, tend to pixel, and then I'm going to change the background color. I'm gonna choose the white color, background color that we have here. So it looks like this now. But it would be nice if we show it in this way and then take little space from here, from the left side and from the right side. So this is going to be our main cart and main area where we will put our user list. All right, and now here are right over here. I want to have another section to show the messages. So let me enable the grid system. So this is our grid system. And let's put this one here. Not from here. I was talking about this one. We will put it till this grid and we're going to start our masses from here. I'm going to select another rectangle here. And from here, from right over here, I'm going to start the messaging section of our application and make sure that we have same height and weight. And here we go. This is our starting point and this is our starting point. Also. You can see the little cross symbol on the left side. It means that it is started from the same size, from the same place. So if we hide our grid, then we should be able to see these kind of things here also. Here we can see these kind of things also. Read now we put border-radius ten pixel for that one. So I'm going to put border-radius ten for this one as well and then add the stroke. If I click on this talk, it is going to give us the border. And then by clicking on it, I'm going to add the white color so that we have same color for these two items. Okay, Now we have this little space. And from here I'm going to, we don't need to have this model space, so I am going to increase this space from here, a little bit of a space from right over here. Alright, so these are the two main section where we are going to have our main content. So over here, we will put our user information like our profile picture for that, for the logged in user and then the name. And here we're going to put all the chat messages and then here are all the user and then here all the chat messages here. So I'm gonna stop this video right here and we'll continue with from next lecture. See you in the next lecture. 3. User List Item Design: Welcome back once again. In this part, we will try to design our header and our sidebar. So for that first, I'm going to select the ellipse here. And in this ellipse, I'm going to design this ellipse tool here. So here we will put our e-mails and make sure that we have exactly same height and white. So I'm gonna put 60 by 60 and put it here. And then after that, we want to have our border radius here. So not bothered ideas. I want to have a border here and change the border size to five. And I'm gonna make it white color. So it will look like this. If it is required, then we will make changes. And now after that, I wanted to have a name here. So I'm going to click the text tool. And here I'm going to say John Doe. And I'm going to select the font size to 16 pixel. Here are, maybe we can choose 20 and put it in the middle. And now from here I can choose different font family here, just click on it, takes up to the text. And you will be able to see a couple of font-family them that they have added. And I'm going to choose some random name here. It is not showing here. Maybe this one we can choose, not this one. We can choose this one actually. Or if there is something better. And it's going to look like this. It's gonna look like this. Not this one is very small. This, and this. And this. I'm going to choose, I think this one, this one was better. Alright, but it doesn't make any changes here. So I'm going to choose this linden or we had something called, Alright, this one. Now, here I'm going to put our image to put a EMS. They have a mistake here, so place the mess. So you need to select, you need to select the Image tool. And from here, just upload your profile picture, upload your picture that you want to show. For example, I'm going to choose this one here. And it shows that adding MS and after a fall apart, while you will be able to see this image in your mouth, just select this one, and then it's going to add your ellipse tool. Okay, so now I don't want to have it five for the photo for the border. I'm going to have it three. Okay, Now it looks good. Perfect. And here, over here we want to have our messages list. But before that first, we need to have a source bar here. So I'm going to define a rectangle here. And put this rectangle, or border radius. I'm going to say border radius ten pixel and add to bordered here, change the background color to white color. And here, right over here, exactly, we can do it. So here we can, we can, we can, we also need to have a button here. We also need to have a button here in the same size. So I'm going to duplicate this one and then drag it here and then resize this one for the button. We can just put it here in this way. Then I can increase this one. Here. We will put our icon and here we can just pay it out. We can just add a texture. We can say, we can say sars, sars user name here. And I'm gonna change the font size to 15 pixel. And maybe color, or I can do a little shed color for this one. The shadow color. Alright, so now it looks good. Now here I'm going to put our e-mails. I'm going to put an icon here for that. I have already installed a PECC is called goal to go to the plugins. And here you can see that our feeder icon. So if you haven't installed it yet, then simply you can still click on Find More plug-in and then just search this filter icon or you can use any other plug-in to show the icon here. So I'm going to click on the folder icon. Here. I'm gonna add sars. Sars. So they have a sars icon. I'm going to just put it there. So here is the Search icon. So I'm going to just select this option here, sars icon, and put it here. In the center of this one. Now you can see that this one is outside of the frame. Our mainframe is home, so I'm going to just drag it inside this frame. All right, so this is our search icon, and now after that, I want to have our couple of options here. It comes here. I'm going to remove this one. So here we will show our list of user. Alright, so how we will show a list of user, we will take a healthful rectangle here. I'm going to draw a rectangle here. And then this rectangle here. I'm going to draw this rectangle. And I'm going to add ten pixels for this rectangle, for this car, for this article, for this rectangle. And then I want to have a white color, like the same color that we are maintaining, but I want to have a stroke here. So select a stroke here. Now, it looks like this and over here, I think we can increase it. We need to put our one icon, then the name and the message, and the duration, and then little dot here. So how we will do it? Who we can duplicate this one because we need the same design. Okay? So I'm going to duplicate this one. So Command D, Control D and then just put it here. But we can't see it here. It seems that our rectangle and our EMS, EMS, but it's not showing here. So this is our ellipse. The ellipse to, let me bring it front. We can say H naught there. So I'm going to delete this one. And let's make a duplicate again. And then drag it here this way, and then track it here. Okay, So the issue is that it's not in the front. So it should show us. You can see Bring to Front, click on the bring to front. And now it is in the front. So I'm going to just put it here. And then I'm going to add our name here. So this is our ellipse tool. I'm going to make it, make it a name. I'm going to give a name here, so I'm going to say Rename. So here is our ellipse, this one. So I'm going to rename this one. I am going to add this one way it's moving here. So this ellipse is going to be our name. So press Control R, n here. I'm going to say here user icon, list and the user list. And after that, I'm going to add our name here. So let's say we can say, we can say Francisco. Francisco. And you can see that it is taking the previous font-family that we have used. So for the font family, for the, for the name is taking this one. And I'm happy with that. If you want, you can just change the font family name here. And after that, so and is taking a pixel 15 like they owe font size. And then I need to one more text for the masses. We can say, Hi, how are you doing? But for that, I want to have 12 pixel. Here. I want to have 12 pixel. And now here I want to put our duration here. So I'm gonna put a time here. I'm going to say, let's say 09 by 1915 PM. This is the time that we show. But is taking white color. Why is that? It should be white color. Where it's taking white color. This should not be the case. Let me delete this one. So let's put the text here again. Now we're still working. So let's put a 90915, 15 PM just to time of the message when the user has sent. And here I want to have three dot for that. I want to draw a T dot here, like a small size dot using Elasticsearch, say five pixel by five pixel and just change the color to black. So now it looks like this. I think we can do with three pixel by the height, and height is three-by-three. Not good. So I'm going to do it four by 44 by four. And then I'm going to duplicate it Command D and take a space and duplicate it one more time. So these are the three dots that I have just added. So it would be nice if I decrease the distance between these two. Okay, so it looks good. So here we have this ellipse, one ellipse tool in Illustrator, make them a group. So I'm going to press Command G. And then I'm going to put it here. And the center of this one. Now we have this t dot and I'm going to decrease the height of this one because we don't need to have this number of height. Alright, so now, alright, so a little bit more here. So we have this design here. Now what we will have to do, we will have to add multiple items of this one. So what we will do basically will make them a group and then we will add multiple items and then we're going to add a scroll options. So I'm gonna stop this video right here and we will continue with from next lecture. See you in the next lecture. 4. Group and Vertical Scrolling: Welcome back once again. In this part, we will try to add multiple list, multiple user item, and then we will try to add a scale option. So now we have this design and we can reuse it. So we will have to make them a group. So this rectangle, and then this is a list or EMS and that we have created then this text, this text and this one, and this group one for this taught icon. So these are the things that contains this integral item here. So I'm going to make them a group. So select all this from the left sidebar. Make sure that you have currently selected each and every items. So I'm going to select Command C and then I'm going to rename int sensitive group to press Control R. Or you can also do it by clicking here. So you can see your name controller. So I'm going to say user list. So when you are working in a big project, always tried to give a meaningful name so that later when you make changes, you can easily find out. So it's always a good practice. Now we have this design and what can we do now? So I'm going to press Control D for this one. And then I'm going to drag it here. And now I just need to drag it only once. And after that, I'm going to just I mean, I just need to drag it once and I've put that, I'm going to just press Control D, then it is going to automatically. So press Control D, Control D, Control D, Control D until the end, Control D. So these are the user list that I want to have. Now, let's run it how it looks. Okay, you can, one thing, you can notice that there are some icon, there are some list that goes beyond our mainframe, therefore, we won't be able to do it. So this is where it comes. This is where it comes out, is called functionalities that we are going to learn here. Alright? So now we will have to make it scalable option so that we can see rest of the part and we can call it vertically. Okay? So how we do it exactly. So now we have all these user list. So these are the list that contains our whole things. Okay? So these are the lists that contain, you can see if I select this one, there is another one, but we can see it. Now. Do one thing, select all the user list again and make them a single group. So select all this item. Now, this contents is the entire thing. So now I'm going to make them a group. Okay? Now, again change the name. We can say all user list for a scroll, just a meaningful name. So now these group contains all of our user list. And easiest all this content in this unique design is a specific design. Okay? So now just come in the right side, you will be able to see auto layout options here. You just need to click on it. As soon as you click on it, you'll see clip content. So you just need to click on this clip content. Once you click on this clip content, you will be able to see that this group will have this kind of shape. Now, we can drag it and then we can adjust it with our mainframe, which is there was this home from this form premise still here, but our group is still here now. So what I'm gonna do, I'm gonna just add just it here. Alright. Now, we want to be able to see any school options. So if I refresh it, we'll just see these options. Okay, So the thing is that let me show you what I mean by that. Now is still we can see the skull options is still we just have this functionality here, like till here. I can also, again, I can drag it here. It'll look like this. So we have this option still here, okay, we can just call this item. You can see we can scroll it right? Our, our user list is broken till here. Now, just select this user list and then go to the prototype section. Click on the prototype. Here you can see overflow scrolling. By default, it is selected no scrolling. We need to make changes here. So instead of no scrolling, we're going to select vertical scrolling that soul. Now, we should be able to see our list. Here. You can see that we can scroll our item. We can scroll our list. This is how we can make changes, but this is how we can add our school options. So now we have these options here. Cool. So now you have learned how to do scrolling. Let's do one thing. Now. I can change. These are images like different images. So I'm going to again select Plessy mess. And then I'm going to select all these images. It's going to take a couple of seconds to upload these images. And as soon as it is it has finished uploading, we should be able to see our images in our mouth when we will move it. So image is resized, so it's still, it's taking time. It's not showing. Here you go. You can see that we have eight emails now. So now I'm going to select this one. I'm going to press, so we already have this one. I'm going to press one here. I'm going to press the second one here. Third one is here, fourth one is here. And this way, you can just, you can just show you, you can just put multiple images here. You can see this. Now we have different images. It takes some time to refresh it. So now we have a different images for each and every item. So what I did basically, I just clicked on this place emails and selected all the images. It takes few seconds as soon as it's uploaded, then you will be able to see all the images with a number with your mouse. And then you just need to go there and just click it one by one, and then it is going to automatically paste here. Here we go. Now we have a drug Fannie Mae's for different card. You can see and we can also scroll it. And we can also scroll this one. So this way if you want, you can also change all the images here. You can just do it by your own. It's the same process. So now we have this scroll functionalities and different icon under different images. This is how you can do it. All right, so I'm going to feed this one. So you've have learned how to do scrolling and how can you group it and how can I do it here in this way? In the next part, Let's work on this icon. When you click on the icon, we're going to show our model works to delete the list. See you in the next lecture. 5. Dropdown List Open Overlay Prototype: Welcome back once again. In this part, we're going to add a one on one item here. When you click on this one to delete this list, how we will do it for that, again, we need to define a frame. So I'm going to click on the frame, and this time I'm going to draw a custom frame, like drag it this way. Alright, so instead of frame one, I can say, I can say delete frame. Alright, you can give any name and I want to have little border radius here. So I'm going to save five pixel. And inside this Dillard frame, I want to have two buttons. One is for delayed, one is square unframed. So what can I do? I can define a rectangle here. And I can define our rec, rectangle here. For this rectangle, I'm gonna give border-radius 95th cell so that it looks good. And I'm going to add red color and this color here that we're using here. And then I'm going to put a text here. And I'm going to say let and put it to center. The text instead of 15, it should be 12 because it's just a normal button text. Now what can I do? Make them a group, these two. Now, I'm going to duplicate this group so that I can use, I can add another button. And this button is going to be this button name is going to be on a friend. I can say. And Friend button. Now let me put it in the center. Alright, so now we do have this frame. Now, what do we need to do? We need to connect this frame with this dot. So when you click on this top, we can show this one. Go to this, click on this prototype, and now click on this group, on this dot group. Not exactly in the soil. You can see that. Do you remember that for those three dots, we have a groove. So you just need to click on the group. And then here you will, we see interactions. Click on it and click here. Here it says that how you want to interaction, we want to have it on click or on track or on, well, we want to have it in onclick. And then instead of navigate to, I'm going to show up and over. Let this open overlay helps us to add our model box kind of things. So now where we want to do this open overlay, we want to do it with this delete frame. Now this node is connected with this Gillette frame. Now here it says that add background behind overlay. I don't want to have any background, so I'm not gonna select here. And then it says closed when clicking outside, I want to close it when user clicks on the outside. Are I will show you what does it means. And now here it has this animation system from where you want to show this one or from where you want to do it, or you want to have it instance. So let's first add this animation move in and ease out so that you understand what I mean. Now, if I run this one, if I M here and if I click on it, here you go. Our delete, I'm the lead frame is going to come here by default if I click outside it gone. Now we need to put it manually here. I want to show it when either click on it, instead of coming in in center, it should come over here. So how I will do it? Here, they have an option called centered by default. And here top left of center, top right, bottom lead from where you went from where you want to show it. So let's say bottom left. Click on it. It's going to add here in the bottom left. But we want to show it here. Therefore, you can just play with this one. Let's say you want to show it in top right. Now if I click on it, then it's going to come in this top right. Okay, So you can just tell. So my goal is to teach you. So I'm just showing you the old options later you can use based on your requirement. But for this one I'm going to select. Meanwhile, as soon as I sleep with the mineral, I can just drag it here just after this one. I can just drag it here. Now. Now, if I refresh it, it should come here because we have edited here. Now, click on it and it is here. Alright? So as we have white-collar background and we also have this one. So I'm going to make I'm going to add a different color for this one so that it's easily visible. So instead of this, Let's put this gray color. Now. It is easily visible here and we can put it here. But if we want to, we can also add a different color for this one, maybe this one, and this color, now it looks good, is easily visible. I click outside, it goes, but I don't want to have any measured because it is not user-friendly, because we don't want to show our user. It comes from the bottom. What do we want to have? We want to show when either click the degree it shows here. Alright, so how we will do it? Now again, move to this prototype section. And here we had our interaction here. This is what we had here. Okay, so we need to click on it. Then we can see this one here, our previous one, and here they have options. So instead of animation morphine, I'm going to select Instant their seats. Then it is not going to give any measure. You can see instead now. You can see instead now. Alright. Click on it, it's going to come now when either click on the delete button and unfun button, I want to also dismiss this one. I want to remove this one. So how I do it? So now click on this button, click here, and then show this indirection here. Click on the onclick and you get, you just need to click on this gloss over lead because we had a, we have overlap. So I just want to close this overlay. So when users click on this, you click on it, we see this overlay. Now click on the Delete. It's going to go on this way. The same way we can also add for this unfair and off Sean's. So select this and friend and come here, select this one, onclick none, and click Close overlay. This one is also now connected. Now I click on it, it's going to close. I click here. It shows these two options. Then click on it, it's gone. So this is how you can do open overlay of shows, model work section this way. And then you can also do this kind of list. I hope you have learned something new today. See you in the next lecture. 6. Message Sending Design: Welcome back once again. In this part, we will try to design our main message layout. So here I want to, in the previous part, we have finished all these functionalities. And then this one is also working. Alright, so we can also do little fixing here, for example, that I think we can just decrease the frame height, little bit less setting. And maybe I can not, not this one like the mainframe. I'm talking about this mainframe. So slick this mainframe and minimize, decrease the height of this one. Now we can see that it's fixed. Okay, So now I'm gonna do a little bit more. Okay, so, okay, so let's increase it a little bit more. Now select this one and put it just here. And also this one, the main cart that contains our main design here. And also we need to adjust our frame again. So click on click this frame that we did here. And then we can just adjust it until here. So now it looks good. We can see now we don't have this scroll. I mean, like we firstly, our Haida was more than the display size that I have. But if you don't want to make changes, then it's totally fine. So now we have this starting point for this layout from here, and this one is from here. And now we can just call it, now it looks better than the previous, previous one. Alright, so what I did just basically don't get confused here. So what I did, I just decrease the height of this mainframe, which is our home frame, and then just add just in this frame and then just adjust these frame that contains this whole thing. And then this so all user list frame, just adjust it so that it looks better now. And previously it was like we had little bit of a scroll. Alright, so now here I'm going to add the d then option here. So what I'm going to have here, I'm going to have one emus and then beside this EMS, the name, and then the time and then the message. So what I'm gonna do, I'm going to just duplicate this, this emus. And then I can just put it here. And four here. I'm going to add a different stroke color because our background is white. So if I choose this wide, then it is going to look bad. Not bad exactly. We even owned understand this one. You don't want visible. Now I think he's visible red, so I'm going to select this one, and after that, I will have to add a name here. So I'm going to send him Francisco. Francisco is going to here and I'm going to put the name here, 14 pixel. And put it in the center. And in the same center, I'm going to pull on the text and it will be our time. Or we can also put the time here or in the middle. If I put it here, then we're going to have one more text yet. No. So it'll look good in the center. I'm going to say den, den 12 PM. And then I'm gonna do this thing here and the center. And after that, what I will have after that, I'm going to have the message here, the message box. So for that, for the message box, I'm gonna, I'm gonna draw a rectangle here. I'm going to add the message from here till here. The message books will be look like this. And I'm going to add a border radius here. So add border-radius ten. And Jen's background color or without background color, if it looks good, then we can also keep this one. Let me try. This one will be the best solution. So now this is our message box. And I want to have a little bit of shadow here, like instead of 100%, Let's put it 50 versus n. Then if I use a different color and it doesn't look good in 50%, maybe 70, 70% per cent. It'll look like this. Put it 80%. We will have this light color and this one doesn't look good. So I'm going to try to generate some other colors. Maybe this color, this color, this one. And then put a linear gradient here. So the linear gradient is not going to be visible here. So I can just put it here. So instead of this color, I'm gonna choose the white color. And then I'm going to choose the water it is because in the message we always have the normal, normal color so that user can look on the screen for a long time. But if we are using a colorful color that in colorful message, then it cannot be very bad. It's not user-friendly. But if you have a different thing, different team, for example, black team or any other themes, then you can try to use different color. But for the white team, for the white-collar background is always better to keep the masses in a white shadow. So I'm going to minimize this height. And inside these, I can just type in essence here I can say, Hey, Hi, How are you doing? How are you doing? Is everything alright? Is everything alright? Alright, so this is the message box that we have here. So now we will need the same thing here. Okay, So now I'm gonna duplicate, okay, so let's duplicate another one, like this one, this message, this image. So I'm going to duplicate this one. And I'm gonna put it here. So I'm going to just duplicate this one here. Sorry. Okay, So I did it in wrong way. So instead of doing this, I'm going to make it a component. So create component, then we can just use it from here. If you want to create component, then just select the mess or any component. Then right-click, right-click, and then click on the component, create component. For example, this one. And then click Create Component, then it's going to appear here. And then you can use it as many times as you want without any problem. So now here, I'm going to put this thing here. And I'm gonna duplicate this one, command D. So in the same level, it should be. Here we can see this is the middle. All right, So here, now I'm going to change the time. We can say. We can say then then five. And then here, right here, we will have to write the name. So I'm going to take and add the text and I'm going to put it here. I'm going to say Jessica. And I'm going to put it here like in the same level, but close to this one. Alright, so Jessica send messages to Francisco. And let me check if we have the same height or same fonts. Font size 1414. Now we will need the same design here. So what I'm gonna do, I'm gonna make them a group together. These two per item, select this rectangle under this text. So make them a group and then I'm going to duplicate it. And then I'm going to put it here. And for this message, I'm going to put it here and the right side, in the right side. And then I'm gonna put it here. I'm going to decrease the size. It is the white of this one. And here you go. So dismisses comes from, dismisses comes from Francisco. This one comes from Jessica. And then together we can just move it here. Yes, But everything is fine here. But let's group these two things like this, this one, and then this Jessica, and then this time these two and this user list. So I'm going to make them a group, slit all these things. And we need to put it in a bottom. From here. I'm going to duplicate one more time, this message here. And then I'm gonna put it here. So these are the two messages that has been sent by that has been sent by Jessica from here. So this message comes from Jessica. And here I'm going to put one more things here. So I'm gonna, I'm gonna have our line here, so forth to add a line. We can take line tool or we can take the rectangle tool. So I prefer to use this rectangle tool so that we can customize it easily. And then I'm going to decrease the height of this one. Let's put it to, then add border-radius and 90 click cell. And here we go. Let's see how it looks. It looks like this. And I'm going to select this one. The color of this one is a block, I think. So we can choose this color to black. And not blog exactly. Little bit of gray would be nice here. Yes, So it looks like this and the same thing. This message comes from Francisco and dismisses comes from Jessica. Let me change the message here. I can say sent here. We can say, i'm, I'm gonna add different masses here. I can say this is Jessica from your colleagues from your university. And then second message, How are you doing? Just a random S's so that it looks good? And food? And it should start from the same poem, same position here, like this starting point from here. Alright, so these are the two messages that has been sent by Jessica and Francisco. And after that, the right over here, I want to have all one message box here. So I'm going to design a message box here. I'm going to add a message box here, right here. And then it should start from the same position that it started from this image. So when you drag it in this way, you can see this thing here. Then I'm going to put this border-radius 90 pixel, not 90 pixel. It would be nice if we select party pixel maybe are not tightly pixel, nine pixel. Alright, now here I'm going to put, I'm going to add a stroke and change the background color to white. And here we will have to define another buttons for that. I'm going to duplicate this one. And just to decrease this white. And this one is going to be for our Send button. Okay? So it to start from the same, from the same position that it started from here. Now, these other two button here, the two fields we have here. So this one, I'm gonna give a different color. So I'm going to add a color, stroke color that I chanced, unfortunately. So actually we don't need to have a stroke here. We need to have a background color here. And then it's target is not visible here anymore. And here I'm going to add our icon called sent with our text. So here first we need to edit text here. We can say here, we can type here, we can say scent and put it in the center. And right after that, I want to have our icon called feeder icon. Here, I'm going to add sent. And I'm going to select this icon. And just put it here. And I'm going to change the color so you can see selection colors here and chance it black to white. Cool, it looks really nice, but you can see that this send icon appear outside of our frame. Therefore, we want to be able to see it here. So what I'm gonna do, I'm going to just drag it inside the frame. Then we can see our Send button. I think we need to put it in the middle. In this way. Yes, this is the middle. And this is what we have right here. Alright, so this is our messes up shows n right here. I want to add a text. I'm going to say type your dye, your message. And I'm going to add this t dot. And then I am gonna, what I'm going to have, I'm going to add a shadow here. We can change the background, we can change the color of this one. Like this kind of color. We can choose leg little shadow color, this color. Alright, so everything is fine now it looks really nice. So we have designed our message sections. So I'm going to stop this video right here and we will continue from next lecture. See you in the next lecture. 7. Sign Up and Sign in Page Design: Welcome back once again. So we did our message system message. But still I need to fix few things. For example, here you can see that we don't have this border that we have here. So I'm going to quickly fix this one. And we have this border. Stroke is three. So I'm going to choose the stroke here. And I'm going to put this stroke. Alright, so I did a mistake. I need to select this item only. Here I'm going to add the stroke. Stroke is going to hit C. And a stroke color is going to be this color that we have here. And we, alright, so we already have a stroke here. It seems that so I'm going to remove this one here. So here, double-click on it, then I'm going to change the stroke color. Because you already have a stroke, because we just met it component. And in our component, in our previous design we already had their stroke. So just double-click on it. And then you see the icon, and then you see the color, then change the color here. You don't need to add another stroke here because we already have one border for this one. Alright, so these are the few things. Now, I want to design our sign-up and sign-in pays for that. I'm going to create a frame here. So let's create a frame here. I'm going to just do it in this way. It's this small frame. And I'm going to add a border radius here. So we can say here, first change the name. I'm going to say sign off here. And here I'm going to add, I'm going to keep it border-radius Cyprian pixel. So border-radius flipping pixel. And here we will have to add one text and then input field. So I'm going to add sign up here. Sign off here. So this is the sign-up text. And here you go, we have design upticks in the middle. And I'm going to change the font to 20 pixel. I think. We can, we can, we can select two into pixel. And here I want to have to input fill not to exactly three input field. One is going to be look like this. And I'm going to put a border radius 22 pixel and add a stroke here and change the background color to white color. Here, I'm going to add a placeholder. I'm going to send name. Or we can put this name just over here. So it would be nice if we can give the name in this way. Okay. And let me drag it a little bit more. And then this is going to be name. This is going to be name field. And then let's make them a group so that we can duplicate it. So group and then Command D. I'm going to add this one is going to be e-mail. So just change the name to email here. So we're gonna say email. And then after that, I'm going to have this D. And this one is going to be password. So this one is going to be password field. It seems that I need to increase the height of this one because we still need to add our button here. So and also need to adjust this one in this way so that it will start from the same position. Alright, cool. So now we need to add our buttons. So for that, I'm going to draw a rectangle here and our button here. So I'm gonna put it 20 here. Let's put it in 90. And then I'm going to give our background color to this one, maybe this color. So we have this one and now I need to put our text here and the center called sign up. And I'm going to add it here and the center. Alright. So it looks like, it looks good now, but still I want to have a little bit more design here. So what I'm gonna do here, I'm going to select the Ellipse Tool here. And I'm going to add this kind of ellipse here. And let me show you what exactly I want to add here. I want to add here multiple color and the site. So let's give it a color. Just a random color, this one. And now here's our setup. This one are set up this frame, so I'm going to put it inside of the frame. So now we can see this kind of shape. So I'm going to draw one more here. This way. We can add as many as you want and we can just as two mice it later. So now I'm gonna give an, another color to this one. Maybe this color. But again, I need to put it inside this frame. Now, it will look like this, but I didn't like this color. So what I want to do, Let's try a different color. Now. It will look like this. It looks better than the previous one. Now we do have these two design here in the corner and the right side corner. And what else we can do? Let me drag it in this way. Maybe we can add a little more design here if you want. Okay, let's try to add one rectangle here. Okay, so let's draw a rectangle outside of this one and give it 90 pixel and add a color to this rectangle. This rectangle and this color. Alright, so now I can just drag this rectangle and this, I can just rotate this rectangle in this way and put it inside this one. So what I'm gonna do, I'm gonna add a linear gradient to this one and change the color and this way. And we have now this linear chef. Alright, so now what can I do? Let me change the color here. Now, it looks like this. And I'm gonna, I'm gonna duplicate this one to add one more option here, to add another option here. So it looks really nice now. So now if I run this one, I should be able to see you one more. I should be able to see this frame. And let's see how it looks. So it looks like this. So it looks really good. Alright, so when either click on the Sign Up button, we will send them to a sign-in page. So we will have to design a sign-in page as well. And one more thing I want to add, I want to add a text here. I'm going to say already have an account. Already have an account, already have an account sign in here. So I'm going to decrease this font size to 14 pixels. Not pixel like the font size. So put it here like this starting point. Now you can see these things. Now, we need to duplicate this one. So we can duplicate this one and then we can add the same design for our sign-in page, but we will have to make some changes here. So I'm going to click on it. I'm going to duplicate this one. And fast change the name to sign-in instead of sign off. Now, here, change the name to sign-in. Then we don't need to have on them when user will sign-in. So what I want to do, I want to just rearrange this one in this way. From this starting point. Actually, we can undo this one here. Let me undo this one. And this is the starting point. And this is the I'm gonna just remove this password here and change the name to email. And this one is going to be password. And then I'm going to drag this button to hear. Okay, so it seems that on this sign up, so fast change the name to sign in. And we need to make it a group. So I'm going to make them a group and put it here for the sign-in. And then I'm going to drag this text here. And this time I can say don't have account, then sign up. I can say don't have account and then I'm going to say sign up, sign off, and sign-in. All right. So now all we have sign-off, we have sign-in until it may run it again, it should work. So we did our sign-up, sign-in page design. In the next part, we will try to connect these two things or using prototyping. Alright, so we have this one, okay, so we need to select this one. And then I can run it. So sign-up, sign-in our main homepage. And here you go. So this is the word sign-in. So it looks really nice. Alright, I'm going to stop this video right here and we will continue from next lecture. See you in the next lecture. 8. Prototyping With Animation: Welcome back once again. In this part, we will try to add our prototyping, but before that, I want to have one button here. And then I want to start the prototyping like we will have to will. I need this kind of design here for a lockout. So when either click on this button, we show a drop-down to have a lot logout. And then we from the logout, we send them to the sign-in page. And from there we can do all this prototyping. So let's add one frame here. One is small size frame here. So I'm gonna give the name here, logout. Alright, so now this is our logout frame. I'm going to give it a border radius. And here I'm going to design our button here. So I'm going to add a rectangle here. I'm going to draw a rectangle here. And then here I'm going to add, I'm gonna give it 90 and then put it a red color. And in here I want to add the text here. So the text is going to be lockout. I'm going to say logout and put this text in the center. So now we have this logout frame and then we have this one. So when user will click here, so let's add one icon here. So I'm going to add a filter icon. I'm going to say arrow. I was looking for in these kind of icon with the arrow one, this one. So I'm going to drag this icon here, right here. And I'm going to put this color to white color. Okay? So where is this icon? This icon is now sign-in, sign off. Okay, so we've seen inside the frame already. Let me check it. So here we go. We have this icon. So when we click on this icon, we show these logout frame like a same way we did the same way we did for this one. So for that, what I'm going to click on the prototyping, click on this icon. And then at interactions here, and click on it. On click, we want to have, and then we want to have our open overlay. And this term, we want to show our logout frame. And how we want to show. We don't want to have when user loss, when clicking outside, we need this one. So instead of center this time, we want to do it manually. So we want to show it. We want to put it right here. We want to put it right right here. But before that, let me give it a background color. Otherwise, it is not going to be visible. We can not the red one, like the color that we used. Here. I think this one is not going to look good. So we can choose this color, I think. Or what color code we have for this one. I'm going to copy this one, this color code, and then I'm going to put it here. And here you go. So this one is going to be our logout, or we can do one more thing. We can keep it white. And then we can add a shadow here. Let's keep it white and add effect. Then it will be visible. Now, if we are in the prototype mode, then we have this shadow here and we want to have it instant instead of adding the navigation. Okay? And as soon as let me try. So click on it. Click on it. We can see this logout button. And as I added the shadow, we can see this logout. We can see this little shadow here. But if you want, you can also choose this background color. I think it would be nice if we use this background color. So therefore, I'm going to change the background color again to this color code that we have. Alright, I did it in the wrong place. So we need to change the color code. Here. And now if I come here, I can see this one. Click our site, it goes. So now again, go back to this prototype. And here, when user will click on the button, we want to close our model. So click on this indirection and this time click on Close overlay, and click on it. Click on this log out button and it gone. Okay? So instead of claws here, when you double-click on the lockout logout button, we will send them to the sign-in frame. So I'm going to remove this one from here. So instead of gloss overlay, now this time we want to move to navigate to where we want to navigate. We want to navigate to the sign-in pairs. Alright, in assigning pairs instead of instant, I want to have morphing animation like this way. And let's see now what do we have Glick other lockout. And we are in now. Now we are in this signing pace. We are in sign-in pairs. And from signing pays, when user will click on the sign-in pace, we will send them to our homepage. So what I did here don't get confused. When we click on this button, will open this one. And when you click on the Login button, I just added login button onclick navigate to, instead of claws overlay, navigate to navigate. Two means we want to move to a new frame or new pace, whatever you want to say. So click on the nephew, get to from there. From who is friends? I mean, from navigate from logout to who is frame. You want to go, I want to go to the sign-in page. And here you will have option to add your animation. For example, I have selected morphine and he's going to come from left side if you want. You can do with right-side, top, bottom. And here you can also add easy ease in and out costume budget, or they have lot of functionalities here. You can just do it. Now as soon as the user will click on the sign-in page, sign-in button here. We will send them to the homepage. So click again this indirection. Here. Onclick, navigate to, navigate to where, navigate to our homepage. And here instead of instant, I want to have morphing animation. So now if I click on the sign-in, I am in these homepages. Again, click on this logout button. I'm in the sign-in page. Click on the sign-in page. I'm in the sign-in. Yeah, it is going to working alone. It is going to also work here. Alright. Log out here and we're in the sign-in page. Click on the sign-in. We are in this we are in this main homepage here we have another thing. I don't have an account sign up, so when you don't have any account, we should send them to the sign-up pace. So select this one and add indirection here. And from here, select none to navigate to where you want to send sign-up base. And here instead of instance, you can say move in this animation or you can just choose this one just for an example. Okay, so now click here, logout. Don't have an account sign up here. So here's sign-up button. And from sign-up button, we need to send them to the sign-in page. Okay, So if if they're successful is sign off here, then after soccer school sign-off, we will send them to the login page, to the sign-in page to sign in. So I'm going to select to navigate to our sign-in pace. And instead of instance here, we want to send it to the moving. And then we can select this animation. Now, sign-off, wearing no sign-in page. Assigning pairs were in the main application from sign-off here. So here already have an account sign-in. I need to also add this prototyping. So if you don't already have an account, then we will send them to the sign-in page. So add this indirection here, click on it. Onclick, navigate to. This time is going to be signing. Instead of instance. Let's add a smart dimension like this type of things. Instead of ease in and out, I'm going to say gentle know already have an account sign-in. It looks like this. Sign off, sign-up, sign-in, sign-in. So if you just sign in successfully, then log out. Okay. So from this one, I want to have different emotional leg moving from left side to note this model one. So let's click on this. We have this one. Sign-in paste. Don't have an account sign up here. You don't have an account already have an account. Sign-in pays already have an account sign-in page and from sign-in pairs. So when either click on the sign-in button, I want to change the animation. So when they go to the home here, Let's select this small animation. Note here, like here, select a small animation. And instead of easy Note, Set gentle. Let's see how it looks. So logout, and then click on the sign-in. So it looks like this. So it looks good. I'm going to click on it. Then it's going to look like this. So this is our homepage and we have this is called functionalities as well. Sign-off. And we have this animation. Or let's select the Quick than how it looks. Lockout the econ it. And then we have this shown. But this is not the thing that I, that I was expecting. So I'm gonna select the sliding. I'm going to lock out it and click on the sign-in. So it looks good. And everything is fully functional. I hope that you have learned a lot from this course. And this one is going to also work with this, these things, these are also working sign-off. All don't have an account. Already, have an account. It's working perfectly. I think there is a little fix here, so I think don't have I need to correct the grammar here. So don't have an account already, have an account sign-in here. All right, cool. So everything is fine. Our application is working fully functional. We can just call it, we have this message system, we have this login functionalities and sign-in and sign off on everything is working perfectly. I hope you have enjoyed. 9. Share and Export Our Design: Welcome back once again. In this part, we are going to export our designs. So far we have designed our application, we did prototyping, and everything's working functional, fully functional now it's time to learn how can we share our project with a team and how can export our project? It is very important. So first, let me discuss you. How can you share this file with your team members? So now you can see that in the right side there will be a button called Share button. Right here, you can add the email address. And then here you can also select the role candidate or can view. If you select, can edit, then all the email address you will put here, they will have an option to eat and even just click on it can view. Then they will only have option to view it here. And here you can also add condition only people invited to this link file or anyone with the link. So if you share, if you share the link, then anyone will be able to access your file. But if you select only people invited to this file, I mean, the pupil, you will input using email only. They will have option to access your design. So for now, just click on anyone with the link here. You would just need to put it here and then you can do it here. You can see that copy link. So I'm going to click on the Copy link. And now I'm going to open a new browser here. The private browser where I'm not logged into my Figma. Now here, I should be able to see all the design, alright? And I won't be able to edit it. You can see that it's asking me to log in, but still I can access all the design here. So this is undesired downward frame. So we have this sign-up frame, sign-in frame, and this mainframe here. So I have this option, but I won't be able to make any changes here. This is very important. So I won't be able to make any changes here because I don't have any excess here. And here, I can see this prototyping sign-in, sign off, and this is our homepage. Let me show it in full screen. And I click on it. Logout, Logout, sign-up, sign-in. Everything is working fully functional. And don't have an account. Click on the Sign Up button. Sign-on. Already have an account. Everything is fully functioning, is working. So after working for completing your project, you will have to share your file with the team members. Maybe you're working in a development team, then your team member is going to follow your designs to this link, okay, so this is how you can share your link, your project link, with your team members or anyone on if you want to give email access than just put the email and click on the button. This is the way to share your share your project. And there is another thing. Let's select this one here if I want to. Okay, so here you can see another one called inspect. In the Inspect, normally you see all the design, all the layout, all the leg them, the distance, hide and white and color code that you have used. These are kind of CSS property. Your team member are also going to come get help from this one. So they just need to do inspect one, for example, if I select this one, and here I can see the white of this particular rectangle is 493 pixel high, top-left radius border code. And these are the all CSS property. So your team members can just copy this code and then they can just use it in their web app. So this is how you can inspect this one. Alright? So this is the benefit of this one. Here you can see in the CSS code for this item. Now, let's export our design. So this is our frame. Now come to the click on the design and in the bottom you will be able to see Export option. Click on it. And here you can see the format you want. You need PNG format, JPEG format or as busy format or PDF format. Let's select JPEG format and click on that. Here. You can just put how many you want. So I just want one and click on this export home. And it has downloaded. Lets me click on it. And here you go. This is our design. So now we can export our design. Now I want to export, I want to, I also wanted to export this sign-up base. I'm going to select the sign-off. Click on this Export, click on JPEG. And here we go. We have this sign-up pairs. This is how we can export. Now, select on this sign-in pairs and click on this export. Click on this JPG, and export a sign-in. If I click on the sign-in, then here we go. We have this sign in pairs. So you have learned how to export sign-up, sign-in, and home-base. So this is in this way, you can just export your each and every frame. These are also independent frame. So you can also, if you want, you can also export these small let me export one for you. Click on it and it has completed the download. This is our frame. All right, so these are the few things that I wanted to show you. So I hope you have liked it.