Figma Auto-layout Explained In 5 Minutes

if I can get you to understand all the layout in the next 5 minutes you save 15 000 hours of work this year and make an extra 7.3 million dollars that you can use to quit your job buy a private island and then fly there on your private jet you get it the next five minutes can change your life so let's go Auto layout as its name suggests makes the work of laying out elements in your designs automatic before Auto layout if you had a list of objects like this playlist or these websites here if you wanted to switch things around you would have to go in manually and drag them like this with auto layout you can just change the order of the elements and boom perfectly laid out before Auto layout if you wanted to change the spacing between elements you would have to go to each one of them and change the spacing now with auto layout you guessed it it's automatic the truth is figma did not not invent this concept if you look at the development World you'll find a CSS property called the flexbox and that is exactly what Auto layout is auto layout and flixbox are exactly the same which is important because the things you design will ultimately be developed so it's nice to design it the way it's going to be developed in the end so it's best to design with the same tools you'll be developing the way Auto layout and flexbox work is that you group together or wrap together items and then you add the auto layout to them now here's a quick example of how I would build this playlist here with auto layout okay so the first thing we want to do is to identify groups of content and then we add Auto layouts to these groups so by just looking at this playlist item here I can see that we have this vertically stacked text that seems to be a group all of these items seem to be in a group by themselves this is not in a group this is not in a group and these two here also seems to be in a group so let's go back to the text here add an auto layout shift a then add an auto layout to all of these things shift a not Auto layout not Auto layout and these things would also be an orderly out since they're grouped okay that's the first step we have the individual items inside of Auto layouts cool what is the next step well it is to group everything into an auto layout row what we do then is we just grab all of these items and we hit shift a again and there we have an auto layout row I'll change the background color with the Color Picker I'll go to the auto layout settings here change the horizontal padding 24 pixels vertical padding 16 pixels change the name to row and there we have our first row item okay so I'll grab this row item and I'll go over to number three which is about grouping rows into a responsive Auto layout table and responsive is important here because now if I decrease the size of this it's not a responsive and that's because currently everything is being spaced based on pixels we need to go to our Advanced layout settings change the spacing mode from pact to space between so that it's automatically spaced so hit that and now if I change the size you can see that it's responsive so I grabbed this item I duplicate it I'll Target them both add an auto layout here I'll change the spacing to just one pixel between them I'll call it table but we still have a problem if I change the size of this you can see that they're not adhering to the size of the table so I have to go into these items and change their width from fixed to fill container and this you have to do for all things within Auto layouts if you want it to span the whole width so now if I change the spacing of the table container these two here fill the container and thus are responsive just like that a table with all the layouts magic now do you have a specific figma topic you would love to learn more about let us know in the comments below until the next one though have a great life we'll talk soon ciao [Music] foreign [Music]

Channel: Flux Academy

Views: 28,915

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: guYN5LaAcS8

Length: 5min 10sec (310 seconds)

Published: Mon Dec 05 2022