Design a Web Application

1. Trailer of the course: Hello, Welcome to the web design course with Figma. And this course we're going to learn how to design a sample web application where people can watch movies together. If you have chicken, a preview course, we will get out a mobile version of this as well. And so in this course we're gonna be working and then web application for his heart. And I, myself had been UI UX designer for over three years now and have been using Figma for many, many years. Today, I am your instructor for this course. So by the end of this course, you will have the skills opposite to design a website that is visually appealing and easy to navigate. Again, how to import and use a specific image and your workspace. We'll also be learning how to use auto-layout which we can create, which for designers way, we will use a powerful plugin to generate some sample data for our project. Again, we learn how we can add our components, smart animation and sample introduction between the screens. So if you are ready to learn how to design a beautiful and simple web application using Figma. Jump right in and let's get started. 2. Frame tool: Alright, so let's get going. I have Figma, open it up here is just an empty project. First step, I'm just going through the French will stop here. We can this and just click somewhere here in the screen. And this again and generate a foramen or that can be like a page for our website. So if they want to be foliage D, I can modify all the property from here on the right. Show when we choose 124, the witness, and 2000s and 84, the height. Nice. Just zoom out to customize my workspace. Ben, from here at the top of the frame, we can change the name of the screen. But at this example, I'm going to choose the lending page. Now with this color palette, they would choose a blue color. With this option, we can customize our color like this. I prefer this better to start designing my FirstPage. Good, we're ready now to start designing our landing page. And guys, see you in the next video. 3. Landing page: So now let's start building our page and resend the first page of any website. You shouldn't use the techniques and tricks and your design in order to extract the user to try and go into the details, but you will obtain. So in the first page of our website, we will use in the Emperor Franz of text size and the color. Also, the simplicity of the components using it has a very important role in the user experience. We start first to add text in the center of the screen. So in the same way, Hey kid and chose text here in the right section, I'm going to change the text size to 64 and the return here and the screen to write a short sentence, e.g. banner, right? Watching is better. What changes better together? Yeah, good. Movie, Cheers like this. Then make a copy for this tax. And I'm gonna, I'm gonna write something else here. There is. Just before to complete, I will change the text size for this tool, 56 and continue. Or find new weight room during your favorite choice. With your favorite people. Yeah, it's a good movie just below the first-year. Mean. Then select the oil in, group them together like this. These are the toe for this. And again, I'm going to change the file type on the second text bias here. That's it. For the first, I will choose a robot. Also, we can grow the size for this tool, the tool and customize it or change his varies a bit like this. We must always keep the same alignment of two texts. Now, I'm going to add an image here in the left. So for now I have ADD one inmate B, C, which we will use it for our example. And I will add it later as a punishment in the description of the project. Or question, why is her say is like this? We move it just the center of the screen. Also we add the letter more towards the left. So it's good. No, Yeah, nice. Alright, the next step, we will add the navigation button between the screen. So let's work with the next video. 4. Buttons: In this video, we're going to add a button here just below the text. So to make button in Figma, I advise using a sample rectangle and then customizing Bezier that the rho here is more rectangular like this. And move it with the same. And then there's the other crumple zone in and they're surfing. And now I'm going to choose a kind of tool to be, to be irregular and with the other colors of the screen is a good step-by-step. We are preparing our button. We're missing again the text. We can write the joint know. They'll give the user option to join a film from the, from the homepage. So after changing the text size to 24, moves it texts to the sensitive of the rectangle. Now I'm going to change the border radius to ten. Yeah, it's good. Grip the rectangle and the text with the Option Group Selection. So the two components are group adhere in the same component, which will be the name button. Now we can move and presto magic together as one, as well. As your mouth to choose the right and the good place from the PDF for the button. Alright, here just below this text, it's the best days. Yeah. If you have any other suggestions, write a comment in the review section of the course and thank you, that's it. So in the next video, we will add here at the top of the screen and navigation, but switch between this green. Also, we will add the logo for our outset. So let's go. 5. Navigation bar: Here we're going to add two links to make a navigation bar. So copy this text from the button triggers eat like the first length. Forget to join the page. You must change the text to 32. 32, or to be more readable for the user and delete this before and after moving each year for an arrow. Here in this place. Make a copy. Now for the second link, which we will rename this covert. In this page, the user can discover the different films and movies that the term live. And others that program with the, with the edge of participating and what changed with his friends. And here we can use the super cool to go in there landing page. We have the layout to Bree here, so I'll click Plus. It's gonna germinate this, agree? Now it's super crazy complex and doesn't make any sense. Show I'm going to click in this one and go to the column. And we can choose the just then here. That's going to give us, then we can use the lion things. Alright. Now, I can align the links of the navigation bar lake waves. Move this link to the beginning of the third variable and join in the second canon. Now, I can hide this cool trick and the screen name again and clicking. Now, let's start to prepare the logo of our upside. Firstly, they make a copy for this text and paste it here and change it by, by the name of the platform. So I think I will choose a sample name like watching, watching or watch part. Yeah, Which part is go to here? With this name? We will add an image like this, which I have in my PC. And they will add the later as an attachment. And the description of the pressure. I will say is it a bit smaller like this? And I'm going to move you try it next to the zoom in to a better choice, his base. And with their same way of Button example, I'm going to group this shoe component like this. Greek in groups and lecture and change the name vulnerable. They organize our project. Jump out here. And we will move it to this left part of this tree. Yeah, go in here. So now we've finished this page and see on the next video, design the second screen. 6. Join screen: Let's start with the second joint page. Zoom out and adjust our workspace. I'm going to move the lending page here and make a copy. Paste. Good, conserve the same demotion and color. Again to keep the navigation bar because it's repeated in the whole project. Screens. Zoom out and move the two screens here. We folks, in our screen. You're in. Now we'll change the name to regime page. Okay? Okay, good. Firstly, delete the components there just to keep the navigation bar. And then as we have seen in the project presentation here on the right, we'll, we'll add a small form that includes some maturity fields for users to accompany it with the person and data just before joining watching a movie with friends. Let's start for add your rectangle here. I will adjust it like this, just to be presented in the middle of the screen. Now I'm going to change this color to a darker blue, like lack of luck. And adjust the transparency to 50. Yeah. Yes, Good. Alright. Now we're going to add the border radius, show that they form. It's surrounded and will be more of a Red Bull. We continue now to add the first text field with the sample rectangle. The same way of the butter chips. We'll fix it here. Then changed his collar net with this. With this parameter. I can customize the color and the boulder like I will fix it to three. Now I can change the color. I will choose the color of this button here in the first screen so that their screens come out consist. Again. I'm going to continue to change the color of the rectangle using the speaker just to detect the color. And for the fields, again, is better to adjust the border radius to, HA, Yeah, it's perfect. Now I'm going to make a copy from the Discover link ij here above, above the phage. But as you see now, it takes deliberated out because it's hidden by the rectangular. You should use the option branch of Frank for text to be posted with the front of the main compound. Good. Now we move each here and change this one to two ball. Will continue changing the text to rename. The first fear, the diffusion must be completed just a little below. But fusion force, the rectangle, add the letter both so that there's base can take the other feeds. I can fix this usually to 1060. Yeah. Alright, good. Now we continue with this. Now I'm going to copy this two components to cabinet the rest of the feet. Good. Now we germinate the last one and we're movies here will change for these two main. I'm going to add a button just below. So here we will add the button or you will simply copy this button and paste each here. Okay? We add the border-radius, like the other components. Change the font size to 28. And this one tool to bode. Well move the texts and the center leg like this will make the last changes from tasteful. And we'll go see at something and the left side of the screen. Okay, very good. So here we will add the same thing, like text, copy this, and paste it here. Just to conserve the same parameter of the texts in the old project. We can write watch, watch when France is in some sense, you should know grow it to be more red ball and take the layers here on the left. Also, I can grow the size just just for the friends to be attracted to the ears. Yeah. 90 is good. Movie later at the top and the center of the screen like Like this. Yeah, Exactly. We'll change the color of France to another warm to be more attractive because the cost of our platform is budget on friends and how to participate and have a fun with your friends with this technique is widely used in many platform and many, many application gesture track user to a specific thing like this example. Okay, let's continue now to add a photo of the end of the page here typically contain a copyright notes link privacy policy which contact information and social need the icon, Insert a Photo contain information that you improve the outside override future. So I'm going to use this rectangle tool from here and draw a rectangle over the phone width of the page with the reducer. Then I'm just going to check that answer right place. Now we will change the color of the fault. So we're going to add two links in the, in the left for the About Us and the contact page. And also through other indirect, we start with the left viral section. So in the same way, copied discover texts from the navigation bar and paste and paste each year. The same probe is probably or click the link and choose this option branch or front. Okay? Uh, good for now. Let's change the font type and size to 24. Will change now the text for this first name to talk about those and make another copy for contact their names. Alright, good for this part of the continuing now to the right part of the folder, where we will add the social media links to paste here. So base tier the syntax and another length next to each other. Change this one pool Facebook, and this one through Twitter. So we'll use the layout grid option to properly align the photo links. Select the front and activity from the speaker. I run a line, this link at the end of the second color, and this one to the beginning. So with the same method, I can align the other legs. You can also grow the number of Kelvin to for more details. So it's good for this one. Now I'm going to disable the option for green and there's two links, icon from the econ. If I plug in Azure, ML, variety, and choice, you can fly to support this. I can write in this field, Facebook. Okay, I can share this one. After clicking. Important here. Would they say Canadian imported in my workspace? Go back up. Now Fu, look the Twitter icon. Twitter, which serves the spine. Again, click. Alright. Now we're going to of course tomorrow, the size of this tool icon to become a similar size for full-text. And we'll mortgage here. But then another sink. You must change the color to white to be more consistent with the dx. Okay, Good For this one. Continue with the second bacon, I think 20, it's a good size for this check. Zoom in and move this one to the left of the text. Then through other next, we will put the link. Very good. This screen is ready now and Jamal to C out enter the workspace. All right, guys. Now we've finished this page and see you in the next video to design the Discover screen. 7. Discover screen: Hello friends. So let's start making the discoveries screen. Firstly, I'm going to move the second component here and make a copy for this to conserve the same template of previous. Zoom in. And we changed the name to discover Bache. After I'm gonna delete old components from the page. Now could be from the links of the navigation bar. This one. To conserve the same style in onscreen of the application. So it's very important in your designs to use the same font for the sentence and the words. Let's continue to write a sample sense to direct the user to join and watch a few. Right? Bros. Bros movie and TV shows from here. No, no, no. Just browse movie and TV show. Here shows the text size to 48. And the front Type tool. Again, I were to increase the size to 56 and remove each here a little at the top. Here we're going to add three oxygen for the users to can choose the top favorite movies or display the list of feelings. Let's start to add a rectangle here in the center. I move it the little button like this. And now we'll change the color to black from here. Okay, good. But what I can change it again like this and take the transparency to 80. Now it's very good. So we'll make a copy and paste here. Again, another rectangle next to the other. Now I can move the components in Israel at the top like this. When we can start to prepare their battalions of this rectangle. Copy again from the navigation bar and paste here. So for this oxygen, I'm gonna write the top, like the top or the most popular movies. Watch it in the platform. Agenda, the size to 24 to 28. Yes, is good now, so a movie here. But you should activate or click the option Brand24 on and continue to choose the best. Just like me, It's okay. Let's make a copy for the secondary rectangular. And we'll change it Georgina, when the user can choose the general of movie that their words to watch. Again for the last option, mode. Yes, More. Give the user to see more movies or finish. Right? Now I'm going to add three icons for the district. I'm going from the fight plugin. For the first one I can write the dope like the legs are link. To, change the expression to like, best or favorite, to display more icon. The next page I'm going to choose this one. Scroll down, and then pour the icon of get to the next bar. Now I can draw the general option. Yeah, Schwann, Baker. And for the more oxygen I can search in a row with with next. Or what about? Yeah. Okay. The next page. Here, we're going to import this. I can. Okay. Now we didn't say they icon and move them into a rectangle. So guys know we're going to change the color of the icon's to y, should be consistent with the rest of the other components. Okay. Good. We terminate with the February biker. And now I'm going to show the best days for the for the icon here and there was barometer we fixture AT. And the same for the second pyramid. Will move each here in the center of the first rectangle. Okay, it's good. Now, continue with the second. Well, we were told the same configuration and we finished with the last. I can fix the same perimeter journey to 180 degree like this. Finally, I move each here in the center like the other icons that I'm going to write another sentence here are the other button to life to motivate or encourage the user to join their friends. So copy from the first and bases here. Now I'm going to write almost like watching side-by-side in the real life? Yes. Would this work? Let's change the font size to 24. Prefers the best year, and the font type to regular. Alright, so it's perfect with this circumnavigation. Now I'm gonna customer the components to be more readable and attractive to draw the user's. Let's start with this rectangle now, which we will contain the posters of movies here in the left side. And we change the demotion to 550 by faith Handel's sketchy. Now I can move it here. Yes, here we'll just, I'm going to regroup the components of the screen like this to purple reorganize my component. 8. Powerful plugins: Hello guys. Here in this rectangle will add the four image from a powerfully, which we'll find out in this video where we can or present the movies that are showing now with, with their posture. Alright, so we click with the right mouse button and choose plugins. Next, click on the Unsplash plugin. For me, the plugin in sample. But if it's not imported into your workspace, you can click in, find what vegan and simply imported. This plugin contain a lot of high-quality image. I recommend using it. We're looking for any type of image. Personally, I use it a lot in my project. Here we will search term board for feeling forces. And then for our page right here, move it in the search bar and scroller to discover the list of folders. So I can trim this one like the first poster for my feeling. Here, you shouldn't wait for this indicator tool companies in from the end of the EMH. Okay, good. It says successfully imported. Let's continue searching for another poster. This one or this one. Now, learner, I'm going to import this one. Okay? Alright, continuing this covalent more image for this one is good now, yeah, I'm going to import it. Okay. Scroll down more two. The last one. We'll go back here at the top portrayals. One of this image. Yeah, this one, krypton core. Right? The image are successfully imported it into my workspace. Now we're going to assess them to the same side as is the case. This we finished with this. Okay. Now we're going to move them into our box. Okay, we're good guys. Now we are done with this page and two in the next video to add a prototype and smart animation. 9. Prototype & Animations: In this video, we will add introduction or navigation links between the screen and again, animation for some components because I'm in here and the first screen landing page and the switch strip mall. Okay, let's start with the button here. Click on the circle and link it with the joint page. Okay? This is a window of interaction detail. From here we will customize or interaction between the page and we can show the type of navigation or in motion. Also the duration when you're switching from one screen to another. For this interaction, I'm going to fix this one. So I'll click or click oxygen and navigate joint phage. And here we can choose from this list, the animation type. But for, but for me now I'm going to show the instant animation. Let's continue to add the links into the navigation bar with the other screens. Join with this page like the introduction of button. Again, I'm going to show you the same parameterize the progress link and now the Discover link. Okay, Good. The link is successfully added with the same interaction we think. Now we're terminate the rest of the interaction between orange greens with the same method. So for the logo image we choose, when we click the logo, we'll return to the homepage like this. Very good. Now we're going to try the introduction by clicking here. Firstly, I'm going to use the button, arrive the length and width trade with the rest of navigation back here in the workspace. Okay, now I'm going to add the animation to this image of the landing page. But first of all, when we will add animation for any components, you should copy the urgent screen in order to make that innovation change in the second screen and give the initial situation than the original is Gideon as they do not. Move the second link just below the first one like this, then return to design mode. So now we zoom in here and change the name to lending page animation one. Select the image of changing our intuition with this parameter, takes it to zero. Okay? The zoom out to the interaction between these two screens with despite armature. Again switch to prototype mode, delete per length from the second page, like this. Then let's add the interaction from the image on the first screen. The second screen. Here in the window of interaction details. I'm gonna choose whatever option and fall with the animation I will Navy when the default settings. Good. Let's try no, the first animation. Very well. So I faced the mouse over the image is turned with irritation that we set in the settings. Go back to add the second animation. Now, the second animation concerning the button, when the user over the mouse, over the button, the current become a bit darker. So first of all, I'm going to add another copy for the international screen switch to design mode and bases here, but no animation one. Here. Again changed the name to lending page animation tool and return through table. So I'm gonna delete all links from the screen and adjust the button interaction with their joint venture after editing the color of the button in here, and change the color design mode and select the color palette. So just I'm going to pick or likeness to have it there. Good mole, the darker color. Okay, Alright, Jim Crow at the MU and direction. The first step, you should delete this navigation between the original screen and the giant pain. And the link between the button with the new screen. For this one I'm going to choose, we're lowering oxygen. For the animation. I'm going to assure the smart animation like this small demo. Also for the day. Change it through 200 milliseconds to make the animation faster. Okay, great. Now we're going to terminate with the link between the button and the giant page. For this setting, give the same parent. Just fix the animation joints. Very good. Now we can try this new animation. So as you observe here, when the most touch the button, the color versions like that. And then click, we navigate to the next screen. So back now to our workspace to add other admission for their discovered page. Again, like the same animation you should copy second page from the original. Change the name to the scroll the page, and make sure for this animation, it's about fair impartial. When the user-based mouse over one or the parser, the component change the heading, the other forces, and just focusing in the Select movie poster to display more details. So the first step is draw a rectangle to choose a darker fetal. When, when the posters is selected. Zoom in here to fix the width and the height of the rectangle. Alright. Now we're going to change the color to black and customize the transparency to 50. We'll move it to the side for now and delete this poster. I will use this as the first poster. Detail will be displayed here in the center like this. We can fix it plays with this tool parameter. For each 1,230, 550 by the same five vendors, hefty. After I can add the filter on the poster like this is a different world, correct? Now I'm going to add the title of the film with the same form for the Discover link copy and paste chair. But you shouldn't use the brand to Front option to have a default. Okay, good. Change it to feel entitled. Shares now the text size 64 and also the foreign to type to move it to the center of the rectangle. Then the top here. Now we're going to add a button in the center to give the user the option to start watching the feed. So I'm going to copy from the screen the button and paste it here. Okay. Now I'm going to move it exactly in the center. Change this weren't cool. Watch. And the form to warn over to assume it won't remove this border radius from here. Watch must be also be digested Toby fully visible and put in the center of the satellite dish. As you can also add injector below that gives a number of visitor. When watch the film started, the janitor foreign says to 22, the font type to irregular. And change again the text size to 24 to be more readable and change the text. E.g. sixth, through watching, watching the marrow. Well, we cheer to the right. The text is very small. To be clear, I will name crazy again. Okay, Very good. We're finished with the last modification on the title and butter. So guys here, we're going to add the interaction with the screen. Switch to prototype mode, showed the same poster and link it with a new screen like this. So here in the interaction detail, I'm gonna change this one to whatever in mode. For this as good, keep with the same configuration. Again for the animation. Finished with the link between the watch, but then earned a giant page. Because otherwise the user before starting to wash the feet and must be completed the registration for variable, we're finishing now with this animation is your mouth. You see our enter the workspace and click here to try and navigate in our application. As you see here, when you over the most and the Forster of the components change to the animation page. And the button works directly, redirecting the user to the giant page. For the other posters, you can complete them as a practice exercise. Our website is working correctly. Go back to our workspace to see them. Again. You can add other screen in order to improve and make a new option to the platform. So thank you very much guys for watching. Here we have finished this course and I wish you are learning new things with me. Finally a goodbye, and I will see you in the next course.