KILLER Auto Layout Tutorial in FIGMA

Поделиться
HTML-код
  • Опубликовано: 7 ноя 2022
  • Figma file: www.figma.com/community/file/...
    Instagram → / mds
    Twitter → / mds
    Dribbble → dribbble.com/mds

Комментарии • 147

  • @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 Год назад +31

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

  • @MelindaMatturro
    @MelindaMatturro Год назад +30

    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!

  • @giftedgeek
    @giftedgeek Год назад +6

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

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

  • @CarlosAndresVelasquez
    @CarlosAndresVelasquez Год назад +3

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

  • @underscoreroa
    @underscoreroa 7 месяцев назад +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.

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

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

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

  • @JaneDimeski
    @JaneDimeski Год назад +2

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

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

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

  • @nebookyn
    @nebookyn Год назад +10

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

  • @Faguoyo
    @Faguoyo Год назад

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

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

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

  • @msummer
    @msummer Год назад

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

  • @alecsandrugrigoriu5809
    @alecsandrugrigoriu5809 Год назад +1

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

  • @arff_f
    @arff_f 3 месяца назад

    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

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

  • @danielruiz2471
    @danielruiz2471 Год назад

    This is really nice work Matt!

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

  • @lilyshevchenko7048
    @lilyshevchenko7048 Месяц назад

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

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

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

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

  • @krispy.26
    @krispy.26 8 месяцев назад

    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

  • @sanjeevtanguturu4531
    @sanjeevtanguturu4531 3 месяца назад

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

  • @michellewren_
    @michellewren_ Год назад

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

  • @user-fx6lq4gt3d
    @user-fx6lq4gt3d 11 месяцев назад

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

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

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

  • @codemathics
    @codemathics Год назад

    Everything creative = MDS. So 🐐ed!

  • @ellivizcaino4307
    @ellivizcaino4307 5 месяцев назад

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

  • @NadjibIxe
    @NadjibIxe Год назад

    Excellent !!! the best autolayout tutorial☠🎸

  • @Cor-mac
    @Cor-mac Год назад

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

  • @larissasaad7378
    @larissasaad7378 Год назад

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

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

  • @Mythril
    @Mythril Год назад

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

  • @ArifKhan-uf3nm
    @ArifKhan-uf3nm 8 месяцев назад

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

  • @uxtools
    @uxtools Год назад

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

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

    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.

  • @underscoreroa
    @underscoreroa 7 месяцев назад

    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.

  • @MilanB
    @MilanB Год назад

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

  • @riturajborah6169
    @riturajborah6169 20 дней назад

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

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

    Wicked tutorial. Genius bottle analogy!

  • @arzach_0x
    @arzach_0x Год назад

    Awesome video!!! So helpful

  • @shadowhere_
    @shadowhere_ Год назад

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

  • @ochjich
    @ochjich Год назад +7

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

  • @aaronruiz816
    @aaronruiz816 Год назад

    This edit is so awesome!

  • @mohammadjavadmozaffari1686
    @mohammadjavadmozaffari1686 Год назад

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

  • @GOKU019
    @GOKU019 Год назад

    awesome video... sound effects ❤❤

  • @alfredosmith6107
    @alfredosmith6107 Год назад

    You’re definitely underrated
    👍🏾🚇🔔

  • @Kram3r
    @Kram3r Год назад

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

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

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

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

  • @marlonmarcello
    @marlonmarcello Год назад

    Instant fan of your channel!

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

  • @U7traman
    @U7traman Год назад

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

  • @user-oh6fs5ti2y
    @user-oh6fs5ti2y Год назад

    fantastic work and well explained video!

  • @MarcusBoyDS
    @MarcusBoyDS Год назад

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

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

    Wicked tutorial tutorial 🔥

  • @pixiedev
    @pixiedev Год назад

    Amazing men also your editor have my respect.

  • @SheisaCreative
    @SheisaCreative Год назад

    Thank you for the awesome tutorial. 😊😊

  • @kmdesignsolutions
    @kmdesignsolutions Год назад

    Perfect tutorial✌️

  • @clementine5672
    @clementine5672 Год назад

    Killer content man

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

    The most memorable tutorial ever!

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

    Amazing video, thank you very much!

  • @WB-zr7pq
    @WB-zr7pq Год назад

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

  • @martinpenkov2492
    @martinpenkov2492 7 месяцев назад

    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.

  • @M4rt1nX
    @M4rt1nX Год назад

    Thanks a lot. I finally understood.

  • @lonhetrick
    @lonhetrick Год назад

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

  • @Elizabeth-mf3dn
    @Elizabeth-mf3dn Год назад

    BLESS you saved me such a headache

  • @remywu7706
    @remywu7706 Год назад

    Thanks MDS

  • @drdennsemann
    @drdennsemann Год назад

    Learning from the best!

  • @GabriellaBajkai
    @GabriellaBajkai 18 дней назад

    The most entertaining tutorial I've ever watched

  • @juansandia5060
    @juansandia5060 Год назад

    Amazing!

  • @madhoundes
    @madhoundes Год назад

    this tutorial like a gem

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

    thanks for your video, very helpfull

  • @arbanai2735
    @arbanai2735 Год назад

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

  • @MartinAlejandro
    @MartinAlejandro Год назад

    You're the best.

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

    really enjoyed Watching this HORROR auto layout 😂

  • @musikundspiel1008
    @musikundspiel1008 Год назад

    wow, thank you!

  • @lanaveldanova1397
    @lanaveldanova1397 2 месяца назад +1

    Amazing

  • @robinklaiss
    @robinklaiss Год назад

    Epic!

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

    I loved this video as you have spoken the truth.

  • @ioanaienciu2049
    @ioanaienciu2049 Год назад

    That was good.;) 👍

  • @nikitagoncharuk2234
    @nikitagoncharuk2234 Год назад

    Love it

  • @naufalammarrauf166
    @naufalammarrauf166 Год назад

    HAHAHA really love this auto layout tutorial 🤣

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

    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?

  • @zerox9646
    @zerox9646 Год назад

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

  • @manashkashyap7780
    @manashkashyap7780 Год назад

    Please make fancy design tutorials

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

    damnnn, you saved my life

  • @harshaandhillon8649
    @harshaandhillon8649 4 месяца назад +1

    Love this advice! :) 04:45

  • @irissolanolopez2899
    @irissolanolopez2899 Год назад

    Genius!!!!!!!

  • @blurryace2807
    @blurryace2807 Год назад

    subbed!

  • @arff_f
    @arff_f 3 месяца назад

    The only tutorial u need hahahaha i swear.

  • @user-gp4uu9fd5m
    @user-gp4uu9fd5m 6 месяцев назад

    Great :)

  • @alfredosmith6107
    @alfredosmith6107 Год назад

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

  • @ridd
    @ridd Год назад +1

    Lol I love it. So so much.

  • @danielgolden90
    @danielgolden90 Год назад

    It was worth it.

  • @rejointrident
    @rejointrident Год назад

    great! i was about to throw my pc out the window until i found this

  • @wzywgwzywg
    @wzywgwzywg Год назад

    SHIFT+A!!!!