KILLER Auto Layout Tutorial in FIGMA

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2022
  • Figma file: www.figma.com/community/file/...
    Instagram → / mds
    Twitter → / mds
    Dribbble → dribbble.com/mds

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

  • @mdsnotavailable
    @mdsnotavailable  ปีที่แล้ว +6

    what do you want to see next?

    • @arbanai2735
      @arbanai2735 ปีที่แล้ว +8

      A killer components tutorial :)

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

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

    • @user-bz8xe2vp3p
      @user-bz8xe2vp3p ปีที่แล้ว +2

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

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

      Basic ux research video please.

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

      Components! Also I firkin love your shitty song

  • @rogietheking
    @rogietheking ปีที่แล้ว +32

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

  • @MelindaMatturro
    @MelindaMatturro ปีที่แล้ว +32

    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!

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

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

  • @sahilbhat7328
    @sahilbhat7328 ปีที่แล้ว +3

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

  • @giftedgeek
    @giftedgeek ปีที่แล้ว +6

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

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

    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.

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

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

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

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

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

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

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

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

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

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

  • @ThingaNguyen-du5fg
    @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 😎

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

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

  • @krispy.26
    @krispy.26 9 หลายเดือนก่อน

    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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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.

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

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

    Everything creative = MDS. So 🐐ed!

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

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

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

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

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

    Excellent !!! the best autolayout tutorial☠🎸

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

  • @ArifKhan-uf3nm
    @ArifKhan-uf3nm 9 หลายเดือนก่อน

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

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

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

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

    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.

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

    Wicked tutorial. Genius bottle analogy!

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

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

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

    This is really nice work Matt!

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

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

  • @Cor-mac
    @Cor-mac ปีที่แล้ว

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

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

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

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

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

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

    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

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

    You’re definitely underrated
    👍🏾🚇🔔

  • @ochjich
    @ochjich ปีที่แล้ว +7

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

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

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

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

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

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

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

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

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

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

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

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

    awesome video... sound effects ❤❤

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

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

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

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

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

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

    Awesome video!!! So helpful

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

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

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

    fantastic work and well explained video!

  • @productdesigntalk
    @productdesigntalk 9 หลายเดือนก่อน

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

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

    This edit is so awesome!

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

    The most memorable tutorial ever!

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

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

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

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

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

    Instant fan of your channel!

  • @Shatz
    @Shatz 10 หลายเดือนก่อน

    Amazing video, thank you very much!

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

    Amazing men also your editor have my respect.

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

      Thanks Praveen. I edited this one. 😊👍

  • @elysiumcore
    @elysiumcore 10 หลายเดือนก่อน

    Wicked tutorial tutorial 🔥

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

    Perfect tutorial✌️

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

    Thanks a lot. I finally understood.

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

    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.

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

    The most entertaining tutorial I've ever watched

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

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

  • @Adlip_Kun
    @Adlip_Kun 27 วันที่ผ่านมา

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

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

    Thanks MDS

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

  • @Elizabeth-mf3dn
    @Elizabeth-mf3dn ปีที่แล้ว

    BLESS you saved me such a headache

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

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

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

    Killer content man

  • @rizkyakbarmubarok2662
    @rizkyakbarmubarok2662 10 หลายเดือนก่อน

    thanks for your video, very helpfull

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

    Learning from the best!

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

    Thank you for the awesome tutorial. 😊😊

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

    this tutorial like a gem

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

    You're the best.

  • @maha2531
    @maha2531 9 หลายเดือนก่อน

    really enjoyed Watching this HORROR auto layout 😂

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

    wow, thank you!

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

    Amazing!

  • @brandoxide6392
    @brandoxide6392 10 หลายเดือนก่อน

    I loved this video as you have spoken the truth.

  • @lanaveldanova1397
    @lanaveldanova1397 3 หลายเดือนก่อน +1

    Amazing

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

    Please make fancy design tutorials

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

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

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

    HAHAHA really love this auto layout tutorial 🤣

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

    Love it

  • @harshaandhillon8649
    @harshaandhillon8649 5 หลายเดือนก่อน +1

    Love this advice! :) 04:45

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

    That was good.;) 👍

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

    Epic!

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

    Genius!!!!!!!

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

    damnnn, you saved my life

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

    subbed!

  • @user-gp4uu9fd5m
    @user-gp4uu9fd5m 7 หลายเดือนก่อน

    Great :)

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

    Lol I love it. So so much.

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

    The only tutorial u need hahahaha i swear.

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

    SHIFT+A!!!!

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

    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
      @mdsnotavailable  ปีที่แล้ว

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

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

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

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