No video :(

Figma Auto-layout Explained In 5 Minutes

Подписаться 846 тыс.

Просмотров 56 тыс.

50% 1

We're working on a full in-depth Figma course! Join the waitlist: flux-academy.t...
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: bit.ly/3UdxJ8E
👉 All course bundles and more: bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Tim Gabe’s Instagram 👉 www.instagram....
#webdesign #figmatips #freelancewebdesigner

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 81

@Alikk784 2 дня назад

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

@danielwatson6529 Год назад

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 Год назад

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.

@omeirooo5195 Год назад

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

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

@hitrisnow Год назад

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

@johnquesterloyola1229 Год назад

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

@suvashree866 Год назад

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

@homersimpson2293 Год назад

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 Год назад

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

@jorimsoika9115 9 месяцев назад

Perfectly put!

@user-xw6je9cd7z 8 месяцев назад

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

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

@mmatheen Год назад

Superb, Explanation. Do something more about figma animations

@keshav_p Месяц назад

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

@monsieurm2904 Год назад

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

@tuams Год назад

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

@bruhmoment3731 3 месяца назад

Just bought my first private island thanks to this video.

@FluxAcademy 3 месяца назад

🏝️

@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

@tetianaserbinenko9285 Год назад

It will be nice to watch video about components :)

@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

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

@asadullahhamid6860 11 месяцев назад

I have understood it first time amazing content and thank you

@sinosree6628 3 месяца назад

well explained ! thank you !

@FluxAcademy 3 месяца назад

Glad it was helpful!

@ogechukwuosinigwe4363 Год назад

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

@narayananp2407 8 месяцев назад

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

@ken4179 4 месяца назад

Amazing tutorial bro mad ups

@drakZes 6 месяцев назад

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

@FluxAcademy 6 месяцев назад

Glad it helped!

@hellofrostbite Год назад

Man this is what I needed. Thanks!

@omikunleomolola934 Год назад

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

@GoddessofWarr Год назад

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 !

@MrAbbo11 4 месяца назад

perfect video.

@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 !

@RobledoW Год назад

😮 Thank you SO much!! Very Helpful

@tophtechng7045 Год назад

Thank you for the breakdown man

@shukurulloxkomiljonov5423 Год назад

Thank you its very useful for me.

@KamaleshK-tl5pi Месяц назад

Please make videos for small interaction in figma

@Luuzikah Год назад

Amazing explanation!!

@nikhilgoyal007 8 месяцев назад

thanks so much!!!

@isz92 Год назад

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

@roeunaugust3615 Год назад

Wow good explain

@sweetybindu2239 10 месяцев назад

Thanks sir it helped a lot

@pallaviutane9672 Год назад

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

@ahmadsajjad534 Год назад

Make some more videos about auto layout

@samduss4193 13 дней назад

what do people use to make wireframe here ?

@bjmgraphics617 Год назад

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

@Raghudesign Год назад

Amazing, thanks for sharing. Its life saver 😂

@farshadamirshoghi9323 Год назад

Thanks, It was useful video

@AgnesMarek Год назад

Boom - Mindblow! 💥

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

@james.kaloki Год назад

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

@fadi.optimist Год назад

Keep them coming

@StrollAlongWithMe Год назад

Thank's for sharing.💌

@moxgalaxy 9 месяцев назад

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

@neontuts5637 Год назад

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

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

@Miteshsamal Год назад

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

@alltheserobotsshallfall Год назад

Excellent.

@AlicaKrmac Год назад

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

@suman121069 Год назад

thank you

@user-si1do8zg9d Год назад

why do you have to set container to fill though?

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

@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

@okenwamichael9435 11 месяцев назад

I can’t find packed on my layout

@rlex3681 Год назад

make a video about case study

@floea925 Месяц назад

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

@Bibiregui 6 месяцев назад

I just gonna said OMG!

@sharafaty 2 месяца назад

heyyyyyyyyyyyyyyy Figma Prototype based animation (smart-animate ) Plz

@ayoadehabeeb6970 Год назад

Wireframe

@cmdaltctr 3 месяца назад

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!

@gr0wnup5 Год назад

Who else is waiting for that 7mil 💀

@tangik432 Год назад

Probably nesting

@gilangkusuma109 Год назад

thats so fck under 5 minute to understand..

@gareth3152 Год назад

I still hate auto layout.

@lucielewis6438 Год назад

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

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