KILLER Auto Layout Tutorial in FIGMA

Figma file: www.figma.com/community/file/...
Instagram → / mds
Twitter → / mds
Dribbble → dribbble.com/mds

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

[@user-bz8xe2vp3p]

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!

[@sahilbhat7328]

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

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

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

[@ahmedesam9922]

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]

🙌

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

[@giftedgeek]

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

[@CarlosAndresVelasquez]

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

[@mdsnotavailable]

Thanks Carlos!

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

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

[@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 :)

[@RPBR84]

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

[@ellivizcaino4307]

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

[@Faguoyo]

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

[@pauladeka1593]

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

[@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 😎

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

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

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

[@user-fx6lq4gt3d]

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

[@sanjeevtanguturu4531]

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

[@danielruiz2471]

This is really nice work Matt!

[@nebookyn]

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

[@mdsnotavailable]

Thanks Nazim!

[@pm2228]

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

[@alecsandrugrigoriu5809]

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

[@mdsnotavailable]

Thanks!

[@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]

🤘😎

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

[@Cor-mac]

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

[@codemathics]

Everything creative = MDS. So 🐐ed!

[@NadjibIxe]

Excellent !!! the best autolayout tutorial☠🎸

[@Mythril]

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

[@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 ❤️

[@shadowhere_]

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

[@_thesoulsjourney]

Wicked tutorial. Genius bottle analogy!

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

[@mohammadjavadmozaffari1686]

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

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

[@uxtools]

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

[@mdsnotavailable]

🙌

[@ArifKhan-uf3nm]

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

[@arzach_0x]

Awesome video!!! So helpful

[@MilanB]

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

[@mdsnotavailable]

Thanks Milan!

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

[@GOKU019]

awesome video... sound effects ❤❤

[@larissasaad7378]

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

[@mdsnotavailable]

Thanks Larissa!

[@alfredosmith6107]

You’re definitely underrated 👍🏾🚇🔔

[@ochjich]

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

[@mdsnotavailable]

Thanks Chjio!

[@user-oh6fs5ti2y]

fantastic work and well explained video!

[@elysiumcore]

Wicked tutorial tutorial 🔥

[@U7traman]

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

[@mdsnotavailable]

😅 thanks Indra

[@mateusvidal3187]

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

[@mdsnotavailable]

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

[@Shatz]

Amazing video, thank you very much!

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

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

[@lavenderweasley]

The most memorable tutorial ever!

[@ProductDesignTalk]

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!

[@M4rt1nX]

Thanks a lot. I finally understood.

[@Kram3r]

Brilliantly done and very scarily explained! I’m gonna use auto layout with caution! Great video and very well explained!

[@mdsnotavailable]

Thanks Mark!

[@MarcusBoyDS]

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

[@mdsnotavailable]

🙌

[@kmdesignsolutions]

Perfect tutorial✌️

[@aaronruiz816]

This edit is so awesome!

[@mdsnotavailable]

Thanks Aaron!

[@remywu7706]

Thanks MDS

[@Adlip_Kun]

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

[@SheisaCreative]

Thank you for the awesome tutorial. 😊😊

[@mdsnotavailable]

🙌

[@Elizabeth-mf3dn]

BLESS you saved me such a headache

[@WB-zr7pq]

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

[@mdsnotavailable]

Thanks W B!

[@clementine5672]

Killer content man

[@juansandia5060]

Amazing!

[@lonhetrick]

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

[@mdsnotavailable]

😅 Thanks Lon

[@marlonmarcello]

Instant fan of your channel!

[@mdsnotavailable]

Thanks Marlon!

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

[@rizkyakbarmubarok2662]

thanks for your video, very helpfull

[@drdennsemann]

Learning from the best!

[@pixiedev]

Amazing men also your editor have my respect.

[@mdsnotavailable]

Thanks Praveen. I edited this one. 😊👍

[@madhoundes]

this tutorial like a gem

[@musikundspiel1008]

wow, thank you!

[@arbanai2735]

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

[@mdsnotavailable]

🙌

[@GabriellaBajkai]

The most entertaining tutorial I've ever watched

[@mdsnotavailable]

Thanks Gabriella =)

[@nikitagoncharuk2234]

Love it

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

[@lanaveldanova1397]

Amazing

[@MartinAlejandro]

You're the best.

[@maha2531]

really enjoyed Watching this HORROR auto layout 😂

[@brandoxide6392]

I loved this video as you have spoken the truth.

[@zerox9646]

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

[@robinklaiss]

Epic!

[@ioanaienciu2049]

That was good.;) 👍

[@harshaandhillon8649]

Love this advice! :) 04:45

[@manashkashyap7780]

Please make fancy design tutorials

[@irissolanolopez2899]

Genius!!!!!!!

[@naufalammarrauf166]

HAHAHA really love this auto layout tutorial 🤣

[@mdsnotavailable]

😊🙌

[@deekshasatapathy9009]

damnnn, you saved my life

[@user-gp4uu9fd5m]

Great :)

[@blurryace2807]

subbed!

[@ridd]

Lol I love it. So so much.

[@mdsnotavailable]

🙌🥳

[@alfredosmith6107]

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

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

[@arff_f]

The only tutorial u need hahahaha i swear.

[@wzywgwzywg]

SHIFT+A!!!!