Figma Auto-layout Explained In 5 Minutes

Save 15,000 hours of works this year with this 5 min crash course on Figmas Auto-layout. Plus, I’ll go over how Auto-layout and Flexbox are exactly the same, which is important because most of your designs are going to be developed, so it’s best to design with the same tools you’ll be developing.

📽️ CHAPTERS
00:00 - Intro
00:25 - Auto-layout explained
01:40 - 1. Adding groups to auto layout
02:40 - 2. Grouping everything into row
03:13 - 3. Responsive layout table

📱 Find us on SOCIAL MEDIA

#webdesign #figmatips #freelancewebdesigner

[danielwatson]

ive watched thousands of tutorials, from coding to design, from awesome presentors. this cleared up something difficult for me and is up there with the best of making something that appears complex appear simple. top job!

[Alikk]

now this is how you make a tutorial, no bs, no beating abt the bush, straight to the topic, concise yet missing no details. LOve you man

[AllisinMusic]

Wow, I am paying a lot of money for a course on dribble and I’m not really sure why they couldn’t lay it out so easily as you have. Thank you so much.

[omeirooo]

Auto layouts is that one hard thing that makes things easier in the long run. I see a lot of designers hating it. But it just saves you time. It has limitations, I wish there was a wrap function similar to flex wrap. That’d be great

[shayesco]

I love you. Just started the highest paying job I've ever had and I couldn't understand the auto-layout concept till you explained it. May God bless your soul in however many lives you end up having.

[hitrisnow]

great content! auto layout is my current struggle especially on "fill" "hug" "fixed" so this is very helpful!

[johnquesterloyola]

I would love to learn more about Figma's Constraints!

[NikhilVaja-dq]

You're a G. thanks! looked for ages and couldn't find anyone with this kind of step-by-step tutorial.

[suvashree]

The best thing is that the way you explain things it's amezing....👏👏

[mmatheen]

Superb, Explanation.
Do something more about figma animations

[keshav_p]

Watched many on this topic and this turned out most helpful!

[monsieurm]

Perfect ! Thanks for this quick and efficient video ! You respect some much my work time, thank you

[WB-zrpq]

Great explainer, for folks coming into this system. The more an more alignment the tools get directly to the web the better. I still just need figma to add proper min-max FR logic (ie webflow style) to create full funnel responsive flex container with flex grids.

[bruhmoment]

Just bought my first private island thanks to this video.

[tuams]

Oh, wow. This was such a great explanation. I'd like to see more content like this!

[homersimpson]

I understand auto layout (and flexbox for that matter) perfectly but often I’m not using it because your Figma layout is not fixed, it’s bound to change because you are still in the prototyping phase, and auto layout adds more friction to design changes! Auto layout is awesome, IF you are sure, that you don’t need to change the layout anymore (and you can’t never be fully sure, just like we never call a file „final“). It’s best use case is if, you have a design that you use for many months/years and need to change text for example or if you need the same layout in different places. You just need to be careful when you use absolute positioning or auto layout.

[narayananp]

I am seeing Spacing mode. Instead i can see only Strokes, Canvas Stacking and Align text base. How to get it?

[Ayo_-_]

Wow...Thanks for the step-by-step approach, now understand better👍👍👍

Maybe sometime you could do a video on "Style guide", struggling a bit with getting how to make a simple one to fit specific design projects

[tetianaserbinenko]

It will be nice to watch video about components :)

[rajaarunachalam]

Dear Gabe,
I am happy to see your videos always.
But i have one small suggestion, please explain autolayout from very very basic, and from very very very very scratch. i know i am in intermediate level. But i am still looking something from AUTOLAYOUT. I hope you get it.