 We're gonna design a website in less than 20 minutes and it's really easy. We're gonna go over every single step in the process. This is where we're gonna start. It's a template that's been made in Figma communities. It's available for free to download and you can change it however you want. Once you've logged into Figma, in the top left hand corner, hit explore community. Then type in dashboard free UI kit. The top left result is called dashboard UI kit by Bruto, double click this. I'll also leave the link in the description in case you can't find it. On the profile page for the UI kit, hit duplicate in the top right hand corner. This will then create a copy of this in your own files. If you hit the name at the top, you can then type in whatever you want once you double click and then this is your own version with your own name. On the left hand side, go down to dashboard free and this is the dashboard that we're gonna be working with. Now we can start to change things. The first thing we're gonna do is create your own logo. Move your cursor over to the book icon in the top left hand corner, click and hit delete. Then open new browser tab and go to iconfinder.com. This is an amazing website where we can find lots of royalty free icons that you can use in whatever project you want. For this tutorial, we're gonna search game. On the left hand side, select free. Then underneath it, select no back link. That means we can use it straight away in our project and not have to worry about anything. Then select the icon that you wanna use. I'm choosing this part because I think it's cool. Then when you select it, you wanna choose SVG. SVG is a vector type of graphic, which means that it looks great at whatever size and we can change elements within it, within our design file. Now we're gonna grab our SVG file and drag it over into our Figma file. As you can see, it's too large. I'm gonna click on the corner, the little white square. Then I'm gonna shift drag to make it smaller. By holding shift, you constrain the proportions of it so it doesn't go out of shape and then I'm gonna position it exactly where I want. Now that our logo's in place, we're gonna change the color. But for our website, we need a color scheme. Head on over to color.adobe.com. This is an amazing website where you can find different color schemes for websites, which is a palette of five different colors and by keeping it within this palette, the whole website is honed and looks great. Head on up to explore and then type in game. Then choose whatever color scheme you like. For this example, I'm gonna choose this one over here with the pad and the blue tones. I think this is really nice. Now I'm gonna take a screenshot of it and drag it over into my design file and put it just above the dashboard. Now we're gonna change the color of the logo. So select the pad icon and then on the right hand side, go down to where it says selection colors and click on the colored square. Then click the eyedropper tool and go up to where you've pasted in your color theme and select the color. This will then sample the color and actually change the color of the icon. You'll also see a code in each colored square. This is called a hex code. You can also type this code in to where you select colors and it will update it. We're also gonna do the same for the page select on the left hand side. So select the square behind home, then sample a color again from the color chart and do the same for the icon, but maybe choose a different color out of the swatches this time just for a bit of contrast. The next thing we're gonna do is add some illustrations in. So select the illustration at the bottom of the page and hit delete. Then head on over to undraw.co. This is an unbelievable website where all the illustrations are open source and free and you can use them in whatever projects you want. So hit browse and then hit search. Then type in game and you can choose whatever illustration you want, but I like this one called Ninja. So hit the illustration and then download the SVG. Then bring the SVG across into your project and resize. This SVG is a little tricky. So I'm gonna ungroup by right clicking and clicking on group. Then you can select the bits that you don't want. So I don't want this gray background, then hit delete. Then I'm gonna reselect everything and you can right click and kick group or shift command G and that will group it again and then position it properly. The next thing I'm gonna do is change the colors. So I'm gonna hit the illustration, then on the right hand side in the color select, I'm gonna select see all colors. Then I can see all the colors used in the illustration and I can select the square that I don't want and then I can use the selector again to choose the color I want. I'm gonna keep them in the color theme for this. The next thing we're gonna change is the hero component. That's the main container at the top of the page with the illustration. I'm gonna select the illustration, I'm gonna delete it. Then I'm gonna head back over to undraw and choose another suitable illustration. Download the SVG and then drag it across, resize it and I'm gonna change the colors as well. I'm also gonna change the background color of this component. So I'm gonna select the green, go on over to color, select the square. Then I'm gonna use the eyedropper again to select for my color theme at the top. I'm also gonna do the same thing for the button. I'm gonna select the background of the button and choose a color with my color picker. Then I'm gonna choose a different one of the blues, maybe a dark blue this time. Now we're gonna make a cool animation for the button. So select the text and the background of the button and either copy and paste of your artboard or alt drag up. This will make a copy of it. Then you wanna right click and select frame selection. Now change the background color of the button. This will be our hover state. Now go back to the original button and go to prototype mode in the top right. One thing I forgot to mention, make sure the text and the background of your button are a group. Then select the little circle on the button and drag it over to the frame that you just created. Then in the top right, change the mode to while hovering. Make sure to click open overlay. This will make sure it appears above your current button and then change it to manual position. Now if you go to preview mode, you can see as you hover over the button, it pulls in the other layer on top of it, making a really cool animation. The next thing we're gonna do is pull in some images for the popular section. Now head on over to unsplash.com. This is another website that I use all the time. All of the images are royalty free and you can use them for free on your project. For this example I've typed in game, choose the image that you want, then right click and copy it. Then go back to your file, double click on the box you wanna paste it in and command V or control V on a PC. This will paste your image into the box. Now if you wanna change the corners on the box at the moment they're rounded and I feel like for this design I wanna go for more of a square feel. Select the box and in the top right hand corner, choose the bottom right number. That number references the amount of roundedness on the corner. So I'm gonna select it to zero. That will make the corners perfectly square. Now in your design go through and do this on every single box. Finally in this section I'm gonna double click the text and go in and change it to make it make more sense to the websites I'm creating. For the next section I'm gonna design this as featured gamers. So I want some gamer profile images. Head on over to unsplash and choose an image that you want. Then copy and paste it into the file. Next I think this outside circle would make more sense as a blue. So again I'm gonna choose a color for my color palette. Then I'm gonna repeat this across all the images and change the names to realistic gamer profile names. In the bottom section of this page I'm gonna paste in some icons that I found for my confiner. I'm gonna resize them and put them in the boxes. Then I'm also gonna choose the background color, make it a blue and here's a tip. If you wanna make it a lighter shade of blue this is an opacity number here. If you change that to something like 50 or 20% it will make it a lighter color. Finally on this page I'm gonna select the whole right side bar and hit delete. Then I'm gonna select the rest of the content and move it across into the middle and position it perfectly. Then I've finished this page. Now we're gonna go on some prototyping. The next thing we're gonna do is make a duplicate page. So select the page name at the top and hit command D. Just wanna make a duplicate page. Now we're gonna link between the pages. So on the right hand side, select the background to the first button and the white circle. Now drag it down to the second one. We wanna make categories look active. So we need to change the colors to make sense. On this one we're gonna change it to white and on the home we're gonna choose it to gray. Now go back to the home screen and select categories in the icon and grouped them together. Then hit prototype and drag the white circle again across to the next screen. By default the action will be said to navigate to. That means we're gonna move across to the next screen. Now repeat the same thing for the home icon and the home text. Group it, move it across back to the other screen and prototype mode. Now if you hit preview mode, you should be able to move back and forth between the two screens. Now we need some content. We're gonna create some categories. Head on over to dashboard two on the left hand side. Then select these top four colored squares. Copy them, go back to dashboard three and paste them into place on your design. You can also go ahead and delete the illustrations and maybe go back to undraw and copy and paste some ones that make sense. This will be the content for this page. The final thing we're gonna do is get our prototype ready. Head on over to prototype in the top right and where it says background color, change it to white. Then switch to preview mode and hit share prototype. In this box you can then copy a link. Now that you know how to make a website in Figma, it's time for you to get serious and start developing stuff for your portfolio. This is where my free course comes in. So if you check out antony-comboy.teachable.com The link's in the description and there's a pinned comment. It's totally free and you can spend the next five days with me developing your portfolio. We'll start off, we'll learn everything about the UX design process. We'll do six hands on tasks where we go through creating user personas with your low fidelity prototypes, high fidelity prototypes. Make sure your prototype's accessible. We use a tester. If you wanna be a professional UX designer, this is the best place to start. In this step-by-step guide, I walk you through everything going from a beginner to where you need to be to be a professional. This is a preview of what's in the course. Welcome to UX Design Essentials. Master the fundamentals and launch your career. Are you ready to take your design skills to the next level and join one of the most in-demand fields today? This course is designed specifically for individuals looking to break into the field of UX design and build a successful career. Throughout this course, you'll learn the foundational concepts and techniques of UX design, including user research, information architecture, interaction design, UI design, and accessibility. You'll also learn about the latest tools used in the industry and how to stay current with industry trends and best practices. This hands-on approach will allow you to apply your knowledge through real-world exercises and projects, such as creating a user persona, a user journey map, user flow diagram, wireframes, visual designs, and the final prototype. We'll be conducting user research and testing along the way. You'll work on a real-life example of creating a mobile app for finding a local farmer's market, providing you with a comprehensive understanding of the UX design process from start to finish. This course is the perfect opportunity for you to take your design skills to the next level and build a successful career in UX design. With our comprehensive and hands-on approach, you'll learn the foundational concepts and techniques of UX design and be able to stay current with industry trends and best practices. Don't miss out on this chance to be part of one of the best UX design courses in the world and start your journey to becoming a skilled and successful UX designer today. And roll now and let's begin. Now that you've had a taste of what to expect in the UX design essentials course, I can't wait for you to dive deeper into UX design. In the following video, you'll learn about the history and evolution of UX design and why it's essential for creating products that meet choosers' needs and goals. This video is the foundation of our course. Take advantage of the chance to be part of one of the best UX design courses in the world and start your journey to becoming a professional UX designer. Let's go.