KILLER Auto Layout Tutorial in FIGMA

[@mdsnotavailable]

what do you want to see next?

[@arbanai2735]

A killer components tutorial :)

[@LuigiChelli]

Tokens!! possibly Tokens Studio (ex Figma tokens) plugin rundown and examples.

[@АллаРомашкова-ш1м]

it will be cool to see how to create some elements using components, autolayout, variants and prototype them

[@shadowhere_]

Basic ux research video please.

[@owaisfazil1464]

Components! Also I firkin love your shitty song

[@rogietheking]

Not only is this an amazing tutorial, but your production value is off the hook, Matt. GO GO GO!

[@mdsnotavailable]

😍😘

[@MelindaMatturro]

your water bottle metaphor is so simple yet so genius. love your editing style! THANK YOU for making auto-layout easier to wrap my head around!

[@mdsnotavailable]

Glad you liked it Melinda!

[@toussaintlouverture1-n56]

Screw KZbin algorithm, I watched every single autolayout tutorial on KZbin trying to understand the concept and this is by far the most interesting of them all !!

[@mdsnotavailable]

🙌

[@sahilbhat7328]

Had seen many videos related to Auto Layout before this but this is undoubtedly the most understandable and fun to watch. Exceptional editing.

[@underscoreroa]

one of the best AL, hug/fill explanations I've seen yet. And the tip about holding off on AL during ideation is brilliant.

[@CarlosAndresVelasquez]

This is by far one of the best tutorials Ive seen with autolayout. Adding to my “always be learning” playlist.

[@mdsnotavailable]

Thanks Carlos!

[@giftedgeek]

The Visuals are just amazing, and the Sound design for typing and expanding just awesome!

[@RPBR84]

Omg been struggling for three days with auto layout this is the only tutorial I’ve seen that makes any sense!!! Thank you

[@JaneDimeski]

Wow, the best explanation of auto-layout I've seen 'til date. Your KZbin content is amazing Matt, lots of respect for you and what you do. Excited for future content along this line. Keep it up!

[@mdsnotavailable]

Thanks Jane!

[@lexib9516]

Bravo sir!!!! An explanation that virtually covers all of my headaches with auto-layout. Much of my headaches were due to adding auto-layout at the beginning vs at the end once I have the layout designed. Thanks so much for putting this together & taking the time to share it with us. Nicely done.

[@nebookyn]

Hey Matt, the effort you put into this video is incredible. Keep up the good work man!

[@mdsnotavailable]

Thanks Nazim!

[@krispy.26]

I would like to thank you for this is the ONLY autolayout tutorial that actually stuck with me. I really like the horror elements >:)) keep em comin

[@Faguoyo]

Fourth tutorial I've seen about auto layout today and from far the best. Many thanks!

[@ThingaNguyen-du5fg]

I have seen many auto-layout youtube video BUT this one is by far the best one! man - you nailed it! keep on going! and ofc, thx for sharing 😎

[@ellivizcaino4307]

Not only did this video help me understand auto layout a bit better, but it was also hilarious and entertaining! A welcomed surprise!

[@TheRiddleDungeon]

Loved it just how you simplified the layout stuffs straightway! I've struggling with auto layout stuff and stressed out as hell.. I was not finding any motivation to break things out. Thank you for your time :)

[@pauladeka1593]

Now this is how I want to be taught... Really straightforward in a fun way, thanks man.

[@JenyaAndreeva]

Thank you so much!!! I can't believe I figured out how to use it after a YEAR of working in Figma.

[@arff_f]

I don’t know y this one isn’t getting million views. Even the figma yt itself can’t teach auto layout effectively like this

[@lilyshevchenko7048]

The production value of this video is insane! Everytime I'll hit SHIFT-A I'll always have a mental metal riff 😂Bravo!

[@mdsnotavailable]

🤘😎

[@JayCarver]

Man you had me cracking up and learning at the same time lol...dope video and way to keep people engaged all the way through!

[@pm2228]

Wow! This tutorial is amazing. The way your structure and deliver the content makes it so fun to watch! you earned a suscriber

[@hoangphat5979]

OMG the struggle was REAL, i was stuck with this typing with autolayout but thank you for point out " Fixed for parent and Fill for child ". It's working

