Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial

or there is one of figma's most powerful features which you cannot to frame some components so you basically Define how you want your designs to behave when change is made for example if you add more text or you are a new element or you resize the frame you set the rules on how change will affect your designs and then you can freely modify it without having to manually rearrange everything again it takes a bit of a learning curve to master it but trust me once you get a grasp of it your designs will be much more responsive and you will be able to design much faster I'll make sure to go over everything you might need to know to really comprehend on a layout so you can start using it today I really want to go over everything with you guys so you have a very good understanding of everything Auto layout related so first we will be checking what can be done with auto layout then we will be going over every feature that auto layout has and finally we'll be going over some practical examples okay so the first thing is how to actually add Auto layout to something so basically you can select several elements and click the plus icon on the auto layout section or you can click shift a which I would recommend you learn that shortcut because you will be using this a lot you can do this both to several elements or you can create an online for a single element shift a and you will be accessing the other layout features okay so what can be done with auto layer the whole point of this is letting the auto layout figure out the arranging of the elements so you set the parameters beforehand and then you can modify the design add remove or or edit without you having to organize everything again so so I can add a new object to my other layout I just have to drag and drop it and it will figure out the the correct spacing I can Nest an auto layout frame inside a new water layout frame so if I copy this outer layer and then select this other layout and paste it it will arrange it inside of that frame you can also duplicate elements inside the auto layout so I can grab the a I will click Ctrl D which duplicates and it creates a copy inside the earlier which follows the same Arrangement and I can easily edit that so I don't have to create everything from scratch I can also arrange the order of them very easily so I if I want this element to be the first one and this is the second one it's very simple to do and finally I can remove objects without it affecting my layout okay now let's go to the earlier properties I will be going over everything you can edit when you assign the earlier property and I'll be grouping everything by categories just so it's more easily for you to understand so the first section is the layout flow on the first properties direction from this section you will be able to pick in what direction the elements will be arranged so I can make it horizontal vertical or have the elements wrap around to the next line when they don't fit the given space so if I shrink this the element will move to the next line next I can Define the canvas stuck in order so I can make the first one on top click the three dot menu or make it the last on top you can edit the order of your Elements by directly selecting one and moving it around with your arrow keys or from the layers panel you can also find the absolute position feature to do this you have to have an auto layout frame click one of the elements and this icon will appear which is the absolute position icon once you click it you can freely move around that element to any place you want next we have spacing and the first feature in here would be distribution or gap between elements your first option in here will be manual or specified spacing so if you go to the gap between elements input and you type 24 you will be manually setting setting the value between those elements or if you want it to automatically adapt according to the size of the frame that contains them then you will click the drop down menu click Auto and then if you resize the frame that contains them space will automatically adapt next we have padding we can set whatever value you want to surround the element and you can also use the padding element to create a margin around the the whole element so if I apply another Auto layout frame to this you will see transparent space around it find it in the spacing section you will have another option which is Strokes in the layout so this is how it looks when it's included you can see the stroke is inside of the frame but if I set this to excluded again from the three dotted menu I will click extrude from layout you will see that the stroke is no longer considered inside the outer layer okay on to the next section alignment the first feature of alignment will be setting alignment on child objects so I gave this a layout a background just so you can more easily recognize what's happening okay when the gap between the elements is defined this is called packed so the elements are packed together and you can Define nine alignment points inside of the auto layout if you set the Gap to Auto in this case the elements will cover the whole available horizontal space and you will only have three alignment options which is up Center or button next you can toggle off or on the text base alignment so in this in this first example it is turned off and the elements are Center aligned if I duplicate that go to the three dots menu and activate it but will be used to align the elements is the base of the text another shape that contains them okay on to the next section which is resizing so when you first apply our layout to something the default resizing property selected will be hog so what this means is there are layout frame will hog the content so let me give that a feel so you can see it so if I keep typing in here the frame will grow to contain there then if you take a frame which is set to hog or any other property and you manually resize it so if you grab it and size it yourself you will notice you will automatically be changed to fixed this will also happen if you manually enter a value in its width or height next is the fill container so for this property to be available this must be inside of another container so let me give this an other other layout frame shift a you will notice as I resize the outer frame the inner one stays the same size because it is set to but if I set this to fill container it will automatically fill the outside frame so no matter what size I make it it will follow [Music] and finally the Min and Max Dimensions let me grab this now let's assign this a minimum dimension of 200 pixels and a Max dimension of 250. so you will notice I assigned these properties to the inner frame but it's still set to fill so it will still try to fill the container but it will respect the Min and Max Dimensions as I said so you will notice it won't go below 200 pixels and it won't go over 250 pixels okay finally let's go to the examples I divided this in three categories the first one being an easy one then a medium and then an advanced one I try to make this very common components so you are very likely to use inside your UI designs so the first one is a very simple button with an icon so I already placed the icon in here you can grab those using the iconify Plugin or you can download them you can search for Icon libraries inside the community section there's a lot of ways to get icons by the way I will be making up useful plugins video very soon so stay tuned for that okay so the idea is trying to replicate the elements on top uh try to follow along and try to do this by yourself when we're done so let me write a text let's make this 24 medium set the values to be right okay once you have the text and the icon with shift we will select both elements then shift a to create another layer and the first thing you gotta set is the distance between the elements 10 pixels so set that let's set the alignment to Center let's give this a fill color stroke let's adjust the padding which is 40 on the sides and 16 on top and bottom and finally let's adjust the Border radius which is 8 pixels and there you have it okay onto the medium difficulty let's try to replicate this enough menu so let me grab the logo let's grab the button we just created okay so we're using Auto layout you have to use logic in the situation and first analyze what you're trying to achieve and you also need to analyze uh how how the elements must behave when resizing so your designs are always responsive to any kind of screen so if we check this element you will see if I grow it horizontally it makes sense for the logo to stay on the left and then the text links on the bottom elements stay grouped to the right so let's try and replicate that okay so the first thing I'll do is creating the text link so let's complete one and then duplicate that so we don't have to set the properties to all three links just to one of them okay so let's give this element on other layer so personally what I try to do always when I have a button on an app menu next to some text links is try to emulate the padding of the of the bottom in the text link so the spacing between button and text links doesn't look weird so if this one is 40 and 16 I will try to I will basically do the same for this if it looks too weird just adjust it accordingly but that's kind of a rule of thumb for this case okay now we have our about us text link created so I'll drag it while holding shift and ALT and then hit Ctrl D to duplicate it one more time and you can see all three of them keep the earlier properties I said okay now to achieve the resizing properties of the number you will have to think of this as two separate groups the first one being the logo in the left and the next one being both the bottom and the text links on the right so the next thing I will be doing is grouping all these elements with auto layer manually set this to 24 right okay so now we have our group consisting on the elements that will be anchored to the right and the other group which is just the logo to the left our next step is to create the other layout that contains both the logo on one side and the group of button on textlings on the other so you can now think of this as one single element and this is another single element so select both of them shift a Center align the center align this as well this looks fine but if you try to resize it you notice what's wrong with it it doesn't grow accordingly so you will need to set this to auto and now it works perfectly and there you have it you have an order Group which spacing is set to Auto so the space between the logo and this whole group and then you have this inner group which spacing is set manually to 24 pixels because you don't want the gap between these elements to grow according to the screens because they might get to a point where they are so separated that they don't look like a group anymore so you're gonna keep that Gap consistent the one that should adapt is this one okay let's get in some final details uh this actually you can notice it has a padding and hours doesn't so it's 24 on the sides and 12 on the top give it a wide feel and give it the drop shadow by the way I have I had some Styles already set up in this like the colors and the drop shadow just to save you guys some time okay and finally let's move to the advanced section uh basically a card like this one is one of the most complicated things you can do with auto layout but once you can do this you have basically mastered this feature so I really encourage you to try and build this by yourself so let's analyze this and when you see me manually resizing things I'm basically recreating what will happen when the screen changes size if you have for example a grid of these cards you want those cards filling the screen according to the dimensions of it so in this example these these cards should grow in size accordingly to the screen so you see if I make this card bigger this favorite icon will stick to the right side of the card and also the text will try and fill it you see if I shrink it the picture will shrink in size the favorite icon will still be anchored to the right side but it will obviously shrink to keep the distance from it and the paragraph will also shrink so the text will start going to the next line also you will notice when I shrink it below the size of the of the frame that contains the chips they will wrap to the next line okay so let's get started I'm gonna grab this picture I'm going to start creating the chips so this is a very cool little trick if you want to copy the properties of something you can direct select it with control then Ctrl alt copy select the element in which you want to paste those properties and Ctrl alt paste and you see I get the visual properties of that text our layout fill color padding and Border radius okay I have this first one then let's duplicate it to keep the properties and edit [Music] set up download layout for these three so as you saw in this case we need to wrap to the next line when the space is not enough so let's skip that you don't see it automatically wrapped because they fit in the space but if you shrink it you will see it's working properly [Music] Ctrl alt copy Ctrl alt paste and I will use my lorem ipsum atom just to generate a paragraph for this you can install that from the community it's called Laura mipson you just have to create a text box open the add-on Auto generate and it will create that and finally let's scrub the heart icon and paste it somewhere in here [Music] okay next let's make the header which is the skater's name on our layout frame with the icon and set the gap between to Auto so when we resize it each of them is anchored to one side next let's scrub the header with the icon the year and the paragraph term in the paragraph and create one frame for that that 222 on the vertical spacing and then group that with the chips which is set to let's just make it 38 okay let's check what we have in here so I have to make this fill container so it grows accordingly to the whole group also this fuel container so when I resize the frame we should have the correct Behavior we have to set this to fill container for it to work and there you go let's now give it correct fill 24 24 on the padding color and now let's make it another layout frame with the picture let's Now set the gap between those to zero let's set this to fill the container so you always have to test your components you're building so you have to manually resize it and check Its Behavior if it's not working as intended you have to go back and check what settings you missed in this case I missed fuel container on this one let's add the effect the radius which is 12 you will notice if I type 12 in here click enter you will still see no round that's because I have two active clip content so the con so the content outside of that clipping is no longer visible oh everything seems to be working fine now but you always have to remember to check it both horizontally and vertically you can see that vertically it doesn't work you you see if in the in the example when I shrink this the the picture shrinks but the the card says the same so I'm gonna set this to fix height and then set this to fill container so when I move this yeah we get our desired Behavior if you want to go an extra step let's set a minute Max with for this main width of 300 oh and actually you can see I screwed up you see the actual content the outer frame is actually set to fill but the paragraph isn't so let's make it it's also said a Max width of 500. okay and there you have it so that's it guys remember our layout is a very potent feature figma has I really encourage you to try to build some stuff by yourself is that the only way you're gonna completely rub your mind around it and once you do so you're gonna see your designing capabilities expanding so much you're gonna be able to design faster are you going to be able to design everything that's on your mind and this key to opening up the whole potential of figma to you so go ahead and find some cool reference and try to build them yourself and see you on the next one [Music] thank you

Channel: Santi Villegas

Views: 593

Keywords: Figma Auto Layout, Figma tutorial, Auto Layout tutorial, Figma design, UI design, Web design, Responsive design, Design workflow, Figma tips and tricks, Figma 2023, Design tools, UI/UX design, Design tutorials, Figma techniques, Pixel-perfect design, Design principles, Design best practices, Design efficiency, Adaptive layouts, Figma design tutorial

Id: fXl3WY_EzHU

Length: 17min 53sec (1073 seconds)

Published: Thu Jul 06 2023