Figma Tutorial: Auto Layout | Master Auto Layout in 15 Minutes

in today's video we are going to talk about one of the best features of figma called Auto layout which allows you to create responsive elements with ease and with the latest Sigma update this feature got way more powerful and interesting than before if you have no idea what it is and worry because we are we start with the Basics and then we will move on to more advanced use cases so if you are ready let's dive in alright here we are I already prepared this design file this is a practice file that you can download from the link in the description below if you want to practice while you're watching this video alright let's start what's Auto layout well in simple words Auto layout allows us to make a frame or a component responsive so that its size could be automatically adjusted based on the contents of that particular element and it's so helpful and useful because it allows us to create complex responsive layouts so there are many things about Auto layout that you should be aware of and I am going to talk about them one by one so if you haven't used auto layout before don't worry because you're gonna learn everything in a minute alright so here as you can see I have three different titles in order to add Auto layout to anything first you need to select it then you need to hit shift and a alternatively you can just right click on it and then then here you can hit add Auto layout alright but in this case I'm going to select these three titles just hold down the shift key and select them all hit shift and a and nothing changed however if you take a look at the right side you can see that now we have this new section called Auto layout so here we have many different properties we have direction we have space between option we have horizontal padding we have vertical padding and the alignment we have also this Advanced layout settings option and we will talk about all of them one by one so once you added the auto layout to your frame or to your element you need to Define its direction so basically we have two different directions we have vertical and horizontal directions the direction defines the flow of your frame and the elements inside so whether it should grow horizontally or vertically since these titles were placed next to each other figma automatically set the direction to horizontal if I change it to Vertical look what happens nowadays vertically on top of each other the next property is this spacing between items this property allows you to add empty space between your elements so here as you can see in the layers list we have this Auto layout frame it's indicated with this icon and inside we have different children if you consider the auto layout frame as the parent and the elements inside as the children it would be very easy to work with auto layout just keep this concept of parents and children in mind and you will be good to go alright so here I can adjust this spacing option just like that now let's talk about the padding here I have a button and I already added the auto layout to it the direction is fine if I adjust the spacing between items nothing happens because I have only one child inside this parent's element however now I can adjust the horizontal and vertical padding let's set the vertical padding to 16 pixels and the horizontal pad adding to 32 pixels and there it is now we have a responsive button and if you want to check out whether it's responsive or not you can just double click on this text and just adjust the text for example I can write sign in and as you can see this Frame responds to the changes of my content alright next let's talk about alignment so here we have three different elements I'm going to select them all and I'm going to add Auto layout to them so hit shift and a on your keyboard and as you can see here the alignment is set to top left I can easily change the alignment to whatever I want if I want them to be aligned to the center I can simply change the alignment to Center you can easily change it to whatever you want if you want to change the padding of your frame individually here you can click on this independent paddings option and then here you can adjust the left padding right padding top and bottom padding just keep that in mind it would be useful now let's talk about this advanced settings if you open it up you will see that you have four different options we have spacing mode Strokes canvas stacking and text Baseline alignment let's start with spacing mode by default when you add Auto layout to anything the spacing mode is set to packed what does it mean it means that it removes the additional space around your element so here I have a frame and inside I have three different children if I go to advanced settings as you can see the spacing mode is set to packed and now let's increase the width of this Frame and see what happens you see nothing changed because the spacing mode is set to packed but if I change this spacing mode to space between look what happens now they are distributed within the frame with an even spacing between them as you can see now the space between these elements is set to Auto and if I change the width of my frame look what happens you see they are responsive and they are distributed evenly within the frame now let's talk about The Strokes option well by default when you add stroke to your elements they don't take space so here I have a frame and I added stroke to it if I go to the auto layout settings here you will see that The Strokes option is set to excluded it means that it doesn't take into account the space this stroke occupied here so if I just select one of these titles and I hold down the ALT key on my keyboard or option key you will see that this padding is measured against the boundary of this Frame but if I select this Frame and change The Strokes option to included in layout now look what happens if I select this title now and hold down the option or ALT key on my keyboard you will see that now this stroke is part of this Frame it's included in the measurement now let's talk about canvas stacking well here I have three different profile images okay I already added Auto layout to them and I want them to overlap each other so here I'm gonna set the spacing between items to a negative value yes you can do it you can just decrease this value to something like that nice and then if you take a look at this advanced layout and go to Canvas stacking here we have a drop menu we have two different options last on top or first on top so if I change it to First on top look what happens and by the way you can see the preview right here as well okay but what about this text based alignment let's talk about it well by default when you want to align two different elements in figma they will be aligned vertically from their Center okay and sometimes it's going to be problematic especially if you try to align an icon with a text Baseline and this option allows you to align your text and your elements based on the text Baseline so let me show you how it works I'm going to select these three text layers and I'm gonna align them vertically look what happens you see now they are aligned from their Center just like that even if I add Auto layout to them the same scenario happens I can simply select this Frame and I can change this text Baseline alignment to enable and there it is now as you can see they are aligned to their Baseline and it's sometimes very very helpful now let's talk about resizing well as you know your elements in figma have something called constraints and the constraints allow you to Define how your elements should react when their size changes but when you add Auto layout to a frame or a component you can't use constraints anymore instead you can use the resizing properties let me show you how they work here I have a frame I already added the auto layout to it and here I'm going to adjust the width of this card if I adjust it like this as you can see the text inside doesn't respond to this change and that's because we need to change the resizing property of the child inside because your frame has different resizing properties as you can see here these are our resizing properties and the children inside have their own resizing properties as well so here I'm gonna select the text inside and as you can see here it says fixed that's why when I change the frame's width here this text width didn't change however if I select this text and I change it to field container which means that it takes up the whole available width within its container or in this case it's parent now it will be responsive look what happens you see so basically the resizing options are the constraints that we are using for other elements so they allow us to Define how we want our content within a frame respond to any changes in size all right now that you've learned about Auto layout let's create a responsive card together Charlie so here I already prepared a few elements I have a photo here I have a tag a title a price here I have this cart icon and a CTA so how can we make it responsive well let's start with these contents right here okay I'm gonna put this card icon somewhere around here I don't need it now I'm gonna select them all these elements and I'm gonna hit shift and a to add Auto layout to them alright then I'm going to add a feel to it so hit the plus button right here I'm gonna set it to White that's fine now I'm gonna select this Frame and this photo and I'm gonna add Auto layout to these elements now because we can combine Auto layout frames and it's awesome you can have Auto layouts with multiple directions and in fact that's what we are gonna do so while they are selected I'm gonna hit shift and a I'm gonna change the alignment to left and here we have the space between if I extend this frame in the layers list you will see that this Frame 14 in fact let's rename it okay I'm going to rename it to card it has two different children it has this photo and this Frame 13 I'm gonna call it content and when I select this card frame here we have the spacing between items set to 26. this is this space right here I'm gonna set it to zero we don't need any space in between and next I want this content frame to take up the whole available width here to do that I'm gonna select it here in the layers list and as you can see its resizing option is set to hog it means that it will hog the content inside without leaving any additional space around them but we want to change that as I said we wanted to take up the whole available width of this large frame I'm gonna change the horizontal resizing to fill container and just like that now this bottom frame this content frame takes up the whole available space here okay so far so good now I'm gonna select my card frame and I'm going to increase the corner radius amount to something like 8 pixels and make sure to enable this clip content otherwise you won't see rounded Corners here just check this checkbox what's next well what I want to do is this I want this buy now button and this price to sit in one line okay so what we can do is Select these two hold down the shift key and select them add Auto layout to them hit shift and a and change the direction to horizontal just like that now that you're sitting next to each other however I want this buy now button to be placed on the other side of this Frame how can we do that well you're right we can change the spacing mode from packed to space between so while it's selected I'm going to change the spacing mode to space between and nothing happened why that's because the resizing property of this Frame is set to fixed if I change it to fill container now it works as expected so whenever you change something here and it's not reflected in your design make sure to take a look at the resizing properties as well now I want to select this content frame and I'm going to change its padding I'm going to set the horizontal padding to maybe 16 pixels and the vertical padding to 16 pixels as well however here we have so much empty space between this title and this new tag the way we can fix that is very simple we can select them and we can add Auto layout to them hit shift and a and then we can change the spacing between property here I'm gonna set it to maybe four pixels you can set it to 8 as well but 4 is just fine for now all right our card is beginning to look very good but what about this icon well I want this cars icon to be placed right here around the corner but how can we do that well let me drag this icon and drop it inside this card frame and you will see it will be added right above my photo but that's not what I want I don't want it to take up more space here in this case we need to use something called absolute position if you have some coding experience for sure you know what the absolute position is in CSS and in figma it does the exact same thing it allows you to put your element precisely wherever you want without taking any space and its position is going to be relative to its parent position let me show you how it works while it's selected I'm gonna click on this icon okay it says absolute position and as soon as I do that it doesn't take up any space anymore and it's just floating I can easily adjust its position without affecting the elements around it now I'm gonna hold down the ALT key or option key on my keyboard to set the top and right padding to 16 pixels and here is the thing when you use absolute position you can again use constraints instead of resizing options so since I want this icon to stay where it is I want to set its constraints to top and right and if I select this card and adjust its width you will see that I'll get my desired result however my image is not responding how can we fix that it's very simple I'm gonna select this photo and I'm gonna change this resizing option from fixed width to field container and also here from fixed height to fill container now I can set the width to something like 290 pixels and I'm gonna bring my card icon right here and if I select my card it should be responsive now just like that can you see how easy it is to use Auto layout in figma and don't forget to change the alignment for this Frame to Center all right our card is ready and as you can see we have a beautiful and responsive card alright guys thanks for watching if you like this video please hit the like button and subscribe to my channel for more tutorials like this if you want to learn how to design great buttons in figma make sure to check out this video on the screen have an awesome day and see you next time

Channel: DesignWithArash

Views: 40,505

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, auto layout figma

Id: 42uQGucQA9o

Length: 15min 39sec (939 seconds)

Published: Tue Sep 20 2022