Figma Auto-layout Explained In 5 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 89

  • @danielwatson6529
    @danielwatson6529 ปีที่แล้ว +10

    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!

  • @AllisinMusic
    @AllisinMusic 2 ปีที่แล้ว +10

    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.

  • @Alikk784
    @Alikk784 4 หลายเดือนก่อน

    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

  • @shayesco5609
    @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.

  • @omeirooo5195
    @omeirooo5195 2 ปีที่แล้ว +14

    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

  • @TasnimulHasnat
    @TasnimulHasnat 3 หลายเดือนก่อน

    this is the type of content I look for on TH-cam when I search something. Thanks man.

  • @juregrabljevec
    @juregrabljevec 22 วันที่ผ่านมา +1

    For anyone on the new updated figma that isn't able to find 3.37 space between, you can find it in Direction + gap and choose the drop down menu for the gap and then set it on auto...that should do it

    • @FluxAcademy
      @FluxAcademy  21 วันที่ผ่านมา

      Thanks for sharing 🙏

  • @suvashree866
    @suvashree866 ปีที่แล้ว +1

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

  • @NikhilVaja-d7q
    @NikhilVaja-d7q ปีที่แล้ว

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

  • @hitrisnow
    @hitrisnow 2 ปีที่แล้ว +2

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

  • @johnquesterloyola1229
    @johnquesterloyola1229 2 ปีที่แล้ว +4

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

  • @keshav_p
    @keshav_p 5 หลายเดือนก่อน

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

  • @homersimpson2293
    @homersimpson2293 2 ปีที่แล้ว +21

    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.

    • @danielwatson6529
      @danielwatson6529 ปีที่แล้ว

      so what do you reccomend to do instead? and does your comment apply also to flexbox (me just getting head around them)

    • @jorimsoika9115
      @jorimsoika9115 ปีที่แล้ว

      Perfectly put!

  • @mmatheen
    @mmatheen 2 ปีที่แล้ว +2

    Superb, Explanation.
    Do something more about figma animations

  • @asadullahhamid6860
    @asadullahhamid6860 ปีที่แล้ว

    I have understood it first time amazing content and thank you

  • @monsieurm2904
    @monsieurm2904 ปีที่แล้ว +1

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

  • @WB-zr7pq
    @WB-zr7pq ปีที่แล้ว +1

    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.

  • @hellofrostbite
    @hellofrostbite ปีที่แล้ว

    Man this is what I needed. Thanks!

  • @tuams
    @tuams 2 ปีที่แล้ว +1

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

  • @tetianaserbinenko9285
    @tetianaserbinenko9285 ปีที่แล้ว +1

    It will be nice to watch video about components :)

  • @ogechukwuosinigwe4363
    @ogechukwuosinigwe4363 ปีที่แล้ว

    wow!! am so excited ,the way nailed this topic is amazing thanks for the great job

  • @joelfremo
    @joelfremo 3 หลายเดือนก่อน

    wonderful video brother, love your content

  • @bruhmoment3731
    @bruhmoment3731 8 หลายเดือนก่อน +1

    Just bought my first private island thanks to this video.

    • @FluxAcademy
      @FluxAcademy  8 หลายเดือนก่อน +1

      🏝️

  • @RobledoW
    @RobledoW ปีที่แล้ว

    😮 Thank you SO much!! Very Helpful

  • @sinosree6628
    @sinosree6628 8 หลายเดือนก่อน

    well explained ! thank you !

    • @FluxAcademy
      @FluxAcademy  8 หลายเดือนก่อน

      Glad it was helpful!

  • @Luuzikah
    @Luuzikah ปีที่แล้ว

    Amazing explanation!!

  • @tophtechng7045
    @tophtechng7045 2 ปีที่แล้ว

    Thank you for the breakdown man

  • @narayananp2407
    @narayananp2407 ปีที่แล้ว +1

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

  • @omikunleomolola934
    @omikunleomolola934 ปีที่แล้ว

    Thanks a lot ! It's very easy to understand.

  • @StrollAlongWithMe
    @StrollAlongWithMe ปีที่แล้ว

    Thank's for sharing.💌

  • @ross-sanderson
    @ross-sanderson 2 หลายเดือนก่อน

    "Autolayout is just CSS Flexbox" made a tonne of sense, coming from a developer background

  • @ken4179
    @ken4179 8 หลายเดือนก่อน

    Amazing tutorial bro mad ups

  • @shukurulloxkomiljonov5423
    @shukurulloxkomiljonov5423 ปีที่แล้ว

    Thank you its very useful for me.

  • @keeponballin6094
    @keeponballin6094 ปีที่แล้ว

    I wish someone would've mentioned
    before that Auto Layout is the same as a Flexbox
    I can't remember that any others mentioned this important info
    that could help a newbie more
    quickly understand
    Thanks

  • @AgnesMarek
    @AgnesMarek ปีที่แล้ว

    Boom - Mindblow! 💥

  • @NaraniKannan
    @NaraniKannan 3 หลายเดือนก่อน

    Your tutorial is awesome, but I am on the new figma update and I can't find the Advanced Auto layout settings for "Space Between"

  • @rajaarunachalam8550
    @rajaarunachalam8550 ปีที่แล้ว

    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.

  • @lucau1966
    @lucau1966 5 หลายเดือนก่อน

    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 !

  • @Ayo_-_
    @Ayo_-_ 2 ปีที่แล้ว

    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

  • @GoddessofWarr
    @GoddessofWarr 2 ปีที่แล้ว +1

    Genius ! I'll do like this next time !
    I have some issues on figma with components icons, if I use it in a variant it says (I need to do a button with an icon and another without icon) : not use within componant...I dont know why and its hard to find a solution on google !

  • @farshadamirshoghi9323
    @farshadamirshoghi9323 2 ปีที่แล้ว

    Thanks, It was useful video

  • @drakZes
    @drakZes 11 หลายเดือนก่อน

    Joh dude. I watched a terrible tutorial on Auto-Layouts and was dredding learning them. But this was super easy though!

    • @FluxAcademy
      @FluxAcademy  11 หลายเดือนก่อน

      Glad it helped!

  • @Raghudesign
    @Raghudesign 2 ปีที่แล้ว

    Amazing, thanks for sharing. Its life saver 😂

  • @MrAbbo11
    @MrAbbo11 8 หลายเดือนก่อน

    perfect video.

  • @fadi.optimist
    @fadi.optimist 2 ปีที่แล้ว

    Keep them coming

  • @samduss4193
    @samduss4193 4 หลายเดือนก่อน

    what do people use to make wireframe here ?

  • @nikhilgoyal007
    @nikhilgoyal007 ปีที่แล้ว

    thanks so much!!!

  • @roeunaugust3615
    @roeunaugust3615 ปีที่แล้ว

    Wow good explain

  • @isz92
    @isz92 2 ปีที่แล้ว +1

    Sometimes columns in a table aren't evenly spaced between each other. Any best way to define different spacing for different columns?

  • @pallaviutane9672
    @pallaviutane9672 ปีที่แล้ว

    I didn't get filled container option what should i do could you pls help me .

  • @KamaleshK-tl5pi
    @KamaleshK-tl5pi 6 หลายเดือนก่อน

    Please make videos for small interaction in figma

  • @james.kaloki
    @james.kaloki ปีที่แล้ว

    I would like to learn on how to design with the different color gradients. Linear, Angular, Radial etc

  • @ahmadsajjad534
    @ahmadsajjad534 ปีที่แล้ว

    Make some more videos about auto layout

  • @kuldeepjaswal4655
    @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?

  • @neontuts5637
    @neontuts5637 2 ปีที่แล้ว

    Thanks for sharing. How to create a Design System or Style Guide in Figma?

  • @bjmgraphics617
    @bjmgraphics617 ปีที่แล้ว

    I have auto layout elements in a frame and it disappears. How do I fix this? Thanks

  • @artdawggy
    @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?

  • @newyonface3700
    @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.

  • @suman121069
    @suman121069 2 ปีที่แล้ว

    thank you

  • @user-si1do8zg9d
    @user-si1do8zg9d ปีที่แล้ว

    why do you have to set container to fill though?

  • @AlicaKrmac
    @AlicaKrmac 2 ปีที่แล้ว

    I would love a clear tutorial on the components/variations, especially with the Figma latest updates, I am lost...

  • @Miteshsamal
    @Miteshsamal 2 ปีที่แล้ว

    Do we really need to use auto layout for mobile app design in figma ?

  • @floea925
    @floea925 6 หลายเดือนก่อน

    was about to rip my hair out but i think i'm onto it

  • @moxgalaxy
    @moxgalaxy ปีที่แล้ว

    Yes, how to make the images scale smaller with auto layout

  • @rlex3681
    @rlex3681 2 ปีที่แล้ว

    make a video about case study

  • @okenwamichael9435
    @okenwamichael9435 ปีที่แล้ว

    I can’t find packed on my layout

  • @gr0wnup5
    @gr0wnup5 2 ปีที่แล้ว

    Who else is waiting for that 7mil 💀

  • @manyshap
    @manyshap 2 หลายเดือนก่อน

    I came from 2024, October I i cant find the "Advance Layout, Space Between" :( I tried and just changed to "Auto" in Horizontal Gap Between :)

    • @Devokka-ix7es
      @Devokka-ix7es 9 วันที่ผ่านมา

      You can find it in Direction + gap and choose the drop down menu for the gap and then set it on auto

  • @personone6881
    @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

  • @sharafaty
    @sharafaty 6 หลายเดือนก่อน

    heyyyyyyyyyyyyyyy Figma Prototype based animation (smart-animate ) Plz

  • @Bibiregui
    @Bibiregui 11 หลายเดือนก่อน

    I just gonna said OMG!

  • @ayoadehabeeb6970
    @ayoadehabeeb6970 2 ปีที่แล้ว

    Wireframe

  • @cmdaltctr
    @cmdaltctr 7 หลายเดือนก่อน

    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!

  • @galihmukti_
    @galihmukti_ 2 หลายเดือนก่อน

    Yup, I'm going to be rich.

  • @tangik432
    @tangik432 ปีที่แล้ว

    Probably nesting

  • @gilangkusuma109
    @gilangkusuma109 ปีที่แล้ว

    thats so fck under 5 minute to understand..

  • @gareth3152
    @gareth3152 2 ปีที่แล้ว

    I still hate auto layout.

  • @lucielewis6438
    @lucielewis6438 2 ปีที่แล้ว

    Ok this video is only if you know what it is. 👎👎👍

  • @Underhills
    @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.

  • @sweetybindu2239
    @sweetybindu2239 ปีที่แล้ว

    Thanks sir it helped a lot