[@muhammadalikhan7096]

That's how you entertain and educate your audience. dude you just made my life way simpler. . Btw that's how you gain a subscriber. thank you so much

[@underscoreroa]

Also, when I first started with Figma wish I'd learned that starting small with auto layout groups is the best way to go. Would have saved me so much stress.

[@sanjeevtanguturu4531]

Thank you so much! I really appreciate the way you teach. It really helped me a lot, especially the water bottle example.

[@alecsandrugrigoriu5809]

Really love this new style of editing you applied on the video. Awesome stuff!

[@mdsnotavailable]

Thanks!

[@codemathics]

Everything creative = MDS. So 🐐ed!

[@raviblr8227]

Excellent.. now I got some confidence and knowledge about on Auto layout.. Thanks for sharing this valuable topic.. If possible do one more video about autolayout complete procedure and with tips and logic. Thanks.

[@fulldeploy]

Brother this is by far the BEST auto layout tutorial I’ve watched. Sub’d! (Although I disagree with the AL disclaimer, this is a great tutorial).

[@mdsnotavailable]

Glad you liked it!

[@nahidmodan4824]

this is exactly what I needed I actually had a hard time with using the fixed, fill and hug options. Now I will always remember the water bottle analogy , thank for helping me this issue.

[@Mythril]

this is the best auto-layout tutorial i've found!

[@mateusvidal3187]

It was amazing! The video editor deserves congrats for this one!

[@mdsnotavailable]

Thanks Mateus! I’ll be sure to let him know.

[@MarcusBoyDS]

For me the real killer insight was the fill/fixed water bottle concept, the perfect storytelling to teach auto-layout

[@mdsnotavailable]

🙌

[@U7traman]

Never had so much fun watching a Figma tutorial. Amazing.

[@mdsnotavailable]

😅 thanks Indra

[@ochjich]

wow its crazy but also balanced not overdone, amazing tutorial!

[@mdsnotavailable]

Thanks Chjio!

[@riturajborah6169]

Thank You So much for this Video. You have explained it so well. Keep up the hustle and your KZbin channel will grow for sure ❤️

[@danielruiz2471]

This is really nice work Matt!

[@msummer]

This is amazing Matt, thank you! You’ve been killing it with the KZbin content, super excited to see what else you’ll be sharing!

[@ArifKhan-uf3nm]

This is only tutorial in MDS Style loved the work and inspired 🌟

[@MilanB]

A man who knows how to explain. Fantastic video focusing on what we actually need to understand. Thanks Matt.

[@mdsnotavailable]

Thanks Milan!

[@izikprinx]

Hey man, thank you so much for this explanation, I was wondering if you can make a video about rapid prototyping using figma. Thanks x

[@danielmota6322]

On the very second example, where you are doing absolute positioning, and adding the effect on the text box, I can 'see' (if I click the layer, when it highlights) through the grid that it is working--in a sense that as Long as I type, the effect follows. But, I can't see the effect in itself. How do I fix that?

[@michellewren_]

this is such a well done tutorial - the content, the editing, the myers theme... so so good! thank you!

[@mdsnotavailable]

Thanks so much Michelle!

[@shadowhere_]

Just amazing, learned a lot from this video, Keep giving us more value like this one.

[@mohammadjavadmozaffari1686]

So simple and useful grate job that was the easiest way to learn autolayout thing ❤

[@_thesoulsjourney]

Wicked tutorial. Genius bottle analogy!

[@NadjibIxe]

Excellent !!! the best autolayout tutorial☠🎸

[@Cor-mac]

Simply awesome tutorial! The quality is out of this world, you’re the 🐐.

[@martinpenkov2492]

Hello, I want to ask in which cases we don't need to use auto layout & thumbs up for this video it's really helpfull.

[@matejkollar6615]

such an excelent tutorial! thank you, you deserve more likes

[@larissasaad7378]

Beautifully edited video, fun and informative. Well done MDS!

[@mdsnotavailable]

Thanks Larissa!

[@WB-zr7pq]

Been trying to explain this to others, and this is the funnest way I have seen yet.

[@mdsnotavailable]

Thanks W B!

[@alfredosmith6107]

You’re definitely underrated 👍🏾🚇🔔

[@GabriellaBajkai]

