Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Today we're gonna dive into figma so if  you're interested in learning figma for   designing websites but you don't have a lot  of experience in the tool yet then this video   is for you because I've made sure that we're  going to use the most important features in   figma in order to create this design and the  project that we're going to create together   is this simple home page for a gym it has a big  background image with a transparent header and   an overlapping icon row a text section with  an image on the side and a simple footer with   social media icons and all you need to do is make  sure you have a figma account which is free to do   just click over here make an account then go  to your drafts click on new design file and   from here on I'm gonna give you all the images  the colors and everything you need to recreate   the design and after that feel free to use it in  your portfolio just change up the design a little   bit and then it's fine so how figma essentially  works is that everything is in a horizontal box   or a vertical box as you can see right here and  this is basically how the web actually works so   designing in figma will make you understand the  web even better so now let's just get started the first step is to structure of the layout  so look at this design it has three sections   this first one then the text section and then the  footer and it's better to first create those three   sections so that you're not gonna focus on the  details too soon because that's what designers   like to do but it slows down your progress so  let's just do that so in your new file we first   need to create an artboard so before we can start  adding text and colors we first need a frame and   frame is kind of like a page so you do that by  creating a frame over here so if you click on   the frame then on the right over here you can see  a lot of options and the one I always start out   with is desktop so click on the desktop that's  1440 pixels in width and like I said let's first   create our three main sections alright so what  you're gonna do is you're gonna go over here   grab the rectangle and then create a shape like  this then you can drag the edges and make sure   it's aligns to the top then we have an empty space  over here and then we have a footer at the bottom   so we can create another shape from here but it's  easier to make a duplicate of this one so hold alt   or option and then click and drag and then it  will make a duplicate now you want to align it   exactly in the middle so here we're going to use  our align option which is a lot nicer than just   trying to make it fit in so just click on middle  align and then over here to the bottom because   that's what we want and now we only have to drag  this part down and it's still perfectly aligned   but our design is a little bit short so if you  grab your artboard or frame over here then you   can make the whole artboard a bit longer you  can by the way zoom out by holding commands   or control it's alt or control on Windows I'm not  really sure and then just drag it down or you can   simply change the number over here I'm going to  change it to 1700s like this okay so now we can   put the footer again at the bottom with this tool  and make it a little bit higher and for our top   part we also gonna make it a little bit higher  we will do this overlapping part later because   that's a little bit harder but for now let's just  create created the shape for our image so now I'm   going to grab a new rectangle like this you can  also access that by clicking on the r and then   create a rectangle like this alright but now where  do we actually align it that's a problem so now we   need to dive into the grids so as you probably  have noticed all websites are based on a grid   and some websites skill discrete but most websites  keep the content in a specific pixel width because   otherwise the text boxes become too wide and it's  not comfortable to read and we need this grid to   align our image so let's just do that I'm going  to click on my artboard over here and then over   here you can see layout grids you can click on the  plus over here it creates a standard grid but that   is a horizontal and vertical grid so click on  this one over here click on columns because we   just want 12 columns 12 is the industry standard  because you can easily create two boxes three and   four and six which is kind of nice so we're gonna  use 12 columns it doesn't do anything but you need   to click outside of it to see the changes put it  on Center because now it stretches sometimes you   want that but for this design I don't want that  so click on Center but then you need to tell figma   how wide each column should be and a common use  size for this is 75. why well because then from   here to here it's 11 20 pixels which is used in  many Builder tools like Elementor so as you can   see whoa whoa I aligned it almost perfectly in  one pixel which is a coincidence so that's kind   of funny so I'm going to align that to the grid  and I'm also going to make it a little bit wider   like this because I wanted to stretch over six  columns like this and if you do that you can see   that it's exactly 150 pixels from this section  and from this section you can actually activate   that by holding option or commands and then you  can see the pixels if you hover with your mouse   which is nice okay so now let's add some colors  I'm gonna go to the fill over here and I'm gonna   change the color to to pure black because I want  to use pure black on this website and then you   can go on this shape and also put it on black but  there is a trick here which you should know which   is the asset colors because for example black is  used in many places in this design so you want to   save that color so you can reuse it later so now  this one is black then you click on these four   dots it's called style and then you can add  this color to the color styles they call it   color styles over here it's called assets color  assets in Adobe XD it's all the same thing it's   Global colors that's what I actually think they  should call it so you click on the plus and then   you you give it a name for example black all right  and you click on create style and now this one is   safe so if you then click on another shape instead  of just changing the color from here you can click   on the four dots again and then select your black  as you can see a little bit easier for this one   we don't have to change the color because in our  Design This background is actually soft gray so   if you want to use the same same colors as me you  can drag in the files so I will share these files   in the description below so you can download them  and then you can drag in my colors if you want to   like this make a little bit larger so here are  my colors it's just a screenshot from my figma   actually and then you can grab the background  so grab your artboards now it's set to White   which is ffff so you click over here and now you  can click on this tool you can also access that   by the way by clicking I so you click on this one  and then you go over the soft gray and boom there   you click it and I also recommend to also add  that color to your style so click on the four   dots again and call it a soft gray create style  so where are all these Global colors shaped well   you can access them by clicking outside of your  artboards just not in your design but outside   and then you can see it over here local Styles  and here are your colors you can change them   afterwards so let's say that you want to change  your black to maybe not 100 black but a little   bit softer then as you can see it changes in your  whole design when which of course is awesome I   just put it on a little bit lighter like this and  then the last thing that we need to do is create   this diagonal shape that's also really easy to do  you can just click on the shape then double click   it again and now you can access the individual  points so you can grab this one and put it up   like this yeah that's something like our design  all right and then click outside double click   it and now we're done so the basic structure  is here let's now move to images and icons so here's the image that we need so you could drag  in the image like this and then mask it like this   but what I like to do is just click on the image  over here and then instead of using a color use a   image as a background so now this is connected  to the global color so I'm going to disconnect   that click over here and then you can select  instead of a solid you can select an image and   now you can drag your image over here and then it  masks you even have some very simple editing over   here if you want to change the image a little bit  let's just increase the opacity a bit that looks   pretty cool and now your image is in here but it's  not in the right position so if you hold option or   alt and double click there you can reposition it  like this make sure to hold shift so it skills   proportionally and then put it in the position  you want just look at our example this is where   I want him to be but now we have a gap over here  so click outside of it so what's beautiful about   figma is that you can have multiple layers  within a fill so now we have an image as   a layer in a fill but we can add another layer on  top of it so if you click on the plus you can add   a layer on top of it so now it's a solid which  is on 20 opacity so if I increase that you're   not going to see him but if we then go to linear  which is a gradient then we can say like we want   to go from black to white so this left one is on  black 100 and this red one is on zero percent it   doesn't look like it's on 100 because this layer  also has an opacity so I'm going to change that to   100 and now you can see that we're almost there so  I'm going to open my gradient again I'm just going   to grab this point and just position it over here  so this is pretty cool as you can see two layers   in one shape we didn't have to group anything and  it's all here on the Right Alright for this image   I'm gonna do the same so I'm gonna click over here  then go to solid image then drag in my image over   here and there she is we can reposition it again  but I'm fine with this so now we have two images   let's drag in some icons so I'm going to go to my  folder I have three SVG icons over here which are   vector icons and then drag them into your figma  like this they're not all the same size and we   want them to be smaller anyways so let's just make  uh one of them let's just drag it in over here and   let's just make that one a lot smaller for this  design I want them to be 30 by 30 so you can just   drag it over here and then look at the numbers  or you can go over here and then change the width   and the height so if you put this one at 40 it's  gonna stretch so if you don't want that then make   sure this one is linked and then if you change  it it's gonna change the width and the height   so for now I'm gonna put it at 30. I'm also gonna  do that for these two you can select both of them   by holding shift select this one and then put them  at 30. and now you can see we have the three icons   drag them over here and now we're going to use  Auto layout for the first time this is the most   amazing feature I think in figma so if you select  all of them and you click on shift a it's going   to create a grits this is not a group it's kind of  like a group with a lot more features so in a tool   like Adobe XC you would group Everything But Here  auto layout is a lot nicer because now for example   you can do things like this but like I said in the  intro it's vertical or is horizontal we also want   these icons to be white so if you go down over  here you can see what kind of colors we're working   with for these icons so I can put them on white  and I also want to add white to my color so create   a style call it white and there we go alright  let's add our icons to the grid but our grid is   gone I did that by holding shift G then you can  hide and show your Grid or you can go over here   and then use this eye over here so make sure to  add your icons over here and we're going to work   a lot more with auto layout in The Next Step which  is working with text layers okay so let's add some   text layers let's just first start with the big  one so this one over here this one and this one   so I'm gonna go over here I'm gonna select t for  the text tool I'm gonna click over here and we're   gonna type Fight Like A Champion and here you  can see the newest feature in figma which is   auto correct really cool so if you're in your text  layer figma can now auto correct it super cool the   font that I want to use here is Sarah and then  condensed you can click over here all the Google   fonts are automatically already loaded in and then  I want to use the Bold version I want it to be 130   in terms of size and I want the text to be in  capitals that's a little bit hidden over here   if you click on type settings then over here you  can put it on uppercase alright so now I'm gonna   decrease the width of the text layer because  I wanted to break as you can see in my design   after like it doesn't do that right here which I  don't really like so for now I'm just gonna click   after the A and then click on shift enter to get  what I want but as you can see the line height is   much too high and you can change that over here  line height I'm gonna put it at 90 for many other   text layers you want to use a higher percentage  above 100 but for big titles it's less this also   really depends on the font but that is what I  found alright so now let's just turn on the grid   again so I can align it by the way I don't really  see the red on this black background so let's just   also change our grid color so I'm going to click  on my artboard I'm going to go to the grid again   and I'm just going to change the color over here  to something we can actually see maybe something   like this blue it's a little bit intense over  here but we need to see it all right that's a   little bit better now we can at least see what  we're doing okay so I'm gonna turn off the grid   again with shift C and as you can see in my design  the word Champion is red so let's just make this   word red now I'm gonna double click it and then  I'm gonna click on the plus I'm gonna change the   fill to a red color like this 100 opacity actually  I think Carla was more something like this so okay   so now this text is red as well let's just now  make a smaller version of this text so I'm gonna   make a duplicate by holding option or alt like  this now I'm gonna change the size over here to   50 and the line height 110 because if it's smaller  you need a little bit more space all right in my   design this text is black so I'm gonna select this  one I'm gonna create a fill and we're gonna put it   at black and of course we're gonna use our Global  colors and this text is the same size as this text   so now we can also save this color to our Global  font so in the same way click on the four dots and   then click on plus and I call it something that  you want for example I'm going to call it heading   2 because this big one is heading one make sure  to click on create style and now you can see that   it changed so now if we make a duplicate of this  text and we make it white and we click outside of   our artboard we can see our Global font over here  and if we change it over here so let's say we're   gonna change it line height now it changes both  of them all right perfect so click on the great   again sure to align it change the text decrease  its width and in our design the word next is red   so let's try to select the red but as you can see  we haven't saved the red so we need to go back to   this one and then this red we need to save it so  let's just go to fill style click on the plus and   then call this red create the style so now this  text has red and white I also haven't connected   the white as you can see like this so now if you  go to this layer and you select the next you can   click on white and then click on red and now this  whole text layer has two Global colors as you can   see perfect we have two more Simple Text layers  which is this one and the menu so let's just   create that I'm gonna click on the T again create  a text box like this and I want to paste some   lorem ipsum in I haven't installed any plugins  yet to do that so I'm just going to use my Chrome   extension but there are ways in figma to do this  I will make a separate video about Henley plugin   by the way so paste your lorem ipsum text in and  now we need to detach the global colors because we   want another style for our body I want to use the  font enter it's going to be a lot smaller like 16   which is a good size for body font the line height  needs to be 170 because that looks better for   um body text color that I want to use is gray  but it's the darker gray for body text you almost   always want a font that is a little bit lighter  because otherwise the contrast is too harsh so   what I'm gonna do is I'm just gonna color pick my  color that I've prepared like this and of course   I'm going to add that color to the palette as well  gray okay we don't want all capitals we just want   it to be normal like this and we also don't want  everything to be bold it should just be regular   now this looks like a great body text I also see  that I forgot to change the text turn on the grid   again to make sure to align it on the grid so this  one on the left and then this one to the edges I'm   gonna add a enter over here to make it a little  bit more readable and then never forget to add a   font to your glow balls so over here we're going  to do that we're calling this body text create   the style this one I also haven't connected that  but of course we're going to use the heading too   because this one is also on heading 2. alright  let's now go to the menu because that's the last   step before we're gonna go to the combinations of  icons and text and we're going to use Auto layout   for that so uh let's just copy this one with alt  or option let's make it white let's detach The   Heading 2 because we want to make a new style this  one needs to be 16 all right this is the styling   that we want so I'm gonna add that to the styles  again I know it's a little bit of work in the   beginning but you're gonna thank me later for this  okay I'm gonna call this menu okay now I'm gonna   change this to home but this text box is a little  bit too wide so if you double click over here then   it just becomes a single item okay so I'm gonna  create some other ones okay now select all of them   but if I try then my image is gonna move so in  this situation like this where you're working on   a background I would suggest grab your background  layer then right click and then lock or unlock or   you can do command shift L and now you can just  easily select your layers like this click shift   a again for auto layout and there it is your menu  what's also great about other layout by the way is   that you can click and then change its positions  and it sticks as you can see it's really really   nice we want 30 pixels in between all right I'm  gonna position it and we need some space for the   button so for now I'm just gonna leave it right  here and then the last little detail that I forgot   to add is this little line over here I've just  used the rectangle tool to be honest so clicked   on the rectangle create a little rectangle and  then select it to Red like this and I made my   title a little bit smaller that's actually all  I've done okay and this is all we need for now oh   and I also forgot one other thing and that is on  the bottom over here we have terms and conditions   and privacy these are just two simple text layers  with the body font so you could just click T and   just type in privacy policy then make sure to pick  your body font like this post it over here make a   duplicate and change the other one and make sure  to both align them in the grid we're gonna Auto   layout them later but for now this is all we  need okay it's starting to look like something   so let's just go to the next step where we're  going to take it a step further with auto layout   okay let's now finish our menu with the logo  on the left and the button on the right and   we're gonna drag in this icon that we're gonna  use I'm gonna drag it let's say outside of here   I'll first make it white because otherwise we can  see it and then drag it in over here make it a bit   bigger then I'm going to copy my title change  the text I'm gonna make it 32 this icon I want   that to be red so right now it's white I'm gonna  make it red and again select both of them and   make an auto layout of it now we want to create  our button so in most other tools you can first   create a background and then you put a text on  top of it and then you group it but in figma this   is a little bit different with buttons so I want  to use the same text style over here but when I   duplicate this one with common D It's Gonna stick  inside of this Frame which is not what I want so   you can simply click and then drag outside of it  and now it's free from the auto layout change it   to sign up now turn this one also into an auto  layout with shift a and then it's going to add   this box you don't see it yet but there is a box  let's make that box visible by giving it a fill   so I'm gonna go to fill I'm gonna give it a red  background and now you can see the box as you   can see this Frame only contains a text it's kind  of like a group but then a little bit different   but the beautiful thing about this is that you  can increase the horizontal padding like this   and the vertical padding as well think 10 is all  right and we need another button over here let's   first position it so I'm going to turn on my grid  again I'm gonna position it and I want to make   sure that it's in line with the logo and also I  want this one to be a line so you can try to do   it yourself or you can just select all of them  and then press Auto layout again and now it's   automatically aligned in the middle but we don't  want the menu over here we want this space to be   less so here you create another Auto layout  because by default it will space out all the   items evenly so if you then select this one and  this one give it an auto layout again with shift   a and then you can decrease this size to for  example 30 and now you can decrease this size or   you can just drag the side over here and then make  it wider but that doesn't work why well because   there's another tool you should know and that is  a little bit hidden it's under here so if you go   to Advanced layout by default it's just stacking  or packed but if you put it on space between then   it will automatically create that space within the  box or within that container this actually works   the same way as the container does so now we have  this one which is a horizontal container we have   this one which is horizontal and also has some Gap  in between and then we have this whole container   which is C is the right part as one part and then  the left part as one part and it creates as much   space as possible in between so now if we decrease  this as you can see it scales perfectly okay let's   now add another button over here but hey we've  already learned that we can reuse things so this   is the same for the button so I'm going to click  on the button again double click it and now we're   going to use this feature called component so if  you click on this icon it creates a component and   a component is a reusable element so this works  similar to Global colors and fonts but it's not   saved in the same place so if you click outside of  your artboard it's not saved over here they have   it over here on the assets so here you can see  desktop we have this button so now it's better   to drag the button from here into our design like  this and here you can see if you go back to the   layers that this is a frame now it has this shape  which shows that this is a component but this is   not the main component you can always find the  main component by right click and I click on go to   main components and if you change this component  because this is the main one then the other one   will change as well so let's just try that if I'm  gonna increase the size as you can see the other   one skills it as well so let's just do that let's  just put it on 30 make the button a bit bigger   and that works perfectly so let's now add Auto  layout to this section so what do we see here we   have this part this part and this part which are  aligned vertically but if we select all of them   and press command a then it's going to be stacked  vertically so you need to go a step back with   common Z these two parts need to be horizontal so  I'm going to make an auto layout of this one first   and then figma already sees that it's uh it's  horizontal and now figma sees this as one element   so now we can take all of them and press shift a  again and now we can change the values over here   and then it does what we want all right let's  align this in the middle I want the image to be   the same size so we'll just resize that okay that  looks pretty good let's just do one more exercise   with auto layout because this is so important  okay so in our final design in the footer we   have this icon over here and then email and then  the terms and conditions and privacy over here   we're going to use the same trick first we need  an icon and an icon is not part of this folder   because I wanted to show you something so if you  go to iconfinder.com this is a beautiful website   you can take a look at their packages they have  beautiful icons over here but if you just search   over here for example to email you can find all  kinds of icons not all of them are free but a lot   of them are free so this one for example that one  looks nice so by default it's on PNG but you can   go to SVG which is Vector and then if you click on  copy over here and you go back to your figma and   you paste it it's already there and you don't have  to save it on your computer first it's beautiful   so let's just change that to White all right I'm  gonna put it in the footer over here I need a text   layer for my email info ad box champion.com okay  so let's now add Auto layout to this whole section   first let's select all of them but now it's also  selected background so I'm going to lock that   background again select all of them shift a that  doesn't work so we need to create a box over here   and a box over here so this one in Auto layout  this one in Auto layout and then these two boxes   in another Auto layout and then as you can see it  perfectly aligns as well show that again this one   already was in an auto layout so if you want these  two to be aligned in the middle you also select   both of them and other layouts Perfect Right these  two don't need to be in an auto layout you can do   that but I don't think that's that's necessary  so now we're done with most of the basic things   now we're gonna go do the hardest part which  is this one over here this is the hardest one   so we need to go to the website again and we're  gonna search for fitness icon for example I'm   gonna grab some cool icons you can filter on the  left for free by the way here we have a free one   beautiful copy okay now I have three icons let's  first I'll make them the same size so I'm going to   select all of them make sure to link this one  and then I'm gonna make them 45. alright that   looks decent but as you can see with downloading  icons sometimes they don't look the same because   this one looks a lot bigger so sometimes you  just need to change it a bit and use your eyes   in order to create something that looks a little  bit similar okay so we also need three text which   is another one it's 24 in size so let's just do  that I'm gonna create a text layer let's just   start with this one because I think it looks  similar unlink it 24 that looks good add that   again I'm gonna add some random text over here I'm  gonna make these texts red so now you're probably   thinking like hey we need a rectangle over here  but we can use Auto layout in the same way as we   use in the button which is pretty cool so first  we need to put everything in an auto layout but   if we're going to do that right now it's going  to be in one row so this is a vertical row and   this is a vertical row and this is a vertical  row so three layouts then all of these three   also needs to be in an auto layout so I'm going  to add other layout over here all right and now   we can add the same kind of background as we did  with the button so I'm going to click over here   and then click on white here you can see it adds  a background and now if we increase the padding   you can also create a box like this so let's  add our grid Again by holding shift G and I   want this to be middle align so first I'm going  to do that then I'm going to move it up a bit by   holding shifts so it goes straight up and now if  I increase the padding it starts to scale from   the left but I don't want that so there's another  trick over here and that is constraints so if you   put the constraint which is now on left on Center  and now you start to increase the padding now this   is what happens now it doesn't move to the right  which is kind of nice we want it to be as wide   over here if we also change the space between or  the element Gap then the sides also become bigger   because this is the padding so it always keeps 200  pixels so first decide how much space you want in   between the icons so for example 120 and then  decrease this size in order to make it fit zoom   in a little bit to make sure it's on the grids  perfectly alright now shift G again and there's   one more thing we need to do to this part and that  is a shadow because I don't know if you've noticed   but there's this soft very nice shadow under this  part so I'm gonna click over here and we're gonna   go to a new feature called effects click on the  plus drop shadow is the first feature there are   a few other ones but for now we're just going to  use drop shadow click over here to change it we   need to increase the blur so click over here  and then increase the blur and make it really   nice and soft and for the color I want to use red  maybe a little bit darker as you can see this is   starting to become really beautiful I'm gonna also  put it a little bit down increase the blur again   oh this is so cool I'm gonna decrease the opacity  because it's a bit too intense but now as you can   see it starts floating and there's a really nice  contrast between the white background and this   gray background with the Red Shadow in between  look at that absolutely beautiful so let's now   compare this design to our final design and we  can see that there are still a few differences   this image is a bit taller than the text which  is nice it creates some balance so let's just   do that as well with our design but if we just  go over here we make it higher by holding alt   by the way you can do both sides we don't actually  have enough space for that so we want to move the   footer down but this layer is locked and these  are two separate layers so I want to show you   one more thing and that is to use the constraints  again but then in a different way so make sure to   find the layer for on the footer because you  can't click on it and you can see this one   is locked so let's just unlock that so now we  can edit the footer again select the footer if   you press shift a it's going to create the auto  layout again I don't want that because then it   changes the padding so in this instance I would  use a group so just right click and then group   or shift G and now click on the group and then  over here on constrains click on this one over   here because that changes this one to bottom and  that means that whenever you're gonna change your   artboard this one will stick at the bottom so now  if we click on our artboard you can see that our   footer just sticks to the bottom which is nice  because it happens a lot of times that you're   making your page longer and adding elements so if  you know that your footer and some layers need to   be at the bottom just group it constrains bottom  and that's really nice I'm going to make it a bit   longer and then I'm gonna grab all of this gonna  make that an auto layout again to make sure that   this one is aligned in the middle and there we  go and then there's one more difference and that   is the background why does this one look better  it's because of the background so you can change   the background color of your whole figma if you  want to so if you just click anywhere outside the   background over here you can change that as well  and that's what I did and that's why that one just   looks a little bit better and also the icons I see  are a little bit thicker which I like a little bit   better so as you can see it's super similar to our  design we've covered the basics but if you want to   learn more about figma then you can sign up for my  fikma course right now it's a waiting list but if   there's enough interest for the course then I will  create a fake my course so if a thousand people   sign up on this page then I will create that  course and I will email everyone with a discount   that signed up on the page so that is nice and  I also want to make this design when Elementor   comes out with the container in Elementor which  I think is also going to be pretty fun and then   we can also make it look good on tablet and mobile  so hope you are excited about that for now I want   to thank you for watching and hopefully I will  see you in the next video a living with pixels

Channel: Rino de Boer

Views: 968,937

Keywords: figma, figma web design, figma tutorial, figma tutorial for beginners, how to use figma, how to use figma for web design, figma tutorial web design, figma website, web design figma, figma basics, figma for beginners, how to get started with figma, figma ui tutorial, start with figma, web design tutorial, web design for beginners, adobe xd alternative, figma design, figma design tutorial, figma auto layout, figma components, how to design website, how to design a website

Id: JGLfyTDgfDc

Length: 31min 38sec (1898 seconds)

Published: Thu Jan 12 2023