 What's up guys, in this video you're going to learn the fastest way to learn how to design websites and apps in Figma and keep on improving. Let's go. Today, we're going to get you up and running in Figma. We're going to design a website and an app in less than 20 minutes and it's really easy. We're going to go over every single step in the process. Figma is an amazing free design tool for designing websites and apps. Most of the world's biggest companies are using it and a lot of the top UXUI designers that I know also are switching to it. It's available for free over at Figma.com on both Mac and PC as a web browser and as a desktop app. But this is where we're going to 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. I think this is the best way to start learning about how websites are designed because you can start with something that someone's already made, see all the tips and tricks that they use and change it and start from there. 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 going to be working with. Now we can start to change things. The first thing we're going to do is create your own logo. Move your case 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 going to 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 want to use. I'm choosing this pad because I think it's cool. Then when you select it, you want to 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 going to grab our SVG file and drag it over into our Figma file. As you can see, it's too large. I'm going to click on the corner, the little white square. Then I'm going to 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 going to position it exactly where I want. Now that our logo is in place, we're going to change the color. But for our website, we need the 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 going to choose this one over here with the pad and the blue tones. I think this is really nice. Now I'm going to take a screenshot of it and drag it over into my design file and put it just above the dashboard. Now we're going to 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 into where you select colors and it will update it. We're also going to 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 after the swatches this time just for a bit of contrast. The next thing we're going to 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 going to ungroup by right clicking and clicking ungroup. 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 going to reselect everything and you can right click and click group or shift command G and that will group it again and then position it properly. The next thing I'm going to do is change the colors so I'm going to hit the illustration then on the right hand side in the color select I'm going to 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 going to keep up in the color theme for this. The next thing we're going to change is the hero component that's the main container at the top of the page with the illustration I'm going to select the illustration I'm going to delete it. Then I'm going to head back over to undraw and choose another suitable illustration download the SVG and then drag it across resize it and I'm going to change the colors as well. I'm also going to change the background color of this component so I'm going to select the green going over to color select the square then I'm going to use the eyedropper again to select for my color theme at the top. I'm also going to do the same thing for the button I'm going to select the background of the button and choose a color with my color picker and I'm going to choose a different one of the blues maybe a dark blue this time. Now we're going to 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 want to 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've 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 going to 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 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 want to paste it in and command V or control V on a PC this will paste your image into the box. Now if you want to change the corners on the box at the moment they're rounded and I feel like for this design I want to 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 to the amount of roundedness on the corner. So I'm going to 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 going to double click the text and go in and change it to make it make more sense to the website I'm creating. For the next section I'm going to 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 going to choose a color for my color palette. Then I'm going to repeat this across all the images and change the names to realistic gamer profile names. In the bottom section of this page I'm going to paste in some icons that I found from icon finder I'm going to resize them and put them in the boxes then I'm also going to choose the background color make it a blue and here's a tip if you want to 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 going to select the whole right sidebar and hit delete. Then I'm going to select the rest of the content and move it across into the middle and position it perfectly. Then I finish this page. The next thing we're going to do is make a duplicate page so select the page name at the top and hit command D just to make it duplicate page. Now we're going to 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 want to make categories look active so we need to change the colors to make sense on this one we're going to change it to white and on the home we're going to choose it to gray. Now go back to the home screen and select categories and the icon and group 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 going to 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 the hit preview mode you should be able to move back and forth between the two screens. Now we need some content we're going to 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 going to do is get our prototype ready. Head on over to prototype in the top right and when 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 and then you can share that link with anyone or open it in a browser. Well done, you've made your first prototype in Figma.