The most entertaining tutorial I've ever watched

[@mdsnotavailable]

Thanks Gabriella =)

[@uxtools]

Can tell you had fun with this one. Really well done/terrifying/useful 💪

[@mdsnotavailable]

🙌

[@lavenderweasley]

The most memorable tutorial ever!

[@路人君-e7l]

fantastic work and well explained video!

[@pixiedev]

Amazing men also your editor have my respect.

[@mdsnotavailable]

Thanks Praveen. I edited this one. 😊👍

[@aaronruiz816]

This edit is so awesome!

[@mdsnotavailable]

Thanks Aaron!

[@ainaopeyemi339]

Love this editing

[@GOKU019]

awesome video... sound effects ❤❤

[@lonhetrick]

Excellent! Way more entertaining than the Auto-Layout training I gave our UX team last week.

[@mdsnotavailable]

😅 Thanks Lon

[@arbanai2735]

That's it! Finally I can understand auto layout.

[@mdsnotavailable]

🙌

[@marlonmarcello]

Instant fan of your channel!

[@mdsnotavailable]

Thanks Marlon!

[@arzach_0x]

Awesome video!!! So helpful

[@SheisaCreative]

Thank you for the awesome tutorial. 😊😊

[@mdsnotavailable]

🙌

[@HardikTiwari-e9s]

You are genius. Thanks for sharing 😊

[@harshaandhillon8649]

Love this advice! :) 04:45

[@adriennviski]

Hi! I have a question: for some reason, the “constraints and resizing” option is missing in my Figma. It’s not where it should be, and I can’t find it anywhere. Also, I’m missing a couple of animations in prototypes, even though I have a Figma subscription. What do you think the issue could be?

[@mdsnotavailable]

They've updated the UI since this video. Those options are now under the width and height boxes.

[@Shatz]

Amazing video, thank you very much!

[@M4rt1nX]

Thanks a lot. I finally understood.

[@madhoundes]

this tutorial like a gem

[@Adlip_Kun]

Wow! Thank you so much. This is a killer video.

[@Elizabeth-mf3dn]

BLESS you saved me such a headache

[@phantpwr]

Can someone please explain how Auto Layout helps them? Im seeing so many new designers files that are a total mess. They somehow learned somewhere that Auto Layout is necessary to be a designer and they're obsessed. Their overall spacing is inconsistent and basic design fundamentals ignored. Yet everything is Auto Layout'd. I'm constantly fixing their errors.

[@mdsnotavailable]

Yeah it’s unfortunate. At 4:42 I talk a little about this. Definitely not more important than the fundamentals.

[@phantpwr]

@@mdsnotavailable Still watching, well done as usual. I just feel bad for new designers spending so much time and effort learning things that holistically don't matter. Auto Layout will not get you a job.

[@elysiumcore]

Wicked tutorial tutorial 🔥

[@rizkyakbarmubarok2662]

thanks for your video, very helpfull

[@manashkashyap7780]

Please make fancy design tutorials

[@zerox9646]

on the one hand it is interesting to watch, on the other it is difficult to perceive

[@kmdesignsolutions]

Perfect tutorial✌️

[@clementine5672]

Killer content man

[@drdennsemann]

Learning from the best!

[@brandoxide6392]

I loved this video as you have spoken the truth.

[@remywu7706]

Thanks MDS

[@maha2531]

really enjoyed Watching this HORROR auto layout 😂

[@MartinAlejandro]

You're the best.

[@lanaveldanova1397]

Amazing

[@juansandia5060]

Amazing!

[@naufalammarrauf166]

HAHAHA really love this auto layout tutorial 🤣

[@mdsnotavailable]

😊🙌

[@musikundspiel1008]

wow, thank you!

[@alfredosmith6107]

I want to be like you when i grow up - a grown man

[@nikitagoncharuk2234]

Love it

[@ioanaienciu2049]

That was good.;) 👍

[@deekshasatapathy9009]

damnnn, you saved my life

[@irissolanolopez2899]

Genius!!!!!!!

[@ridd]

Lol I love it. So so much.

[@mdsnotavailable]

🙌🥳

[@danielgolden90]

It was worth it.

[@mdsnotavailable]

Thanks Daniel! =)

[@robinklaiss]

Epic!