Mastering Autolayout in Figma! Extended Video

hey guys in this video i'm going to be talking about auto layout and before i begin i'd just like to say that i have received a bunch of comments from people saying that i'm speaking too fast so i'll try to slow down a bit and try to explain things in a much more slower fashion which as a result would obviously increase the size of the video but if that's what you guys want then i'm all for it so basically what is auto layout so auto layout is a property you can add to frames and components and obviously the component itself also needs to be a frame so basically it can only be applied to frames it lets you create designs that grow or fill or shrink to fit and reflow as their contents change this is great when you need to add new layers accommodate longer text strings or maintain alignment as your designs evolve so what can you do with auto layouts well the first thing that you can do is you can obviously create responsive layouts the second thing that you can do is you can create elements that grow or shrink as you edit the content that's inside of it the third thing you can do with auto layout is you can create elements that grow or shrink based on the parent so note that they can grow or shrink based on the content that's inside of it but they can also grow and shrink based on the parent that's around them so that's like really powerful the fourth thing that you can do obviously there are a lot of things that you can do but these are the things that i've pointed out you can create complete layouts using auto layout and that makes it much easier to move things around and i'll tell you what i mean by that later in the video but first of all let's just go ahead and actually create an auto layout so how do you go about creating an auto layout well you can obviously like i can create a button and just show how that's done so imagine this is a button title and let me just reduce the font slightly so imagine this is a button title i go here and one way to actually create an auto layout is to press shift a when you press shift a if you notice on the left hand side it basically creates a frame around the text layer and it converts the frame into an auto layout you can see that the auto layout is applied here if for example i did not want it the frame if i did not wanted that to happen automatically i can add a frame around it and then i can create click the plus button here and that's going to make this particular thing in auto layout now let's just go ahead and actually just create it using the shift a key that i mentioned earlier so now that i've created an auto layout it automatically applies some padding and some properties here which we're going to discuss in detail but basically what i'm going to do right now is i'm just going to give this a blue color so we can see how it functions i'm going to give this a border radius i'm going to give change the black to white and basically here we have our button now what it does is what this auto layout does is it actually now respects the content that's sitting inside of it so imagine if i change the button title to just button as you can see the whole frame shrinks based on the content that's living inside of it similarly for example if i increase the content this is going to be a title that's really long as you can see the button is scaling really well one other thing that you can do is if for example you actually had a frame here around the button and you also wanted to create uh the frame or make the frame itself an auto layout as well i'll i can just do that by pressing the shift a key now here we have the button it's sitting in an auto layout and the button itself is an auto layout as well so imagine if i wanted to add another button i just i just duplicated that button and it automatically goes beneath it so this is going to be the button underneath and that's the button on top so as you can see the the content is also shrinking but if i personally do not want it to shrink i can just either go here and i can say it's going to be fixed with and fixed height or i can manually resize it to whatever it is that i actually want so now if i change the content it's not gonna reduce in size or anything because now i've made the auto layout that and the frame that was auto layout of a particular height and a particular width and i can now easily move things around so imagine if i wanted to move the button underneath on top of the button that's sitting above it i can basically use the arrow keys i can just press the up key and it's going to move it above i can press the down key and it's going to move it down so that's really important now a few things in terms of the auto layout properties the first thing that you need to know about as you can see on this macbook pro 1 we already have an auto layout applied and the auto layout can also be seen when you have the icon that's on the left in the layers so if this is not a component you would basically see these bars and these bars represent the direction of the auto layout so if you have elements inside of it it's basically saying that the elements will flow horizontally if i just hover over here it says horizontal direction and that's what you see here you see the two elements sitting side by side horizontally if for example i moved them moved the direction to vertical you can see that these elements are now positioned vertically so this is basically just changing the direction of elements and where they and how they sit next to each other whether it's on the vertical axis or whether it's on the uh horizontal axis the next thing we want to talk about is the property called space between so this second property is called spacing between items so as you can see the circle and this rectangle are sitting literally on the edges of each other right now if i wanted to personally apply some spacing in between them i can say that the spacing in between the elements is going to be let's say 24 and that particular spacing is now applied i can also drag the spacing to actually change it to whatever it is that i want but my recommendation would be not to drag things around you can still drag them if you want to get a visual representation of how that may look like but always try to apply the spacing in either multiples of four or multiples of eight so i'm just going to make that 80 and here you can see we have the spacing in between them now currently since these elements are sitting horizontally in the horizontal direction the spacing in between them is going to be on the horizontal axis but imagine if i changed this particular uh section or this whole auto layout to be at a vertical direction the spacing is now going to be vertical so basically it depends on the direction where that particular spacing is going to be applied if it's horizontal the spacing would be applied horizontally in between the elements if it's vertical obviously it would be applied vertically in between the elements so here we have it the other thing i want to talk about is packed versus space between now this is an extremely important property that i have seen a lot of people not use and what this basically says is it says that these elements that are sitting together are going to be packed so for example they're going to be really close to one another and they're going to respect each other's sizing and the space between that we talked about previously so imagine i'm going to just apply some space between which is going to be 24 and as you can see it's packed so pack basically means that they're going to be sitting really packed and really crunched together and really close to each other um and that's basically what pac does and packed and packed is the default property for auto layout but there's a very important property that you need to know about and that is space between so what space between does is it actually moves it actually increases the spacing in between the elements to a maximum to for example to the highest it can be so with respect to the actual container or the auto layout so imagine if i wanted this circle to be on the left and i wanted this rectangle to be on the right i can obviously do that by manually adjusting the padding here i can say maybe 900 and i can obviously experiment to experiment with it but instead of doing that if i wanted one element to be on the further left and the other element to be on the further right i can just go ahead and i can say space between and that way these elements are going to have the maximum amount of spacing with respect to the container and they're going to be positioned accordingly similarly if i changed the direction to vertical you can see the spacing in between these elements are is the maximum amount of spacing that can be applied based on the size of the container one other thing for example if i actually now duplicate this ellipse and position it in between you can see that it's automatically in between because the sizing of this circle and this is equal and then obviously this now goes in between and it's saying that i want to have the maximum outer spacing here and here and both these spacings are going to be consistent obviously i can keep on duplicating items here and that's just going to keep on adding these items and and it's going to auto adjust the spacing based on the size of the container as you can see i'm doing that and it's manually doing and the adjustments of the spacing and this is really important if you want to if you want a layout that's proportionate to the size of the container and also scale accordingly this is really important now imagine if i wanted to i'm just going to go ahead and i'm going to remove these circles i'm just going to have two circles or three circles or three shapes basically and then if i resize it i'm resizing it and as you can see the layout is also responsive right because now it's respecting the spacing the cont the container and the amount of space that can be in between now imagine if someone wanted to apply this particular thing that i've applied here via spacing where the space in between properties they actually may go and say okay it can be 800 or maybe let's just reduce it maybe they say that it's okay somewhere along those lines and this looks good right this probably accomplishes the same thing right but it doesn't because now if i resize the container the spacing in between the elements is not responsive it's fixed and now this what what's basically being said is irrespective of how big or how small the container is i'm going to remain this padding or the spacing in between these elements is going to be consistent so now if i resize it as you can see some of the elements actually go outside of the container which is obviously not what we want and which is usually something that we really want but there are going to be cases where something like this is still needed which i will talk about later but basically always try to use space between when you have a layout like this there's also another easy way to use space between and that's basically just adding the auto keyword here and that's going to automatically change the spacing to space between and that's really powerful one other thing i also want to talk about is the padding so for example this the i have these two elements here and now imagine if i wanted to apply some padding on the top and the left or maybe on the right and the bottom or whatever it is i can basically go here and i can see the padding at the top can be 24 and the padding on the left can be 24 and as you can see the padding on the left and the right so basically the padding has nothing to do with space between uh this spacing in between obviously the spacing in between is reflective of the space in between elements you can still apply the auto thing and that's going to make it auto but as you can see here i have the 24 pixel spacing on the top 24 on the left 24 on the right and then 24 are at the bottom and that's and now basically the space in between properties obviously you're going to respect that it's going to apply the padding around the objects and now basically anything like the positioning can vary now i can move it vertically and as you can see the spacing is reflected and the padding is also reflected so that's really important i'm going to go ahead and change that to 24 change the direction again to work to horizontal and one other important thing that i want you to know about is the uh is the direction or is the is the alignment of these elements so this is really important this particular thing also this particular option also allows you to configure the padding of the element but it also allows you to adjust the alignment of the elements so by default uh auto layout is always going to align your elements at the top left but imagine if i wanted them to be at the bottom left i can do that imagine if i wanted them to be at the bottom middle or at the at the left middle or whatever it is i can do that imagine if i wanted them to be at the center or the top center or the bottom center or whatever it is i can configure the padding or sorry the alignment of these elements at my will and that is really important right you definitely want to do that so so these are a few things that i really need really want you to know about there's one other important thing that i haven't added a frame for which i'll do just right now and that is the fill container hug contents and contents and fixed width property so this is something that i want you to know about and let's just go ahead and actually experiment with it right now so imagine if i instead of i'm just going to remove these uh this circle and i'm going to see i have a uh two rectangles basically i think working with rectangles for this property is going to be better so imagine i have a few properties which is the fill container the contents and the fixed width property what i can do with it is basically and let me just go ahead and actually copy the buttons we created i think i deleted them so i'm just going to create a button again so this is going to be our button i'm going to change the font size to maybe 24 gonna create an auto layout and i'm going to create a button with this color and a button with this color this is going to be our button yellow and this is going to be our button red and i'm going to go ahead and i'm going to remove these so basically since this particular element is an auto layout this whole container is an auto layout that actually allows me to resize these buttons according to the container right so what i can do is i can say that this particular button the button yellow should take the maximum amount of spacing that's available if i want to say something like that i can actually go here right now it is sitting at hug contents and hud content basically means that it's going to respect the size of the the content that's inside of it to determine its width or height right so by default it's going to be a particular size based on the content that's inside of it but imagine if i wanted to say forget about the content forget about the contents that's sitting inside of you i want you to be fixed at a particular size so in order to do that i can obviously go here and i can say fixed width but you don't have to do that if you just want it to be fixed at a particular width you can just resize it and i can say i want to resize you to let's say 280 or something and i'm just going to go here and i'm going to say 280. i also want to say that you should be centered the text inside of you should be centered which is something that we talked about previously in the alignment so note that here i'm changing the alignment of the button i'm not changing the alignment of the container i can do that too if i want to but i'm basically changing the alignment of the button so basically anytime you have an auto layout you can change the alignment of the content that's sitting inside of it and then obviously you can do the same thing with the other auto layouts that are sitting inside of it as well now imagine now this is fixed width it's not respecting the content if i increase the content to be something really large it's going to just the auto layout is not going to respect that and basically using fixed width is a mistake in my opinion but there are going to be cases where you're going to need it for example you always need a 40 by 40 circular button and in that case maybe it's fine right you don't want it to scale based on the parent or based on the content that's inside of it and that's perfectly fine but for elements that need to be responsive for elements that need to respect the content that's sitting inside of them never use fixed width okay now coming back to the point basically if now for example i wanted to say that this button the button yellow should respect the container or the size of the container that's around it i can go here and i can say it should be fill container and once i do that it basically says that this button is going to take the maximum amount of spacing that's available considering the padding that's around the container considering the spacing in between these elements and considering any other elements that are sitting across it or besides it so imagine if i duplicated this button red and basically moved it on the left as you can see this button yellow is still actually taking the maximum amount of spacing that's that's available in the container but it's also respecting the elements that are sitting on the left and the right of it now imagine if i resized this container you can see that the button yellow is actually respecting the available spacing that's there and that is really important this is something that you guys should know similarly if i wanted the button yellow to actually take the maximum amount of height i can do that too i can say that this should be fill container on the vertical axis as well and now it's vertically also taking the maximum maximum amount of spacing i can resize it and as you can see the button yellow is actually responsive and it takes the height and the width with respect to the actual container and the size of the container so these are a few things that you need to really know about and i think i've covered most of these things but i will just showcase a demo of how you can actually create layouts using auto layout so basically this is an application that i created and i have two pages here so this is the main page and i'm just gonna go to the main page i'm gonna open the layers panel so here you can see i have a footer right so here we have a footer with let's say four icons now imagine if i and the this particular photo footer is an auto layout as well i haven't created made it a component and you can obviously see that it's not a component but when it's not a component you can easily see that an auto layout is applied by use by looking at the looking at the icon there so now if i wanted to say hey i wanted to move move this cards icon on the right instead of the instead of the left i can just use the arrow keys to do that now imagine if this was not an auto layout how hard would it be there's obviously one way in order in order to swap these things but you can and i'm just going to showcase that way so imagine if you have a um and three objects here and i'm just gonna give them like some different uh colors so imagine you have these three objects and you wanted to move this particular object the bottom one in position of the center one and the center one at the position of the bottom one you can basically select both of them and you're going to get these round circles and then you can basically move them here and that way the elements are now swap swapping positions but it's much easier and this sometimes breaks imagine if all of these were just auto layouts this whole thing was in an auto layout i can basically just click on it i can move it at the top i can move it at the bottom it's really easy so always try to use the auto layout thing i can easily move the cards thing around and now coming to the whole layout now i haven't added the footer to an auto layout container because obviously i want the footer to always be at the bottom and that's an intentional decision but i have added all these other things inside of a content of a content auto layout so imagine this whole thing is an auto layout as well this intro section this intro section i'm going to change that to intro section this is going to be the welcome message so imagine if i wanted the welcome message to be at the bottom of this intro section i can basically just move it right i can move it quite easily similarly if i wanted the monthly savings to be at the middle i can do that imagine if i wanted the cards to be at the middle i can do that too and i can again reposition it based on whatever i want and imagine and remember when i mentioned that sometimes you may actually want to give a specific spacing in between and allow some of the elements to actually go beyond the container so here's an example of that i have a few options in my application and some of the options are actually exceeding the width of the container right and and the reason for that is i want this effect this particular effect i want this container obviously is positioned accordingly but i wanted this particular element that's outside of the container to have some sort of an effect that there are multiple options available across the screen now quite easily if i wanted the cards to be on the left i can move them on the left and i can rearrange things based on whatever it is that i want and this is the power this is the power of auto layout auto layout is not just used for buttons or things along those lines it's used to create complex layouts which allow you to actually change the positioning of elements or play around with things similarly as you can see the space things is also an auto layout i can basically move the plus button further on the left if i wanted to i can move it on the right i can change quite easily change the the position of the pictures similarly in this recent transactions thing i have apple i have dribble and i have amazon i can move these things around i can move this whole recent transactions thing at the top if i wanted to and this again my friends is the power power of auto layout if you're using auto layout i don't want you to just go ahead and actually just use it for buttons or anything i want you to use it to create these awesome responsive layouts even the padding my friends even the padding that i've applied all around the screen is actually coming from auto layout if i remove the padding as you can see everything scales proportionately instead of this one because i haven't made it a fill container so i'm going to make it a fill container and what i can do is i can also this particular thing isn't an auto layout so i'm just going to make it an auto layout i'm going to actually position this icon at the bottom and i'm going to say this is going to be auto so now that i've made made it auto this thing is further on the right this thing is further on the left and now i can just go back i can say that i want to apply the spacing that that i had previously so i'm going to say the spacing all around at the top and the bottom should be 24 and at the left and the right should be 32 or maybe it should be the other way around so the top and the bottom if i actually apply 32 here it's going to apply 32 across all of the items and i don't want that i want the top and the bottom to be 32 but i want the left and the right to be 24 and you can give that by using the comma key that i that i've used here and as you can see everything is now respecting the auto layout that i've applied everything shrinks accordingly and it's really easy to even play with the padding now imagine if this was not an auto layout i'm just going to remove this order layout i imagine if i wanted to change the padding on the left of all of these things to be 32 so i can go ahead and i can make it 32 like this and try to experiment with things i can also change this to 32 i can also change this to 32 and you can see the amount of effort that's going to take if this was not an auto layout and unfortunately i'm going to be really honest with you guys a lot of experienced designers don't do that one biggest mistake that i see i i would wouldn't even call it a mistake one biggest blunder that i see a lot of professional designers make and actually not even use auto layout not even use a frame to begin with they instead group elements they just press command g to group elements and that's really painful to see i mean i can't tell you how painful it is for me to see experienced designer using the command g key or the control g key to group elements if you have grouped elements you cannot position them so for example if this was not an auto layout if this was just for example an element you can still have a lot of things you can apply an auto layout to it you can apply some properties to it so on and so forth but imagine if this was not that if it was just a group i can't really apply a fill to it right in that sense in the sense that i can't in to the actual auto layout if i for example like there are a lot of things that you cannot really do with groups you cannot apply the auto layout you cannot apply properties to it correctly even right here like for example if this group is actually just a group i cannot position elements within a group using the the pinning feature that figma has so imagine if this was a frame instead of not a group i can actually say that this photo i'm going to select the photo sorry let me just select the photo this photo is actually going to be at the top and the left and this text can be maybe on the right and the top this particular feature will also not be available if this was a group and not a frame never mind like don't use well i would suggest not even using frames when you're creating layouts like this obviously use frames and then convert them into an auto layout but never ever use groups for anything i would say just forget the keyword command g or control g i don't think you should use groups in any circumstances okay so that's basically it i hope you have a clear idea of what to use auto layout for and some of the features that auto layout auto layout has if there's anything that you would like to know apart from this definitely let me know and that's going to be it for this video do subscribe to hit the bell icon and i'll see you in the next one take care

Channel: AM Design

Views: 485

Keywords: figma, design, layout, product design, auto layout, tips, tricks, UI design, ux design, Auto, auto layout Figma, Figma Autolayout, Figma tutorial, tutorial figma, how to use auto layout, how to use autolayout figma, figma autolayout tutorial, tutorial autolayout, autolayout tutorial, app design, asaad mahmood, asaadmahmood

Id: hicPvJDH7J4

Length: 26min 6sec (1566 seconds)

Published: Sat Oct 30 2021