Figma Auto-layout Explained In 5 Minutes
August 24, 2024 2024-08-24 5:24
Figma Auto-layout Explained In 5 Minutes
We’re working on a full in-depth Figma course! Join the waitlist: https://flux-academy.typeform.com/to/YhHYntTW
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
⭐️ Core Design Skills – basics to become a great designer: https://bit.ly/3UdxJ8E
👉 All course bundles and more: https://bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
Tim Gabe’s Instagram 👉 https://www.instagram.com/timgabe.design/?hl=en
#webdesign #figmatips #freelancewebdesigner
source
Comments (40)
@Alikk784
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
@samduss4193
what do people use to make wireframe here ?
@lucau1966
Hello ! where the "spacing mode" feature has gone? I am looking into Figma right now and clicking on "Advanced auto layout settings" there no chance to chose between "packed" or "space between". Thank you !
@keshav_p
Watched many on this topic and this turned out most helpful!
@floea925
was about to rip my hair out but i think i'm onto it
@KamaleshK-tl5pi
Please make videos for small interaction in figma
@sharafaty
heyyyyyyyyyyyyyyy Figma Prototype based animation (smart-animate ) Plz
@cmdaltctr
Auto layout = Flexbox! That's it FIgma! Why reinvent it with a stupid name. Purely marketing purpose and confuses everyone. Explain it as a flexbox is, in the end IT IS A Flexbox.
Thanks Flux Academy!
@sinosree6628
well explained ! thank you !
@bruhmoment3731
Just bought my first private island thanks to this video.
@MrAbbo11
perfect video.
@ken4179
Amazing tutorial bro mad ups
@Bibiregui
I just gonna said OMG!
@drakZes
Joh dude. I watched a terrible tutorial on Auto-Layouts and was dredding learning them. But this was super easy though!
@narayananp2407
I am seeing Spacing mode. Instead i can see only Strokes, Canvas Stacking and Align text base. How to get it?
@nikhilgoyal007
thanks so much!!!
@user-xw6je9cd7z
You're a G. thanks! looked for ages and couldn't find anyone with this kind of step-by-step tutorial.
@moxgalaxy
Yes, how to make the images scale smaller with auto layout
@sweetybindu2239
Thanks sir it helped a lot
@asadullahhamid6860
I have understood it first time amazing content and thank you
@okenwamichael9435
I can’t find packed on my layout
@roeunaugust3615
Wow good explain
@hellofrostbite
Man this is what I needed. Thanks!
@personone6881
Mannn…. started out really well but those examples you chose to use were backwards and hard for a beginner to abstract and interpret… I just felt like it added a level of convolution you didn’t need to incorporate.
Just feedback – critical but fair, I can explain further if you like = hit me up! no worries! :). ….but I think you know what I’m meaning
@shayesco5609
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.
@omikunleomolola934
Thanks a lot ! It's very easy to understand.
@monsieurm2904
Perfect ! Thanks for this quick and efficient video ! You respect some much my work time, thank you
@artdawggy
Was the "table" group actually necessary? I suppose it is easier to resize all rows by just selecting the table group but could you do without it?
@ahmadsajjad534
Make some more videos about auto layout
@bjmgraphics617
I have auto layout elements in a frame and it disappears. How do I fix this? Thanks
@Underhills
Figma isn't very logical. Very buggy too. Hug, fixed, fill, they drop out and stop working. Then constraints start to fail. Then components start failing. A nightmare to administrate tokens like colors together with typography cause Figma doesn't want that to happen so u forced to find colors manually all the time instead of having the chanse to work typography, color, size and everything in one place. Awful. This software is so non logical and buggy it should be taken off the market.
@WB-zr7pq
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.
@pallaviutane9672
I didn't get filled container option what should i do could you pls help me .
@james.kaloki
I would like to learn on how to design with the different color gradients. Linear, Angular, Radial etc
@RobledoW
😮 Thank you SO much!! Very Helpful
@suvashree866
The best thing is that the way you explain things it's amezing….👏👏
@kuldeepjaswal4655
great video bro! thank for sharing…..some time I added icon in left and heading text in right, and make it component but when we duplicate that to use multiple time later we change icon that would not be possible inside that component…can you explain why?
@newyonface3700
been watching so many tutorial on auto layout but honestly only clarified my questions, thanks a lot. If would earn millions enough to buy helicopter in an island I would defiantly gift you one.
@tangik432
Probably nesting
@shukurulloxkomiljonov5423
Thank you its very useful for me.