Learn Figma Auto Layout in 30 Minutes | FREE COURSE

figma is currently my favorite tool for UI design and there are some very good reasons for that but the main one the main reason I use figma is the auto layout feature with it you can group elements in a way that allows you to quickly align them but also add spacing between and padding around those elements you can also easily change the order of the items in that group and you can switch from horizontal to Vertical display with the click of a button now I strongly believe that if you're going to use figma for UI or ux design then you need to learn Auto layout it's going to make your life 10 times easier it's not that difficult to learn and it's exactly what I'm going to show you in this course and I'm gonna try to do it in about 30 minutes give or take we're gonna start by learning how to add Auto layout and where we can add it then we'll talk about space facing padding and Alignment we'll have a look at the available spacing modes and finally we'll discuss a resizing in regards to Auto layout but hey if we're just meeting my name is Adi Portillo I'm a web designer slash developer and my goal with these videos is to help you become a better web designer or developer now before we get started with this course I want to quickly tell you about a resource that I use very frequently and that is envato elements here you can find tons of useful resources like fonts icons UI kits WordPress themes music stock photos and videos illustrations and much more for creatives like me this is an amazing resource because all the assets have simple commercial licensing and you're not bound to any contract therefore you can cancel whenever you want so if you're interested check out the link in the video description and with that said let's get to figma's Auto layout and we'll start by learning how to add it and where that's coming up so let's jump straight in here I have a simple demo prepared for you I'm gonna assume you are familiar with figma and that you already have an account and you know your way around the software so for our first demo we have these four boxes and before adding Auto layout to anything we need to know where we can add it well currently Auto layout can only be added to frames like the one that I have here and components for the rest of this course we'll only be dealing with frames so just keep that in mind you cannot add Auto layout to groups for example you might be tempted to think that but it's not possible Auto layout can only be applied to frames and components so with that said how do you add it well there are several ways first of all you need to have at least one element selected so assuming that I want to create a frame with auto layout with these four elements I'm going to select all of them and from here I can add Auto layout the following way I can right click and choose add Auto layout I can use the shortcut key shift a I can even go to the menu inside figma and I can go to object add oral layout and by doing any of these three actions figma will automatically create a frame for me with the elements that I selected as you can see they are inside this newly created frame and that new frame has Auto layout added just like you can see here in the inspector where it says Auto layout now if I have a frame with auto layout and I want to remove it I can simply right click remove auto layout or use shift option A on on Windows it it is a different shortcut or I can click the minus sign in the inspector but of course I can also go to the menu object and remove auto layout there's also a fourth way we can add Auto layout so let me undo here a little bit let's say I selected these four elements and I can make a frame with them initially and then with that frame selected I can right click and add Auto layout just like I would normally or I can go in the inspector and click the plus sign to add Auto layout from here now let's talk a little bit about the direction notice these four items are now stacked vertically right because by default figma set them to a vertical Direction and figma does this automatically depending on how your items are arranged on the page so for example here it made sense to create a vertical Direction because three of the items or actually all four of the items are kind of stacked vertically even though they're X values are a little bit different but if these items let me ungroup them if these were placed something like this than creating an auto layout frame with them would set it to horizontal so it really depends on um on how your items are initially laid out now regardless of how the direction is initially set I can always change it from horizontal to vertical or vice versa by using these two controls right here and as you can see by creating this frame with auto layout figma automatically aligned and positioned these elements at equal distance and the size of the frame is determined by the size of the items inside plus the space between them so that's how Auto layout works now before I wrap up this quick lesson I want to briefly mention absolute positioning this is a killer feature in uh in figma Auto layout basically you'll see that if I'm trying to move this element inside the frame its position is constrained so I can use my arrow keys to shift its position within the frame but it does so while maintaining the same spacing between it and the other elements that means I cannot freely move this element see it kind of snaps into position but there is a way I can do that and that's by applying an absolute positioning to the element that I want and you do that by going to the inspector and clicking here where it says absolute position doing that will actually take that element outside of the normal flow of the frame and it allows you to freely move the element wherever you want the frame will of course adjust its size because it doesn't take the orange element into consideration anymore only the three green elements are now dictating the size of the parent frame and if you want to bring this back at any point you can just toggle that button and it's now back into flow and the frame is resized according to that element all right so now that we have the basics taken care of let's move on and talk about changing the spacing between items and also uh the padding around items in an auto layout frame that's coming up let's consider the following example I have a simple menu right with four menu items now to make sure that I have the same amount of spacing between these items I can do it by hand of course I can select this one measure the distance until uh the one under or to the one on its left and once I'm happy I can move on to the third one do the same thing and do the same thing here right and that works but next time I add a new menu item I'll have to do that all over again well an easier way to do this is with auto layout so I would select these elements shift a and then I can go in the inspector and I can change the spacing between items figma automatically sets the exact same amount of spacing so if I want 16 pixels here I can do it like that if I want 24 I can do it in figma will automatically set it for me alternatively I can click and drag like this to um to get to the spacing that I want and if I need to add another menu item let's say I'm going to duplicate the contact well I think Ma automatically sets the correct spacing between the new item and the older item in that frame because I have other layout applied which is fantastic and of course when I delete this the frame automatically resizes itself to only reflect uh the width or the dimensions of the uh the content inside so that's one example let me show you another one here we have four elements two shapes two pieces of text and each piece of text corresponds to a particular shape how do we make it so these are both aligned and they have the exact same amount of spacing between them well it's easy with auto layout select these two shift a let's add a correct spacing let's say eight pixels I'm going to do the same with this one shift a use the same amount of spacing and if I want I can select both of these frames shift a again to create a new parent frame with auto layout and I can set I don't know 32 pixels between these two and if I have another item I can simply duplicate this Frame I can enter the new text the new color and I'll be good to go and this is a good example that shows you that you can Nest frames with auto layout so in this Mainframe frame 73 that has Auto layout I have two additional frames that each has Auto layout applied to it with different spacing values and this becomes very powerful on larger projects as you'll see in some of the future lessons now so far we've talked about the spacing between items but what about the padding well this is where the padding comes in and to demonstrate let me show you demo number four here I have a piece of text and an icon and what can we do with this a button right a button is something that you would create in pretty much every single UI design project and a button is actually a component that can be reused right so it will preserve the same style but it will have a different text and figma Auto layout actually helps us tremendously in this regard because here's what we can do we can select these two elements shift a to create a new frame with them I'm going to quickly align them here but don't worry about alignment we'll talk about that in just a little bit I'm going to set the spacing to 8 pixels so that creates eight pixels of space between the text and the icon and now to create the button look I can select the frame and I can add a fill color to it right so let's actually do a little Switcheroo here I'm gonna add the fill color as the blue then I'm going to select these two elements and I'm gonna change the color to white so now to make this button bigger or to add padding inside it I can use the padding feature and in figma initially you have two options here you can set the horizontal padding let's say 32 pixels and that creates 32 pixels of padding to the left and to the right and I can also use a vertical padding let's say 16 pixels so that will add padding inside my frame I can also you know go and change the Border radius and figma actually allows me to change the padding values individually so by setting the horizontal padding I'm setting it on both left and right and by setting the vertical here I'm setting top and bottom but I can click this icon and that gives me individual control over all four sides so I can change the left padding individually the top padding bottom padding and also right padding individually if that's what I want but in my case I prefer equal padding on two opposing sides so this is how you change the padding of course you can also use your mouse cursor to click and drag until you find your correct sizes but there's also a faster way if you hover on a frame that has Auto layout and has padding applied you will see some handles right these pink handles and clicking it will open up a dialog where you can enter a value or alternatively you can click and drag to change the padding value just like so if you hold down shift while doing this you'll change that value in bigger increments in increments of 10. if you hold down option while doing this you'll also affect the opposing side right so now I'm clicking on the top and holding down option I'm affecting the top and bottom paddings if you hold down option and shift you can change all values at the same time so as you can see I'm changing top right bottom and left at the same time so again shift option it's probably a different shortcut on Windows it's probably shift Alt but yeah that's how we do it and if you want to just affect two opposing sides you would just hold down option so maybe on the right side here I want 32 pixels just like that also notice that we have a handle for the spacing between the items right so I can freely change the value like this without having to uh do it manually in the inspector and this is of course applicable to all sorts of things you don't necessarily need to use it for buttons for example if you have a piece of text that you want to nudge just a little bit further down compared to the element above it well you can take that element that text element shift a to put it in a frame with auto layout and give it a top padding it's really that simple but the basics of working with spacings and paddings are these the ones that I just showed you alright so spacing check padding check we've already covered two of the biggest parts of Auto layout third one though alignment is where things get interesting so let's check that out next let's talk about alignment this is um probably one of the biggest feature of the auto layout feature so I guess we can call it a sub feature of Auto layout but either way here's how it works let's say I have four elements of different size right and I want to align them so let's select them shift a to add a frame with auto layout and by default figma set my direction to Vertical that's fine let's work with that for now let me also set a distance here of four pixels so for the alignment we're going to use this box right here on the inspector and we have nine different way of aligning these elements in a vertical orientation by default figma set them as top Center the one that we're interested in here is the center part because this essentially aligns the center axis of all four elements if I were to set alignment like this it will align them based on their left Edge if I were to align them like this it will align them based on their right Edge now what about the other options what if I click here or here or here these are you know roughly the same as their counterparts nothing much changes for example between this this and this in fact nothing really changes and that's because we can't really see the change in this Frame because it's it's set to resize according to the content inside but if I was to resize this Frame I don't know let's make it as big as my my parent demo frame here well this is where you'll see how alignment works because alignment will actually determine how these items are displayed or are aligned inside their parent frame So currently they are aligned in the middle and to the bottom so they are aligned to the bottom of the parent frame if I want to align them also in the middle but to the top I would click this button or I can click this or this if I want to align them straight in the middle on both directions I would select this and I think you you get my point you can clearly see how this works so these are the available options when the frame is in vertical Direction but if I switch to horizontal well the items will now be arranged differently right I still have the same nine options but their Arrangement will be a little different so that's uh the basic use of alignment in figma Auto layout but how do you put this into practice well let me show you demo number six here I have two items a piece of text and an icon and let's say that I want to align both of these elements select shift a and then I can determine okay do I want these aligned to the middle or maybe to the bottom and you know what let me actually increase the size of this icon so you can see what I mean a little bit better if I want to align this in the middle now I can just do this if I wanted to the top I do this right this is a very common way or a common place where you would use alignment and since we're on this topic let me actually show you an additional options for aligning two elements if we click these three dots we can see something here called the text Baseline alignment if we check it well that's going to align the Baseline of the text with the bottom part of this icon and if I can just zoom in here and if I'm gonna drag a guide you can see that the the bottom part the Baseline the text Baseline is precisely aligned with uh the edges of this icon and this is exactly what the um this option is doing it allows you to uh to align the text Baseline if um or align other elements to the text Baseline if that's something that that you want to do usually I don't use it I thought I would mention it since we were on this topic usually whenever I I do something like this an icon with a piece of text for me it's uh it's mostly aligned in the middle just like that let me show you another example let's have a look at demo number seven here I have a menu and I want to align this with this button okay so first of all shifting on the menu and add some proper spacing I can align the menu items vertically like this uh the button here is already a frame with auto layout and what we see different about this one is that we have a a border we have a stroke added to it on the outside of four pixels we'll get to this in in just a little bit but for now let's select both of these shift a and now figma automatically set their alignment to the middle but of course if I want I can change uh the way they aligned they align so using either the top edges the middle or the button the bottom it really depends on what you're trying to achieve now I used this uh demo with the outside stroke on purpose because figma has an additional option here called Strokes and they can be either excluded or included in the layout when it comes to alignment so right now they are excluded which means if I align this to the top you'll see exactly where the top of the text elements aligns with the top of the button but the stroke is not taken into consideration if I'm gonna switch The Strokes here too included now the top of the text will align with the top of the stroke that's the only thing this this option is doing so if you have a layout like this where you added a stroke and you don't get the proper alignment then you can go here and make sure you include those Strokes in the alignment process but of course this only works if The Strokes you are using are on the outside or in the center right so even if I put them in the center they will still benefit from this option but if I put them on the inside then it doesn't really matter if this is included or excluded the alignment will be done the same way and that's how you can align elements with auto layout now alignment goes hand in hand with distribution and in the examples that you've seen so far we've been using the default distribution or spacing mode and that's called pact but that's not the only one so coming up next let's talk about spacing modes just so you understand what I mean when I say spacing modes or when I'm using the term distribution let's select this menu item this uh sits nicely in a frame with auto layout added and it has a fixed spacing set between the items now if I open up the additional menu or the advanced layout settings we can see that under spacing mode this is set to packed and packed will basically use a fixed spacing between items now space between will change that around it will use an automatic space between items space which will be determined by the size of the parent element okay so here's what I mean by that let's click out of this and let's select these three elements we have a logo we have the menu and we have a button so I'm going to select all three shift a and now I have a fixed spacing between them which I can change like this now watch what happens when I change the size of the parent element nothing the three items stay in place right here with the same amount of spacing between them and I have all this free space to the right of my uh of my parent frame but now if I go in and I change the spacing mode from packed to space between the spacing is now set to Auto which means it's gonna be automatically set by figma depending on the size of the parent so the parent resizes and the spacing here is automatically determined so that each and one of these items has equal spacing between it how cool is that also when you're changing the spacing mode or distribution you'll see that the alignment also changes now we no longer have nine options but instead we have three options right we can only align to the top middle bottom in horizontal mode or if I were to switch this to vertical and set the spacing mode again to space between I would have some different options here but just keep that in mind whenever you're changing the distribution you get way fewer options for alignment and this is great for situations exactly like this one where you want to preserve an equal amount of spacing between two or more items you just set it and forget it figma will automatically do it for you so that's one example let's have a look at demo number nine here we also have a component that can be part of a list or a table that has these four columns and by adding Auto layout to it and by setting the distribution to space between I can make sure that these always preserve the same amount of spacing regardless of the size of the parent here I just manually change the spacing and figma automatically reverted back to a packed spacing mode but I can always re-enable it just like that so this is yet another example of where you would use space between now here is something interesting here when I resize this in such a way that items overlap figma has an option called canvas stacking that allows you to determine how these items will be stacked currently it's set to last on top which means the red box which is the last in my layer list will sell on top but if I change this to First on top than these other items will be on top and the red box will be on the bottom just something quick uh in case you ever run into a situation like this uh you know that there is an option to determine the stacking order of of these elements all right so far we've covered spacing padding alignment Direction and distribution but there is one more thing that's hugely important when it comes to Auto layout and we haven't covered that that's called resizing and I'll tell you more about it in the next and final lesson let me start by saying this Auto layout by itself is pretty amazing and super super useful however this next feature that I want to talk about called resizing takes it to a whole different level because it allows us to control the size of the objects inside the frame with auto layout but also the size of the frame itself okay so let me show you how it works let's consider this demo I have an avatar two pieces of text and a button right and I want to first of all properly align these so let's select these two elements shift a and then let's select these two elements shift a make sure these are aligned to the middle and now take these two elements shift a again and let's make sure they are aligned to the left like so and let's add a 24 pixel gap between them now when we're gonna select any of these frames for example this one under the frame section here in the inspector we can see two Fields one is for horizontal resizing one is for vertical resizing this allows me to control how the frame should resize both horizontally and vertically in other words I can control its width and its height by default these are all set to hug or hug contents meaning this Frame will only be as wide and as tall as the content inside for example if I were to change this text the frame itself resized because on the horizontal it's set to hug its contents meaning it's only going to be as wide as this contents and the same thing goes on the vertical as well if I'm going to add another element here the frame will get taller because it has more content and alternatively if I bring this back the frame will resize as well however there are two other options we can consider one is fixed width fixed width basically sets well a fixed width to that frame meaning if I remove this element the frame will still retain its original size and I can even you know change it like so I can resize it manually or I can enter a value here and now that frame will be fixed so no matter what content I have here yeah the parent frame will still be that size now the other option which is called fill container will do the following thing let's select this Frame and set it to fill container this will make it as long as the available space in the parent frame the parent frame being frame 77. okay so if now if I were to resize frame 77 frame 76 which has the property of fill container will also resize alongside with it and I think I can show you this a little bit better by working with this button so this button currently is set to hog contents but if I set it to fill container it's gonna be as wide as the parent container which is frame 78 in this case so if I were to resize frame 78 my button will resize alongside with it how amazing is that and of course this works exactly the same on the vertical side I can choose between hug contents fixed height this time and also fill container right now if I click on frame 77 this has a fixed size but I can always change to fill container and I can do the same for these two text elements right I can change them to fill container so now if I resize the main thing yeah those text elements will resize as well this is super super important when you're creating an element that you want to reuse in other places maybe on different screen sizes resizing with auto layout allows you to to set the various parts of your of your component of your frames to be either a fixed with to either hug the contents or to fill the parent container just like I showed you here let me show you another demo this is demo number 12. so here we have elements of maybe a list or a table row okay we have some text elements here another text here an icon and we also have this kind of badge element that's also a frame with auto layouts so then let's select all of these let's shift a and that created a frame with an equal fixed spacing between elements I can always switch this from pact to space between and this will allow me to basically resize the parent to do this and this is working just fine but let's uh do the same thing for this next row all right so I'll shift a again I'll set the spacing mode to space between and I'll resize this oops to the same amount of space now here already we can see a problem can you see the problem we have some misalignment on this element here on the icon right and that's because uh figma creates the same amount of space between each item when we switch the distribution to space between and it does the same thing here but because the items are a different size the spacing the auto spacing will be of different size and that's why we have a misalignment now how do we fix this well it's very simple we make sure that each items in this frame has a fixed width because currently they are set to hog contents so if I were to set the width here to maybe 140. let's also set the width here oops to 140. I can set the the width here to maybe 70 this is just a text element or actually let's set this to 90 and this as well okay and let's set this to fixed so this Frame let's set it to I don't know 124. and again we'll set this to 124. well you will see that now everything aligns properly and if I were to resize these yeah you'll see that the alignment is preserved regardless of what kind of content I have in here as long as the content uh doesn't go over the boundaries that I set here we're all good the um both of these rows will have the elements aligned exactly the right way so that's one example of using a fixed width and where it might be useful so remember anytime you're working with auto layout in figma yeah make sure you're also uh take into account the horizontal and vertical resizing which can be super super powerful and that's about it for figma auto layout which in my opinion is its best feature uh so I hope you found this video useful I hope you learned something new and that you will be using Auto layout in your own figma projects also remember if you have any questions please drop a comment down below with that said thank you very much for watching this course and remember to check out the Enviro Test Plus YouTube channel for more content like this and also to learn about web design and web development and a whole lot more I'm ADI and until next time take care [Music] thank you [Music]

Channel: Envato Tuts+

Views: 34,487

Keywords: Tuts+, Envato Tuts+, figma auto layout tutorial, auto layout figma, figma auto layout, figma tutorial, learn figma auto layout, ui design, figma, auto layout, figma autolayout, figma autolayout tutorial, figma design, figma tutorial for beginners, how to use autolayout figma, how to use auto layout, auto layout in figma, auto layout figma tutorial

Id: ag0qTaAKqT8

Length: 41min 56sec (2516 seconds)

Published: Wed Sep 14 2022