Figma Crash Course for 2022 (Best Practices & Techniques!!)

i want you to take a moment have a look at this design and have a think about what are the five key things that i've done incorrectly in this design that's been completed in figma have a think about it and feel free to pause this video as well alright so hopefully you've got some ideas now with figma it's such a great tool that anyone can come in and design beautiful designs like this however the process and how you get to this point can either take 30 minutes an hour or even up to 5 hours but in this crash course i'm gonna teach you how to achieve all this in like 30 minutes the shortest route possible but also doing a lot of the hard work automatically so let's dive right in and start learning how to master big mom together baby damn that was pretty cool well i'm not really even a video editor but i thought that was pretty cool i'm pretty proud of myself so uh yeah all right so take a look at this design we have five key things that were done incorrectly so if i simply show you the uh the header area you can see that a lot of the items inside the header that should be vertically aligned centered with the button aren't simply done and this can all be done automatically inside figma so if i want to center all these items as you can see here i'd have to manually go in and create that proper spacing and that center alignment which wastes a lot of time second thing is that you can see that there's 20 23 pixels between about and contact and then 29 pixels between leader board and about all this spacing issue can be automated inside figma so you should not be manually creating spacing in between each items it's just a waste of time the third thing is that you can see this button design if i want to increase the space or rename this to for example sign up you can see that the button doesn't automatically wrap around the text once again waste of time we can do this automatically now another thing that you might not have noticed is that these two buttons are technically the exact same button they're both white with a white border around it so instead of having to manually if i want to change the buttons to maybe a 30 feel so to bring out the white then this one should automatically update as well once again waste of time we can do this all automatically now two more things that i've done incorrectly is that creating these layouts sometimes you just might have to decide to move some text below the buttons or you want to move the buttons up above and now as you can see i would have to manually create all these layouts that just are a waste of time all this can be done automatically inside figma last but not least the most important one if i wanted to resize this design for for example a tablet view this is not responsive and this is not automatic but once again you can automate all this inside figma so what are we are going to create in this crash course is that we are going to go ahead and recreate this entire design but first we are going to make sure that everything is automated so if you want to vertically align all the text and logo to the top we can simply click on this little toggle over here this beautiful auto layout feature that we love to call it and that will achieve it if we wanted to adjust the spacing between all the text we can do so by just simply adjusting these numbers and it will all be systematic and it's always going to be automatic for you saving you so much time if we ever wanted to change the words inside a button we can we can do so and it will automatically adjust for you if we ever wanted to move content around on a page we can do so automatically for you if we ever decided to change the color of a button or a component that is reused throughout your designs and for example changing 10 to 50 it will automatically be done for you and then if we also finally wanted to grab this design and resize it for tablet once again i think you already know what i'm about to say here we go i'm kidding guys it's going to be automatic so in this crash course we are going to build this landing page from scratch with all the best practices and utilizing figma to its best potential so you are going to go from beginner to practically intermediate or advanced probably 30 40 minutes so oh and by the way if you want to expedite the process and really deepen your understanding ui design and figma make sure to check out my figma master class course we cover everything from design systems responsive design ui design component management file management literally everything all the way through to advanced prototyping as well we've had over 3000 students take on this course and a bunch of them have publicly shared their positive experience with this course as well and by the way i just received an email a couple of hours ago prior to recording this video where a student personally reached out to thank me how much he's learnt in this course so if you are interested there is a link in the description you can also get 10 off limited time only without further ado let's get back into the video let's dive right in guys and if you want to download this file to follow along link is in the description so if you like that gently smash that like button guys so once you are in the file guys we're going to go ahead and hit f on our keyboard or you can create a new file from scratch you don't have to download this one and once you hit f you'll notice that on the right hand side in the design panel we we have access to all the different size frames so these are presets that figma will provide us so we're going to design a desktop like home page feel free to select any of these um because really as you saw it's our design is going to be responsive so you can always adjust the width and you can accommodate for a macbook pro 16 14 desktop or even imac so i'm going to go ahead and just select macbook pro 14 inches and i'm going to drag this down now in the file i've also provided a color palette as well so i'm just going to bring this over and if you've downloaded the file you can also access this as well if you're following along without the file feel free to create your own color palette just for fun to explore new things now the first thing i'm going to do is since i've already got some color styles set instead of having to manually set these colors for buttons and for backgrounds i'm going to go ahead and create something called a global style so by selecting any of these circles you can see that under the fill in the design panel over here that a color has already been set now i'm going to go ahead and click on these four dots click the plus icon and this will allow me to turn this into a reusable color style throughout the whole of my figma project so this is really the darkest gray that we're going to be using in this design so i will call this gray 900 now you might be thinking why 900 why with the forward slash these are just naming conventions so if i click on this style you can see that this is telling figma that under the category of gray it's going to be 900 so it's going to be the darkest gray in my color sort of palette now over here i'm going to select the second one i can click on the plus as well again and just type in 800 for this one and then this one might be 500 i'm just eyeballing it so obviously this is a sample project so i don't need to get it perfect so we've got nine eight nine hundred eight hundred five hundred then i'm going to grab this a fourth one and this one might be gray fifty so that might be the lightest one as you can see obviously if you're working on a full scale project you'll have 900 to 50 with increments of 100 so 900 800 700 600 and so on then i've also got my primary color over here i'm going to turn this into a global style as well and i'm going to call this primary forward slash 500. so this is the mid purple of all the primary uh shades and hues right and that's that's already done so i've already got my my global styles of colors and i'm gonna select the frame and i'm gonna go to fill and then i'm gonna put down the 900 as you can see automatically without having to remember what the hex color was that gibberish of like four hz one zed i just simply select what i want to use from my global styles now the second thing i want to do now is actually go ahead and create this header now as you can see i am using two fonts here in this uh design work sans as you can see for just the copy the body copy work sands and then i'm using clash display you can find these free fonts online and google i'll also leave links in the description if you want to download these fonts but for this design i wanted to make it feel a little bit more techy a little bit more edgy more modern so i want to go with a font that had a few more curvatures on the design uh in the design and just something a little bit more different a little bit more flavor in in the font so in the typeface so once again i'm going to hit t on my keyboard put some text down and i might just say the designer ship because that's the logo for this design and i might just give it some fancy look over here now obviously we're not going to go into the details of how we're going to be designing every little detail because the key thing is to teach you how to utilize figma and its key features so with that in mind i put the logo down and i'm sort of like starting to flesh out our page the second thing i actually want to do before i start designing the header is to give this a grid layout so without having to eyeball where i should end some text or how i should align things we should utilize a grid layout to just give us some guidelines to work with so i'm going to select the actual artboard i'm going to head over to layout grid and i'm going to hit the plus icon i'm going to click on the these nine dots change the grid to columns change the count from 5 to 12. i might change the red to white for those who might find it a bit difficult to see the red on the dark background then i'm going to change i'll leave it as stretch i'm going to add the margin of either 32 or 40 depending on what you want i'm going to go for 40 and then the gutter is going to be 20 pixels so we're going to have 40 pixels on the on the margins as you can see outside here and then 20 pixels in between each column as you can see in between each column so that creates a grid layout looking good and that is perfect now the second now the third thing i'm going to be doing is just adding in those links and adding in that button as well so the the links were leaderboard so obviously you hit t on your keyboard and just simply put some text down then we had about page and then we also had a contact page right and obviously we're going to be building this systematically right so right now it's really difficult for us to align these elements so i'm going to select all three and i'll hit shift a on my keyboard now shift a is a shortcut for auto layout and this is a feature that there's a little bit of complexity to it but all you need to know is that this will automatically align all your content or anything that sits inside this auto out component now i'm going to change the spacing to around 24 and you can see that's automatically done and that's all i need to do now if i hit enter on my keyboard i can then access all the links inside so the shortcut enter or return on your keyboard will help you automatically nest down into any group of elements inside your sidebar so for example if i clicked on macbook pro 14 inch which is the actual frame if i go ahead and hit enter you can see that it will select everything uh inside the macbook pro uh nesting then if i hit it again it will select everything inside the next nested layers so it's a very quick shortcut that i like to use now what i'm going to do is i'm just going to simply select these links i'm going to change the size to 16. feel free once again to you don't have to follow along perfectly one to one you can go ahead and explore new things while we're following this tutorial i'm then going to align the text to the center and then the third thing i'm going to do is i'm going to go ahead and add that button so i'm going to hit t on my keyboard i'm going to click on my artboard and i'm going to type in login now we aren't going to be using our rectangles we are going to be using other layout to create that bounding box so i'm going to hit shift a on my keyboard and you can see that this will group this text inside an auto out component i'm going to change the border radius in the top right corner which is the rounding of the corners two four pixels and then i'm going to change the actual padding right under auto layout clicking on this uh this icon over here i'm gonna make it eight pixels at the top 16 pixels on the right hand side eight pixels on the bottom and 16 on the left hand side as you can see it starts to create some space in between then the last thing i'm going to do is i'm going to go ahead and click plus under the fill and then i'm going to give this a white background of 10 so you can see it gives that nice little opaque background and then i'm going to go ahead under the stroke hit the plus and give this a white stroke which is a white border of 1 pixels and i'm going to make this 20 so as you can see we now have a beautiful button that is going to be scalable so if i change this text it's going to automatically wrap it for us so that is the power of auto layout now what we need to do now is we've got all the components for the actual header right as you can see over here but if we ever decide to scale this we want to make sure that it sits beautifully inside the actual grid layout so what we're going to do is i'm going to go ahead and select all these components right we've got all the components inside our header and i'm going to go ahead and hit shift a so once again that creates an auto layout component so now i'm going to go ahead to my layers and hit and change the layer name to header and i'm going to simply zoom in and then i'm going to hit command on my keyboard and i'm just going to simply drag this out until it's around 80 pixels right it can be 72 it can be 80. actually i might just keep it at 72. there we go what i'm going to do next is under order layout i'm going to go click on this icon change from packed to space between so that's going to create automatic space between these components and then i'm going to change the alignment to center right so that's looking good i'm then going to move this header up to the top that's perfect and if i really wanted to i can actually hold down option and click and drag the sides until it hits the edge right and if we ever wanted to create that space so it sits inside the grid layout i can click on the icon again and i can add 40 pixels i believe it was 40 pixels right yep 40 pixels on the left 40 pixels on the right and as you can see it perfectly sits inside the grid layout now all right so once that's done if we go ahead and select the frame and then resize this actual design what do you think will happen to this header have a think about it what do you think will happen if i resize this so if i resize this nothing is going to happen why because what we need to tell figma is that if we select this header we want to make sure that the constraints are set to left and right once we set the constraints to left and right we are telling figma that we want this block of content to stick to the left hand side and the right hand side so if we then re scale it now it is going to be perfectly centered and perfectly responsive so i'm going to go ahead and turn off my grids by hitting control g and that will turn on your grid layout so control g will turn them off and on and the second thing i'm going to start to design is actually the content over here so as you can see we've got a nice logo we've got some text we've got more text and then we've got some buttons as well and we also want to keep it centered in this in the design so whenever we scale it it's going to stay in the center so what i'm going to be doing first is hitting f on my keyboard and i'm just going to hold down shift and draw a square now holding down shift will allow you to create uh any design any shape with by fixing the aspect ratio so it will always stay um even so we're going to create a rectangle a square that's 72 by 72 we're going to give it a chord of the corner radius of 4 pixels so round the corners by 4 pixels we're then also going to give it a fill of 10 white and then a stroke that's going to be white and it's going to be 10 as well right so that's going to be where the logo sits all right so once that's done i'm just going to pop into google and i'm just going to type in figma logo transparent i'm going to find a transparent logo of figma and i'm going to quickly find one and then copy that and then i'll simply paste it down into figma i'm gonna resize it there we go and i'm gonna find this a frame and i'm gonna pop it inside the frame so i'm gonna click on this image pop it inside this frame and you can see it's sitting inside now as you can see it's sitting inside the frame because it's being cut off and i can resize this to whatever size we want it might even make it just 32 and if i wanted to align it to the center i can click on these icons at the top align horizontal center align vertical center and it'll sit right there perfect so i'm going to go ahead and label this as the figma dash logo all right so i'm going to go ahead and just put typing type some text down so let's master figma together baby so what we're going to do is make sure it's whatever font you want i've got clash display semi-bold 72 and i might increase the line height to around 72 so it's 100 and we're going to bring this up now you might have noticed if we take a look at this design you can see that we've got some specific styling which is just a stroke what we if we want to do that we can we can just simply copy the second line of text select the first one hit command d which is duplicate the text bring it down double click to highlight all the text command v and that will paste that text back down we can remove the fill by heading over to the fill removing it by clicking on the minus icon and then hitting a plus on the stroke and then simply changing black to white and we've got that beautiful texture or color or style for the text now i might make it two pixels just to bring it out a little bit and i might just make the letter spacing zero percent so it just increases the space in between the text to zero so it's a little bit more legible so that's looking good now the third thing we need to do as this is just i put some text down so i'm going to hit t on my keyboard it's going to copy this text and then bring it bring it over so i can hit command v that brings it over and obviously this is just work sands regular 20 pixels with 28 pixel line height now it's time to create those buttons and i don't want to go ahead and recreate them from scratch so i'm actually going to re-utilize the sign up button that we've created i'm going to go ahead and rename this button to button and i'm going to go forward slash secondary because this is not the primary button the primary button is that nice purply pink so this one's gonna be called secondary and i'm gonna hit command c and i'm gonna copy it and paste it over onto the right hand side all right so i might just wrap this in a frame so you guys can see and give this a background of black so you can see so we have a button secondary right and then i'm going to hit command d to copy it bring a second version of it down here and i'm going to call this button primary as you can see now i want this to be the primary color right so we might just grab the pinky purple from here and we might just click on this uh fill click on the eyedropper icon grab that pinkily purpley local color and that's looking good and we might just remove this uh add a stroke to it but actually add not a darker color to it so i might just go 10 with the black border feel free to change it to whatever you want and now we have a primary button and a second secondary button simply highlight the two click on create component set that would create your one button with two variants now so you can see the structure is a little bit different and you can see that on the right hand side you can see that we have two variants right so we have variants we can change the property name to for example state or type so we can might say what type of button is it is it a primary or is it a secondary right so once you've created that we can now head over to our design we can select our macbook pro 14 inch frame hit shift i on your keyboard and we can type in button now i've got two buttons over here because i've created a previous button component for the previous example so i'm going to select the one that we just created and as you can see if i drag this down on the right hand side i can now change this to primary and i've got a primary button and then if i duplicate this drag this over i can change the primary to secondary and i'm already creating this style over here so start supporting and learn more so i can go ahead and go start supporting and then bring this over and then learn more looking good so obviously if we wanted to we can actually increase the size of the buttons and whatnot but just for this this example i'll keep it as is for now okay so we've got our all our content in him but remember if we want to now create that systematic automatic approach to responsiveness and also being able to actually move our content up and down without having to manually reposition them we need to utilize auto layout so i'm going to go ahead and select all these layers by holding down shift and clicking on the more so now you can see i've got the more selected i'm going to hit shift a so this will once again group everything inside an auto layout component so i might change this to content oh sorry hero content because it's in the hero area then on the right hand side i'm going to make sure that the vertical direction is top to bottom as as is then i'm going to change the spacing in between everything to around 20 pixels looking good and then i'm going to go click on this icon over here i'm going to make sure that everything is set to the center bang automatically set now you can see that we need to fix the spacing in between some of these items but right now because we've set the global space to be 20 in between all these items we need something custom in between these two so what i normally do is select the first layer hold down shift select the second text hit shift a create another auto layout component right and change this 20 to maybe a 12 or maybe even an eight as you can see like that then i need to align all the text to the center once again and that will create the header now the last thing we need to do is actually align these two buttons next to each other so we need to select the first button hold down shift select the second button hit shift a that will group this into an auto out component we might rename this to button dash group then we will change the order layout direction to left to right which is horizontal there we go with the spacing of 20 pixels in between so as you can see now if we decide to move any of the content up to the top down to the bottom you can just hold down shift up down up on the keyboard or down on the keyboard and you can start to navigate this text or whatever component you have in whatever direction inside the auto out component it's all automatic now what we need to do is now zoom out or i'm going to zoom out i'm just going to click on align horizontal in this design and remember with the constraints we want to make sure we are telling figma that we want this content to always stay fixed in the center by telling it to stay in the center right so not to the left because right now if we ever decide to expand it it will stay fixed to the left right it will stay consistent on the left hand side but what we actually wanted to do is select this change hug contents to left to center and now this will tell figma to always keep it in the center so we've got this beautiful responsive view then what we want to do is simply create this nice beautiful screenshot so we can go ahead and hit command shift 4 on a mac device and then just screenshot our figma and we can just simply place it hit copy i'm going to place it down into my design and just resize this by holding down option and shift to resize it from the center point and also maintain the same aspect ratio um because if you don't then you would you'll be resizing it like this and it'll be a bit of a free-for-all so just holding down option and shift bring that down i'm going to sort of like bring that down to the bottom also vertically center it um sorry horizontally center it by clicking on the top icon up here and then the last thing i want to do is actually position make sure that the positioning is in the center the constraint is in the center horizontally and then vertically i want it to be from the top as well so now if i go ahead and just resize this we can see that it is perfectly resizing that is beautiful now the last thing that we are going to do for this design is that we are going to create this beautiful mesh gradient now i'm going to go ahead and just zoom out and what we're going to do is i'm going to just duplicate this entire board and then i'm going to hit enter delete i'm going to delete everything inside because i want this to be the canvas for the mesh gradient now to create this beautiful mesh gradient there are many different ways i've made a tutorial about this before so i'm going to follow a very similar tutorial dan petty also shared his way of doing this process which i thought was an extremely well done way i'm going to be adopting dan petty's way of doing it so feel free to follow along and we'll create some beautiful mesh gradients in figma i'm going to hit p on my keyboard and i'm just going to randomly draw some weird blobby shapes right as you can see and this will create a vector shape that i can start to control so i can remove the stroke i can hit plus on the fill and this will create a nice shape and a night with a nice color so the first color i'm going to create is maybe just a yellow so i've got a yellow picked out already so whatever color you feel like is nice right feel free have creative freedom and then simply just move this blob around i'm gonna hit p on my keyboard again and then i'm just gonna create more shapes just random shapes whatever you feel like just whatever goes with the flow right i'm going to give this another color of purple so once again just choose whatever color you feel like hit p again and then i'm just going to create more blobs just random blobs on this page and i'm giving it another color and i might just give it this nice pink i might hit command and then bracket so i can push it down make sure that everything is sitting inside the frame as well so i might just pull push it down to the bottom and if you want to move it around you can right click and center back or bring to front and that will give you access to the layers really quickly and then i might duplicate this this uh pink one by hitting command d moving it to the top and i might just change the color to maybe a like a nice cn all right there we go so let's just see what this looks like so what i'm going to do is i'm going to select the the the artboard hit enter once just select all the shapes hit plus under effects and then i'm gonna change drop shadow to layer blur now i'm gonna click on the sun dial icon make this maybe 200 and you can see that this blurs all the shapes just like that so from here i might just move this around see what feels good so first thing i'm going to do is i'm going to select them all by holding down shift select all uh all the icons oh sorry all the blurbs blobs hit command g group them all together then i'm going to hit command d that would duplicate it and then i'm going to go ahead under layer under pass through change it to color burn as you can see this starts to create some nice weird effects and styles with the colors that are on top of one another so inside you can start moving these shapes around to create something a little bit more unique and also unexpected so i'm going to start moving these colors around see what we can create and obviously you you need to refine it and you obviously need to move things around to really see some of the creative stuff that you can create but if if you spend enough time moving colors around you can definitely create some really nice colors like this now we aren't finished just yet so let's just say let's just move this around a little bit more and see like what we can actually create without without design alright so i've got some colors i'm not too happy about it all but let's just keep moving forward now the next thing i want to do is i want to select this artboard i want to go to plugins and then i actually want you i want you to download a plugin called noise now if you haven't downloaded a plugin before head over to manage our browse plugins and community this will take you to the plugins store for figma and i want you to type in noise in the search bar now all you have to do is simply select install that will instantly install the plugin you just have to head back to your file go to plugins and then find noise and that will open up a new modal all you have to do is create an artboard with a 1512 width with a height of maybe 982 just whatever height that you have in your canvas make sure it's inverted and hit the check now this will bring a nice noise filter on top of your design so just move it into into the center and all you have to do is change the layer to i believe it was a soft light as you can see right there you can then reduce the uh image opacity to maybe like 20 percent and it just adds that nice little texture around it now now you also want to make sure you click the rectangle bring it into your design and you can see that it sits right there looking good now the colors are quite bright so i might just change the opacity of the groups of blobs to maybe 50 percent may change this one to fifty percent as well and just see what that looks like all right well obviously this could be a lot better but the point of this is just to show you guys how to create it now that we've actually created our background i'm gonna rename the frame to background i'm going to hit command c i'm going to head over to my design i'm going to click on the actual frame of where our design is right so where this design is and then what i'm going to do is uncollapse everything and then i'll hit command v drop that background down and then i'm going to drag and drop it into the bottom of where my design is so the last layer as you can see there now i'm going to hit center align bang as you can see once it hit center the line it brings it into the center of this entire art frame uh artboard and i'm going to align it vertically to the center and as you can see it sits right there so as you can see we have created a beautiful design in figma that is responsive it's efficient it's automatic as well so let's review what we've learned we have learnt how to create a responsive design right as you can see over here and inside this responsive design we have a grid system so if we hit control g we've utilized the grid layout to keep everything consistent inside our header we've also used order layout to systematically create spacing in between our components we've also used auto layout to be able to move items systematically in our design so we don't have to manually create it we've also learned how to use components so if we ever decide to use a button anywhere in our designs we only need to change it once as you can see and it will change it everywhere in our designs we've also learned how to use global color styles to be able to access colors for our design so we don't have to manually insert them every time we want to use it and the beautiful thing about everything that we've designed is that it is responsive so if we ever decided to make a tablet view it can be done literally in seconds guys now hopefully you've learned a lot in this crash course and once again if you want to expedite your learning process and really deepen your ui design and figma understanding and workflows and processes make sure to check out my master class a link is in the description and if you want to get 10 off make sure to use the coupon code all right guys i'll see you in the next video very soon

Channel: Mizko

Views: 80,753

Keywords: figma crash course, figma crash course 2022, learn figma, best figma course

Id: MENBUIJ9oow

Length: 34min 0sec (2040 seconds)

Published: Tue Apr 26 2022