Learn Figma For Beginners

Key Takeaways

if you've been wanting to learn figma then this three-hour compilation is going to cover everything you need to get started I'm Maddie a freelance designer from the US and I'm going to be taking you through this crash course in the industry standard for designing websites and digital products after becoming familiar with figma's interface we'll be diving deeper into topics like variables Auto layout multi- editing scrolling animations interactions and plugins before designing a fully responsive website feel free to skip around using the chapter markers in the timeline or in the description box below and let's get [Music] started if you've been wanting to dive into figma then you've come to the right place today we're going to be creating this cool web page and along the way you're going to get a crash course in using some of figma's best tools like a professional first over here we have the colors that we're going to be using we have some um logos and symbols for the brand that we're designing for some images and these were all created using mid Journey but you'll have access to these if you want to use these exact ones you'll see this wireframe very messy wireframe that um we put together for this site so we'll be following it uh for the most part just to give us an idea of what of this information is going to go where so over here we've also got some icons that we'll be using some font that we're going to be using so we're going to be using inter and Roboto and Roboto mono so these are kind of the starting point for our fonts and then we have our page copy so we're just going to be pulling from this for all of the text we're going to be using in the site and I also want to point out that I actually changed the like canvas color um to make it darker so you can do that just by clicking anywhere on on the canvas and you can come up here and switch the color of the page so by default it kind of looks like this but um I kind of like designing in dark mode I guess you could say so I just made it a little bit darker yeah that's that I guess before we dive in I do want to show you around figma a little bit um so this over here is the layers panel so when we're selected on layers here um just like any other design tool you're going to see your layers one on top of the other the ones you know on the top are on top of the ones on the bottom so for example if we come up here we can tell that this gray is actually behind the white cuz it's below it in the layers panel and there are certain shortcuts for um sort of moving things around on the layers panel so for one you can hold down command and hit right bracket and that will bring it up one level you can just do right bracket to bring it to the very very front you can see that brought it to the very top so yes this is the layers panel over here when you click on assets this is where all of our components and styles are going to live and we'll get there in 1 second and you can have multiple Pages um in figma so here you can navigate to whatever page you're on so it might be nice to have you know kind of like your exploration page here and then maybe your wireframe here and your designs you know etc etc so that's that um above that here we have our toolbar so I won't you know point out every single tool but um it does show you what some of the shortcuts are for the tools I almost never come up here because I use the shortcuts to do a new frame you hit F to do a new rectangle you hit R and to do a line of text or a text box you hit T and those are the most kind of important quick shortcuts um for the things right here okay so then in the middle is your canvas of course this is where our design is actually going to live and then if we click on any design element this is where our properties panel over here on the Right comes in so I can click on images and see all the properties associated with images text we have properties associated with text um things like that and of course we're going to get much deeper into that this properties panel is where a lot of the magic happens okay so now let's set up a frame for this design so I'm just going to hit F on my keyboard and as you can see when we did that um these frame sort of like templates came up so we can just create a frame of any size but I'm going to undo that and we can also hit F and look for what we want so I'm going to choose this desktop 14 40 doesn't really matter the height cuz we're just going to you know keep adding our sections here so this is going to be our main frame for our design so I'm just going to call this homepage and as you can see on the layers panel this is what a frame looks like on the layers panel it has this kind of like hashtag as the symbol now something that's really helpful especially when it comes to designing for web is using a grid and so figma makes that really easy so I'm selected on my frame here and I'm going to come over to layout grid and hit the plus button and by default it's going to give me exactly that a grid what I actually want is columns so I'm just going to click there and change it to columns but instead of five I actually want 12 I want a margin of 28 so here on each side um we've got 28 pixels so that these columns are aren't like all the way to the edge and then I want a gutter or a space between each column of 14 pixels okay and so now this is just really going to help us place all of our elements on the page and have it feel really consistent and also be easier for a developer to build down the line and the great thing is you can turn this off and on um by hitting the I here to you know kind of disable it so that you can be designing and then okay I want to see what it really looks like and turn it off so we'll be doing that throughout this process so before we start adding items I want to talk quickly about libraries um and sort of Saved Styles we're not going to go too deep into it but it is super helpful for example to save some colors into a local library um or basically to this file so that we don't have to keep eye dropping a color we don't have to keep pasting a hex code we can just have our palette set up for us so it's super easy to do that so I'm just going to select on one of our colors come over here and I'm going to hover over these four dots where it says style click on that and then click on the plus button and this is going to allow us to create a new style so we'll just call this gray and then I'm going to do that for this too this is white and black perfect so now you can see over here here under local Styles we've got our color styles so now I'm just going to hit R for rectangle I'm going to just make this shape here and if I come over here hit those four dots then I can choose from any of these colors and it just makes it super easy some more things that we might want to add to our Styles panel are our type Styles so same thing I'm just going to click on the style click on the four dots click create Style and we'll call this header do the same thing here we'll call this header to and we'll call this one paragraph okay now that doesn't mean we're limited to just these but it is really nice to just have a starting point and the last thing I'm going to do setup wise is come over to these icons and if you don't know where to get icons Google actually has a material design icon library that is super super easy easy to use you can download them as svgs which I find to be the best way to work with icons so I highly recommend looking into that it's completely free but once we have our icons in figma it's a good idea to set ourselves up for success by Framing them consistently so what I'm going to do is click on this icon here this is a group of rectangles here as we can see in the layers panel what I'm going to do is hit control click come down and hit frame selection so now this is in a frame what I'm going to do is make this Frame 16 pixels by 16 pixels and Center my icon in there so as you can see we're just going to mess with it a little bit so that it centers perfectly and then we'll call this hamburger and then I'm going to do the same for these so I'm going to hit frame selection 16 by 16 make sure that this is not going to scale on us 16 by 16 Center that arrow and one more time we're going to select on this and the shortcut to frame a selection is option command G select on this make sure it's not going to scale 16 16 and we'll call this copyright so this way all of our icons are sitting in the same size frame which is just going to make our life much easier and help keep things consistent rather than running around with completely different sized icons okay so back to our web page let's start with our hero and navigation so for this top hero section I'm going to create a new frame so I'm hitting F on my keyboard and I am going to just stretch it all the way across and I think like like around 800 810 pixels high is a pretty good height for a hero um on most screen sizes you'll be able to see a little bit below it which encourages scrolling so that's great and one thing I want to point out is that using frames instead of rectangles is really important in figma because rectangles don't have nearly as many properties and as much flexibility as frames and you're going to see what I mean with auto layout and things like that as we get further into this but I basically never use rectangles unless I'm creating um like a vector icon or shape or something like that to kind of design and lay things out I always use frames and as you can see you can always have frames within frames within frames within frames within frames so it's just a really nice sort of way to organize things and speaking of organization I am going to come over here to the layers panel and name this Frame hero okay great now I'm going to turn off our columns for now we don't really need them at the moment and I'm going to select on this hero frame and I'm going to add a fill but instead of adding just a color fill I'm going to add an image fill so I'm going to go in and choose an image so we've got our hero image here that I've saved to my computer perfect so so now we've got this image fill here and now we're just going to start bringing over all of the elements that we want inside this Frame so now I'm going to come over and just start adding these elements in so I'm just going to copy and paste a copy of this another way that you can duplicate something really easily is by holding down option and dragging out a copy like that so that's what I normally do to save time so we're going to be using this pretty big it's the main brand logo so we'll just throw it in somewhere for now we're also going to need a headline so I'm going to bring this on over same thing I'm just duplicating it by holding down option and dragging creating the future of vision now also if you have a hard time selecting on an element on the canvas so like for example by default these elements are nesting inside of this hero frame which is exactly what we want but as a result if I go and click on this just once and try to move it it's not going to move I'm not selected on it I'm just selected on the entire hero frame so you can doubleclick or you can command click to sort of Click into a group or a frame um to select on what you want to select on so I'm going to do that I'm going to command click on this and I'm going to go over to my text Styles and hit header one cuz I I think that's really what we want for this okay I want this like above the head so it's not covering the glasses we're going to put it just up against this fourth column and then I'm going to have this logo take up exactly two columns here and make sure that our top Edge is aligned so to do that let's say they're not aligned I'm going to click on both of them and to click on two things at once you can hit shift so I'm going to shift and click there and then you can come on up here and do a line top and that will make sure that they're perfectly aligned Okay so we've aligned them but I want to make sure I'm using consistent spacing so we have 52 I'm actually going to do 40 pixels on the top that's perfect and then we also have our navigation over here so I'm going to drag out a copy of this this and I think I want to use our header two for this I'm just going to double click on that um Edge bounding line to bring it in and hug the contents and we've got 40 pixels of space on the top and bottom that's good but these are really squished together which we don't want that doesn't really make for Optimum clickability so I'm actually going to detach this style so that I can change it up a little bit and I'm going to come here to paragraph spacing and I'm going to increase that so we don't need to do it that much I would say what does 12 look like yeah 12 looks good then we'll get our smaller logo this is going to be like what you click on if you want to go you know back to home on our navigation so I'm going to align it to the very edge 40 pixels on the top and I'm going to make it it 40 pixels wide so this is the start of our navigation we also want to create a cart button though so we don't want cart within here because it's more important we want to like really bring it out to the side so to create a button I'm going to do it kind of off to the side first I'm going to hit f for frame I want to make sure that the height is at least 44 pixels um for Optimum tability and accessibility I'm going to round the corners a bit so to round corners you can select on the frame come up here to Corner radius let's see oh 20 is a lot let's do like four want to keep it kind of subtle then I'm going to hit t on my keyboard for text and we're going to call it cart again we can use our header 2 font which is good then I'm going to drag out a copy of this um we want to know what's like how many things are in our cart so we have this I'm going to name the frame button but this isn't looking very good right so this is where I'm going to introduce you to Auto layout which is honestly one of my best friends when it comes to designing inigma I use it so much um you don't have to use it for everything but I'm going to show you how it works so that you can decide when you want to use it and not use it so Auto layout I'm going to hit plus to like you know start working on auto layout as you can see that automatically hugged in all of that extra space and it's hugging our elements in fact it says hug on the top and sides so we can really kind of tell it how to behave here so right now we have 25 pixels of space in between these items we have 19 pixels of horizontal um padding so on the left and right and 15 pixels of vertical padding so on the top and bottom I'm cool with the 15 um let's make it 15 on the sides as well and then I'm going to say 20 um in the middle should be good in fact that actually seems like a little too much should we do 10 yeah I think that's good so now the beauty of this is say it doesn't say cart let's say it says I don't know button button see how the button is growing with what I'm typing that is just super super helpful and it just saves so much time so I really love that so I'm going to drag this in as I'm dragging it in you can see that it is going inside of this hero frame and then I'm going to drag it so that it is perfectly aligned to this column here oh I didn't explain before how you can tell how far away something is so I'm just holding option I have this button selected and I'm holding down option and I'm like hovering over the edges to get these red numbers to show up so that I know how far away I am from certain things so that's a helpful shortcut as well okay and one more thing for the navigation we want our hamburger icon so I'm going to copy this icon and paste it over here and I think I want it all the way against this Edge and that makes me think I might want this um I might might want to ignore my columns for a second and just have these sort of live together so I'm going to have these 40 pixel pixs away from each other now turning off those I think that looks pretty good so next I want to just have like a paragraph um down here so I'm going to grab this paragraph here and paste it on in and since it's a paragraph we're going to use our paragraph style and we'll line it to this Edge and we'll have it take up three columns I think that should be good and since we have 40 pixels of space on the top I'm going to put 40 pixels of space on the bottom um along this as well I think that is going to be good that's looking great now we're just going to add in some more of our icons so to sort of round out this design I'm going to have this kind of mirroring this and have something in each corner so I'm going to grab there Arrow here and we can have a button that just says scroll down make sure we're 40 here and then I'm hitting T scroll down I think I like that in the paragraph here is our hero I think it's looking really good now let's dive into the next section so we're going to do kind of a little bit of an about section here so first what I want to do is hit F and create a frame for this section and I'm going to give it a fill of our gray then let's go over and see what text we want in this about section now of course since we're on this light gray we are not going to want to use our white text we're going to want to use black so I'm going to come over here choose black um we're going to use this as a paragraph and this as our heading so come in here heading one and this looks pretty good but it's competing with this one um so I'm going to make it a little bit smaller so I'm going to detach this and we make it like 78 I think cool so now let's turn back on our columns cuz without them I don't know where to put anything I'm going to align these here and going to do a little bit more space on the top and bottom than I did um on this image just to give it a little bit more padding so I'm using 100 pixels on the top here um and then let's choose this and we'll make this our paragraph and I think I want this to take up four I mean three columns again so we'll do that and then I want it aligned to the bottom of this so you can see as I'm moving it um I'm getting that red line that shows me it's aligned to the bot bottom I also like to hold down shift when I'm moving things like um the line height the space between the letters I think it's called letting or kerning I kind of forget don't come at me but yeah there's a lot that you can do to manipulate text here um I already kind of have it how I want it but there's just a lot you can do so feel free to play around with that as well let's give ourselves kind of like a title here or like a label I guess you could say we'll say it's header two I think that looks good just make sure we're aligned okay easy enough so we're probably going to need more room here because we also want to have if we look at our wireframe here we want to have product images within this section as well so in order to create like a product thumbnail I want to make that a component and a lot of times in Design This is called a card so we're going to create a card component and I'm going to show you kind of all about components so we're going to hit F on our keyboard again we're going to make a frame I just made it a random size but we want to make sure that our images here can fit within them so let's see this is 452 X 452 so we're going to make this for 52 um the height doesn't matter quite yet so then I'm going to do another frame so a frame within a frame so this main frame is going to be called uh product card and then this Frame inside here is going to be our image so I'm going to do what I did before we want this to be a square so 4 52 and I'm going to give it an image fill and we're just going to choose from those images that we have okay that's great so then we have this part of the card but we also need um the name of the product so we'll go over here and grab that from our copy section and so here's what we have it's called intelligent glasses um so let's see how we want to lay this out this text here um let's do it in black and let's do it as our H2 and that looks good but I don't want it like all black I think I want this to sort of recede into the background a little bit so I am going to give it an opacity this whole text layer I'm going to give an opacity of 50% then I'm going to copy this out and we'll do sync to XM so that's what it's like actually called so we want to do 100% And I think we want to make this a little bit bigger so instead of the 13 I'm going to do 18 okay and then I'm going to use the same style to do our price so now we want to make sure that this is like laid out exactly how we want it so first of all we don't we'll bring it over here for now we don't necessarily need this like background white so I'm going to get rid of it so instead of changing the color I'm just going to literally get rid of the fill so it's zero fill it's not an opacity fill it's just no fill then I'm going to turn on auto layout and that kind of hugged these together again so what I want to do is frame these together because I want these to sort of stretch the whole component um and have an automatic amount of space in between so I'm gonna do command option G to group and instead of a fixed width I'm going to do fill the container and then I'm going to click on this whole product and we're going to wow what is happening yeah okay that's right believe it or not but we just need to change the settings Okay so so we don't need this much space in between in fact we probably need like maybe eight pixels 12 might be good okay so the reason this isn't working is because we need to turn on auto layout on this Frame level as well and then instead of having this Gap we're going to do auto and by doing Auto it's going to do as much space as will separate the items so that they're pinned to each side when you have on fill container okay so those are things like those Auto layout are just things that take practice um but they really are helpful to learn so now we have this and I'm going to actually bring it over here because I'm going to make this into a component and the reason that you would make something into a component is if you want to use it throughout your project multiple times so buttons for example are great things to make components we only have one um real button on our web page so I didn't make that button a component but you absolutely could if you were creating a whole website cards are great things to be components you can get really granular with it and make tons of elements on your website a component but this is a really good example so the reason it's so helpful is because you can make changes on the main component level that trickle down to all of the instances of that component but you can also make changes on the instance level that don't necessarily you know it doesn't go both ways so it just creates a lot of flexibility and I'll show you exactly what I mean so to create a component from this you can either go up to this um kind of four Diamond icon here and hit create component or the shortcut is to do option command K on your keyboard so now this is our main component and you can tell something as a main component if this icon next to it is filled these these diamonds are fil let me show you what the instance of the component looks like so if I just select on this and do command C command V to paste it so that now I have two see how this over on the layers panel um has an empty diamond and this has like the component symbol the four filled diamonds that's how you can tell which is the main and which is the instance and on the canvas you can see here this is what the main looks like and the instance doesn't have a a label so something I like to do is keep my components um either off to the side or on a separate page or even in an organized you know separate file um but we won't get into that but I I like to have it off to the side so I'm not accidentally putting that main component on the canvas because we only want instances on the canvas we want to only come back and touch this if we want to make a change that is going to affect all of the instances so for example I think I want for these to have rounded Corners these images so so that that is the case on all instances I'm going to make that change over here on the main component level so I'm going to click into this image frame yes and so let's see what that looks like over here so you can see it sort of adapted um to that change okay great so now let's turn back back on our columns and we can position these so um it's actually pretty much in line with where I want it but I want to have 100 pixels of space in between these and then I want to duplicate this so another way that we can find a component that we created is by going into assets and all of our local components are going to be um listed here so I can just drag one of these out and there we go so we're going to just line those up I'm going to do one more that looks pretty good now what I want to do is change these names so that they're not exactly the same so this is where it's important to understand that by changing this on the instance level it's not going to affect any of the other components so I'm going to go in and change all that and I can also change the image fill so I'm going to go in here and just switch up this image and same with this so it's looking good but I feel like these are a little bit too close to each other um like this is just kind of um I don't know I don't really like that so what I'm going to do is actually frame these together so option command G turn on auto layout and increase the spacing here so I think 32 looks pretty good and you probably noticed that this component here is cut off which is of course what we want but something that might be um helpful to know is that you can also turn off clip content so I'm turning it off on the whole um level here I'm also going to turn it off on this Frame so that way you can actually see all of these which is super helpful so um yeah you can play around with that too if if that's helpful but it's nice cuz it is also possible to turn it on on like really any frame so because I just framed those together now look I can actually um clip this content just by like decreasing the size of the frame so if I don't want it to go off the page at all even like just the bounding box I could bring it in like that so that's something that might come up for you as well so now we want to have some buttons here here so that you can toggle left and right um through these images so I'm just going to hit F create a frame you're probably so bored of me creating frames I'm going to make this white give it those rounded Corners so that it's nice and consistent and then I am going to grab this same icon here and make it black and I'm just going to tilt it and let's say we actually want to make this Arrow itself bigger if I go like this you can see that the bounding box increases but the arrow itself does not so to fix that we're going to go in to this Arrow so I'm kind of like double clicking into the frame to find the arrow and instead of Center we're going to change this to scale and that's going to actually make the arrow increase in size as I increase the size of the frame so I'm going to make this 32 by 32 and then just going to duplicate that out and there we go we've got our arrows and now let's just align them nicely to the sides we'll also make sure they're aligned with these components okay awesome now we're on to the last section which is the footer so I'm going to hit f for frame create us a nice frame for our footer give it a fill we're going to add that last image that we've got is looking pretty good and then we'll add our text once again just lining it up as always with our columns okay now I want to have a um sort of like email optin here so I'm going to show you how to create I guess a form so I'm going to hit F and we're just going to create some sort of frame in here I'm going to give it a fill um and I'm going to show you actually how to create a glass effect for the background cuz I think that would be kind of cool so what we're going to do is lower the opacity so let's say actually like 20 like kind of a lot and then I'm going to go into effects hit the plus button change it from drop shadow to background blur then go in and you can increase this blur so let's see 16 looks pretty good see how that's nice and blurry we're going to give this that 4 pixel radius and then how to make it look really kind of glassy is to give it a stroke um that's white but it's actually a gradient so I'm going to switch this to gradient and then just like really subtly I'm going to spread out this gradient here okay that's pretty good and then to make it even more subtle I'm going to change it to 50% um and you could make it even let's see two pixels wide um yeah that looks kind of glassy I guess actually I kind of like the one pixel better okay right cool and so this is just sort of the frame for our form now we need to create the actual form so what I'm going to do is give this give it a title header two is good for that and then I'm going to just create another frame we're going to give it a white background yeah I think that should be good again we're going to do four pixel Corner radius then we need a label um so to label these instead of 13 actually I'm going to make this yeah instead of 13 I'm going to detach that and make it 11 so that it's a little smaller and maybe even just medium it's always good to put placeholder text so we'll say your name here and we can put that in our paragraph font okay so that is how you create a field and then I'll frame these together together so that we can duplicate it and make another one so then I'm going to create uh select this whole frame and turn on auto layout just so that we can kind of make the spacing consistent so let's do 20 pixels of space between these let's give it a good 40 pixels on each side and 40 pixels on the top and bottom I think that is looking really good now let's just make sure that we're aligning it to our columns so we'll align it to this column here yeah that should work and then the last thing we're going to do is add some Social Links so I'm just going to hit f for frame create a um box here I'm not going to give it a fill but I am going to give it a stroke only on the bottom so I'm going to just go into here and hit bottom only we're gonna make this white I'm gonna make it two pixels for now at least just so we can see it okay so this might look like a line but as you can see it's a frame so then I'm going to hit T and put some text in this Frame so Instagram wow that's huge not header one we want paragraph let's bring it off here so we can see what we're doing we'll call this link turn on auto layout and then we'll have of let's see I think 12 pixels or 10 no actually zero pixels on the left and right and then I'm going to add in that Arrow component or that Arrow icon so I'm just grabbing it from here I'm going to select um inside this Frame we're going to actually go in here and adjust it and then let's see what happens as I drag this out um I want to change this to Auto again so that there's an automatic amount of space in between these two then I want this to take up three columns so we'll align it to these three columns and this we could definitely make this a component as well since we're going to be using it on multiple times in our project so I'll just come over there we'll go into assets and we'll drag one right right there and then I'm just duplicating this you can also once you've dragged out a copy you can then do command D to duplicate with the same amount of spacing you just did um that is a really handy trick oops I wanted this over here actually feel like this is too big I'm going to make this that 78 instead yeah that's good this way we can like align these so we're going to do Instagram Twitter email and medium and then I feel like we need just a little sort of heading here for Social Links and then with this whole footer I think it'd be cool if it looked like it was sort of like coming up from the bottom so I'm actually going to take the whole frame and give it a corner radius but I'm going to do independent Corners here so that I can just manipulate the top and bottom so what if we did 20 and 20 there we go that looks really nice except we can see that behind here we actually have um some white coming through so to change that I'm just going to select on this whole frame and give it a background fill of this gray so this way when we come in you actually can't see that little Gap there and I think that this just makes it look a lot more finished so yeah this is the final web page first what are variables variables in figma store reusable values that can be applied to all kinds of design properties and prototyping actions for example you might have a button design with a specific color and text style instead of manually adjusting each of these properties every time you create a new button you can use variables to store these values and update them consistently across your file but you might be thinking why would you use variables instead of styles what's the difference while styles are also great for maintaining consistency across designs variables offer an extra layer of flexibility and organization Styles work well for things like typography colors and components but variables actually allow you to create Dynamic relationships between elements and you can use variables to manage things like spacing layout alignment proportions and even animations and you can take color to a whole new level using variables too being able to switch between modes like dark mode and light mode when used well variables allow you to create really robust Design Systems with consistent naming conventions that allow everyone working on the project to be aligned now let's look at an example of how to create and apply variables to a figma project for this video we're going to stick with color as our variable so how do you create a variable in the first place so you can see here in this line we have local variables so I'm going to click on that and there's a couple way we can create variables one is here create variable so we're going to create a color variable we'll name this color orange and we'll grab this orange color that I've been using in this design another way that we can create a variable is by selecting on a frame or any element and defining it that way so I'm going to select on this whole frame and go into selection colors here we have this dark gray I'm going to click on style plus variable and we'll do gray create variable so that's another way that we can do that and now that's kind of a shortcut because now all of the gray elements in this page are now tagged as Gray from our variable collection so let's do that with the beige as well perfect now since we haven't yet tagged orange we can go into style and just choose orange so now all of the colors used in this Frame are tagged as one of the variables in our first collection so I say first collection because this is just the first layer so let's name this collection Primitives what that means is this is the lowest layer of variables and now we're going to create a second collection that is actually going to reference these values from the first collection so I'll show you what I mean let's go up here and choose create collection we'll call this one tokens because this whole process of referencing other variables is called tokenization it's actually something that's used really commonly in software which is what makes this a really good way to create consistent Design Systems that can be used by Engineers designers and everyone that you're working with okay let's create our first variable inside our tokens collection we're going to name it color and now we're going to be using more semantic names that actually hint towards what this color should be used for so we'll name this button and then we're going to reference this orange color in our Primitives collection let's create another one color link and same thing we're going to go into libraries and tag the orange value from our primitive collection I'm going to go through and create a few more okay so now you can see I have most all of the elements on this page defined into what primitive color it should be using now I just have to actually link these up so for example if I click on this logo here it is using the color orange but instead I actually want it to be using one of our tokens so I'm going to go into tokens and click on Logo since this is our logo same thing with this I'm going to click here and we want to change this to something in our more semantic and we want to change this to heading we'll change this to body this to button this to text button and so on let me show you why this is so powerful let's say we want to change the color of this button but we don't want it to affect the color of this link if we were just using Styles we would have to create a whole whole new style and that would break a lot of the styles that are linked across our website design but because we're using variables we can really easily make this switch so inside our token collection I'm going to go into button and change this to the gray that we're using see how this didn't affect the link or the logo because it's its own token another cool thing I'll point out is that you can actually use this to create light mode and dark mode or any other modes you might need you can do this by pressing the plus button here to create a new variable mode it will automatically copy over all of the same values from your first mode so let's call this one light mode and this one dark mode then I can go in and choose different colors for dark mode then you can select the frame since it has variables with different modes applied to it and across from layer here click on this icon to change modes where we can toggle from light to dark variables are hugely powerful so I've just barely scratched the surface with everything that you can do with them we focused on colors here but you can also tokenize things like text spacing proportions Corner radius animations and more I really encourage you to start taking advantage of variables in figma and hopefully this gave you a good introduction if you're not using Auto layout in figma you're missing out on a huge timesaver there's a reason why professional designers use Auto layout it keeps designs consistent files clean and saves a ton of time if you have no idea what Auto layout is it basically mirrors what a CSS Flex box can do in code it allows you to align and distribute objects within a frame and Define layout Direction padding and the gaps between elements this especially becomes crucial when you're designing something responsive or something that should grow in shrink as your screen size changes the good news is auto layout is actually pretty simple and intuitive once you get your head wrapped around it but there are a lot of properties involved so before we jump into a real design let's get the lay of the land with a really simple example using these shapes here okay so I'm just going to illustrate how Auto layout Works using these simple shapes here so you can get a really visual sort of lay of the land so first what we're going to do is actually frame these together and there's a few ways that we can do that if you're not yet familiar with frames one way is just by selecting all of these and then what we can do is control click and then control click in the layers panel over here and do frame selection and the shortcut for this is option command G so here we have this Frame it's called frame one and we'll just name the frame shape AP so that's one way to do it I'm going to undo all of that and we'll do it a different way so let's say I have a frame already that I want to place these into so I'm just going to hit F on my keyboard or I can come up and click on the frame tool up here and I'm going to create maybe I want it to be square so we'll name this square frame and then we can just drag all of these in so those are the main ways to do it there's also a way to turn on auto layout without first creating a frame the other thing when it comes to Auto layout is it's really flexible because you can have Auto layouts within Auto layouts within Auto layouts and we'll get more into that in our practical example after this but it might just be helpful to show you that you can actually create an auto layout without first creating a frame so I'm just going to drag these in and again I have the square frame but these elements within it are not yet framed but if I just select all of them and go over to Auto layout and click the plus button then it's created a frame that is also an auto layout and that really is just sort of skipping that extra step so I'll come in here and we can name this shapes so now we can really explore what Auto layout has to offer as you can see since I already had my elements aligned vertically they're automatically going to be aligned vertically and we can edit the Gap within those a few different ways we can just hover over the Gap and extend or sort of contract it here we can also do the same thing over here and we can also just put in a value so maybe we want 20 pixels between each so here we have the gap between these so it's saying vertical Gap because these items are already aligned vertically but what happens if we hit horizontal layout they're going to align horizontally and what we can do is also kind of even them out so that instead of them anchoring to the top we can have them anchor to the middle and we can do that by hitting this Center align button instead of the PIN to top button here so I think that looks nice and of course you can pin to any of these and we'll get more into that later now we have these aligned horizontally what if we want them to wrap what if we actually want these shapes to be a lot bigger so I'm just going to click in and make these shapes bigger and so when they're bigger they you can't really see all of them within this square frame so what if I want them to wrap so I'm going to hit wrap over here and then I'm going to take this Frame and make it smaller so that they start to actually wrap and we can see them within in this Frame so now this property changes a little bit too maybe we want to align to the top left or the center left we can really kind of um we can really kind of play around with that and whenever you have these wrapping that also gives you this extra Gap to play with so let's say we want 20 pixels between the items in each line but we want each row to have a bigger space maybe 40 so we can really just get super granular with that as this is now we have it set to fixed and fixed is fine but I want to show you some of the other ways that you can use Auto layout so I'm actually going to undo so that we go back to our smaller shapes we'll zoom in a little bit here and as you can see since I went backwards we went back to the default by default whenever you put something in an auto layout it's going to automatically hug it from the vertical and horizontal what hug means is it's actually going to hug the elements on all of the sides and we can control sort of how tightly they're being hugged so if we come in here to the horizontal padding we can give ourselves let's say 40 pixels of space on the left and right and we'll give ourselves the same 40 pixels of space on the top and bottom and it's actually easier to illustrate this if we give ourselves a background fill so I'm just going to give ourselves a light gray fill here so you can really see what this frame looks like so here's where hugging really comes in handy let's say I want to decrease the space between these to 10 as you can see it made this whole frame smaller because it's still going to hug those contents no matter what those contents are we see this come in handy as well with things like text which I will show you in the next example so that's hug now what if we switched this to fixed width if we switch it to fixed width it's going to get rid of sort of those properties that we were doing before with the horizontal padding so if we just bring these to the left that might be an instance where we want to have them pinned to the left but we also want to have this fixed fixed just gives us the flexibility to make this Frame as long or short or tall or wide as we want without it depending on anything that's inside of it okay so there's one more option here that has not come up yet because you actually have to turn on auto layout on the frame outside of this Auto layout in order for you to be able to see this option so I'm going to click on square frame and I'm going to hit plus next to Auto layout so again by default it's going to make this square frame hug the contents inside of it so it gave us a 153 pixel padding on the top and bottom and 24 pixels of padding on the left and right but I just want this to be fixed I just want this to be let's say 1,000 by 1,000 for our square and then what I want is for this to actually fill the container so I'm going to switch it to fill container and as you can see it's not quite filling it because we've got that border so we can do zero here and it's really going to fill it all the way up so fill is super helpful because it allows for this Frame to be dependent on its parent frame and again you'll see some more practical scenarios for this in the next example but before that I want to show you a couple of things that are just a bit more advanced I guess so what I'm going to do is select on our shapes frame in here and I'm going to go over to the three dots and we can see what we've got going on so we have strokes stacking and aligning text Baseline we won't worry about that cuz we're not using text now but what I'm going to do is actually give all of these shapes a stroke so that you can really see how this works so then we'll go back in and as and by default it's going to exclude The Strokes from the sort of equation here so so what that means is if we have these Strokes on the outside of these shapes those extra pixels on the outside aren't going to affect the auto layout here so let's arrange this so you can really see it I'm going to do hug contents and we're going to make it kind of tight we're going to do 10 and 10 so that exclude stroke means that if we hover over this those 10 pixels that I put on all of the sides are not going to count the Border as you can see when I hover over that shaded area covers up that border because it's not including it in those 10 pixels but by contrast if we click on this Frame again go back into our stroke properties and do include and layout it is actually going to increase that spacing because now if we hover over these 10 pixels are not overlapping with that stroke so that is stroke and now we're going to do stacking so if I push these together and have a gap in the negatives that is going to make them stack so I'm going to give this a gap of oops -30 which means that they're going to overlap by 30 pixels and so if we have that and we go into these three dots and do Canvas stacking right now we have last on top you can change it to First on top so you see now that the star is on the top instead of the hexagon being on top okay okay I think that pretty much covers the basics so now let's dive into this more practical demo and what we're going to do is recreate this table using Auto layout and it might look complicated but I promise once you get the hang of it it's really simple and you'll be able to use these Auto layout techniques with literally any layout it's super super helpful okay so let's start with each line before we can even get to this whole table we need to create the individual rows so I have over here what content needs to be in these rows so what I'm going to do is come over and hit Auto layout on with all of that content selected I'm going to call this row and we're going to change this from vertical to horizontal as you can see we're already kind of getting there now I'm going to give ourselves a white background so that we can really see um how this Frame is coming coming together and I'm going to also align these to the left but also pinned so that they are Center aligned if that makes sense so if that's not clear at the moment they are aligned left but they're also aligned to the top right now I want to align them so that a line could cut through the center of all of the items that's what this is going to do we still want it pinned left but we want them Center aligned with each other okay so that's looking good so far but we definitely need some padding on this let's give it 24 pixels of padding on the right and left let's see what eight looks like on the top and bottom close I think maybe 12 would be better okay that's looking good but they're all really squished together as you can see and we don't want that so let's give ourselves instead of 20 pixels in between each of these a 20 pixel Gap let's give ourselves more like 40 see what that looks like okay 40 is fine but we could definitely use more let's actually do 80 80 is looking good and then what I'm going to do is actually get a little bit more granular with the padding I'm going to go into individual padding and I'm going to add more to just the right side because as you can see we want like more space here we don't necessarily want this to be at the very edge so instead of 24 I'm going to add 80 here okay and that's looking pretty good so now we want to make sure that as we change the content in