Figma Tutorial: New Figma Auto Layout & Constraints (W/ UI DESIGN EXERCISE)

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko

Пікірлер: 306

  • @Mizko
    @Mizko3 жыл бұрын

    Become a FIGMA Expert today with me! My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 thedesignership.com/products/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 www.thedesignership.com/products/outline-wireframe-kit Yours truly, Mizko

  • @EPSTomcat11

    @EPSTomcat11

    3 жыл бұрын

    Great stuff Mizko. So I’m trying to create a responsive web layout using auto layout. A fixed header and fixed footer with variable width, and in the middle, the content area should have a variable height and also variable width. So far this should be easy right? But now I’d like the content area to have two columns, both scrolling vertically and independently. One column is a narrow panel on the left, and again it should be vertically scrollable. And the right column has variable width to fill the viewport space, and should also scroll vertically, but again, totally independently from the left panel. This is what I cannot get working. Any ideas?

  • @aaronpaterson7582

    @aaronpaterson7582

    2 жыл бұрын

    I FOUND IT!! Sorry for the back and forth. It's 'George Hatzis' website I was looking for. I also SMASHED THE LIKE BUTTON. cheers

  • @percy9967

    @percy9967

    2 жыл бұрын

    Might I ask a irrelevant question? Are u from Taiwan or associated with Taiwan? My friends are just curious no offense

  • @Mizko

    @Mizko

    2 жыл бұрын

    @@percy9967 Haha! My parents are from Hong Kong and I was born in Australia.

  • @percy9967

    @percy9967

    2 жыл бұрын

    @@Mizko WOW! What a coincidence ! I studied at USyd a few years ago! Nice Concent! And Go going!

  • @ouhoy
    @ouhoy2 жыл бұрын

    With the new Figma major update, these Hug content and Fixed width options are now at the top of the right sidebar not in constraints anymore. Thanks for your tutorials!

  • @ajaym6795
    @ajaym67953 жыл бұрын

    I like how he stops and asks us questions, to make us think about what will happen without immediately showing us the results. This helps us get a deeper understanding of the tool and will drill it in memory. Thanks 👍

  • @Mizko

    @Mizko

    2 жыл бұрын

    :) Thank you! Appreciate it.

  • @davecelot
    @davecelot Жыл бұрын

    I'm a Junior UX/UI Designer and recently I started improving my skills with Figma. Your videos help me a lot to understand better how to use Figma and to achieve better UI results. Thank you! 😌

  • @aprilholder2950
    @aprilholder29502 жыл бұрын

    Where is the design file for this tutorial?

  • @elya_rose
    @elya_rose3 жыл бұрын

    *I love the fact that you ask us questions at **8:46**.* I paused the video at this moment & tried to find the solution by myself. It really helpful. :)

  • @Sam_Aubade
    @Sam_Aubade3 жыл бұрын

    Just found your channel today and so excited to be the 1000th like on this video! Congrats! And thank you so much for a really easy to understand walkthrough of these features and super relevant examples!

  • @idontknow8898
    @idontknow88987 ай бұрын

    Just started learning Figma and you're such an awesome teacher! Simple explanations, exciting charismatic personality and you ask questions which gets us thinking! And then encouraging people to break the design by clicking the settings again, is very smart and helps build / reinforce confidence! Thank you!

  • @lailaalbuquerque5036
    @lailaalbuquerque50362 жыл бұрын

    5 minutes into your video, and im already out of my figma slump! I love that way you add personality and charm into it! I am an obedient overlay! Thank you so much

  • @Mizko

    @Mizko

    2 жыл бұрын

    Wooo! Glad to hear!

  • @Cachaywn
    @Cachaywn2 жыл бұрын

    Another amazing video Mizko!!!! Thank you!!! Learning smart hints watching your videos, the way you presents it is extraordinary!! Keep doing it!!

  • @aaronpaterson7582
    @aaronpaterson75822 жыл бұрын

    I have seen so many videos on how to create auto-layout and this one is the best!

  • @jamesdillsnwankwo5696
    @jamesdillsnwankwo5696Ай бұрын

    Thank you Mizko. You are truly awesome; you know your stuff and teach it really well. Blessings on you.

  • @lisapaynter1255
    @lisapaynter12553 жыл бұрын

    This is so helpful while I'm in my UX/UI bootcamp. I love the small bites of knowledge. Thank you!!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Glad you enjoyed this!

  • @arwanita
    @arwanita2 жыл бұрын

    Hey Mizko, I must tell you, your videos and tutorials are the best! Thank you for sharing all this.

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you Ana! Really happy to hear :)

  • @gazijakiasultana6806
    @gazijakiasultana68063 жыл бұрын

    This is immensely helpful. I'm genuinely grateful to you to get this tutorial. Keep sharing much more from your vast knowledge.

  • @Mizko

    @Mizko

    3 жыл бұрын

    🙏🏼 Every week!

  • @stevenquadros9004
    @stevenquadros90042 жыл бұрын

    I finally understand why people used frames over rectangles 😍😍😍 thank you. I think this will improve my overall workflow duration.

  • @AmyeeL
    @AmyeeL3 жыл бұрын

    Super helpful Mizko! I love this useful tip 🙌 I can’t wait for more future videos from you.

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Aims, glad you found this useful 🙏🏼

  • @TheCoffeehigh
    @TheCoffeehigh3 жыл бұрын

    Super informative video in under 15mins! You're my new design hero!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Woo! 🔥

  • @biancamarchetti2171
    @biancamarchetti21712 жыл бұрын

    Thank you very much! That was a very good explanation! I have been trying to learn auto layout for days!

  • @cyrilcyril5853
    @cyrilcyril58533 жыл бұрын

    Thank you for your video! I was stuck and hopeless. I ran into your content and it changed my life!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Cyril! So happy to hear this.

  • @luisgalvez4865
    @luisgalvez4865 Жыл бұрын

    Great tutotial! Thanks Mizko!

  • @pankhurimathur9250
    @pankhurimathur9250 Жыл бұрын

    Your videos are so so informative.I love watching them and I have learned many new things in figma.Thanks for sharing with us.

  • @OzMoVideo
    @OzMoVideo2 жыл бұрын

    Great video, I love your teaching approach, clear and direct. Thank you.

  • @SahithNayudu
    @SahithNayudu3 жыл бұрын

    Kudos for showing practically how it behaves in other settings too!

  • @1WillyDAVID
    @1WillyDAVID2 жыл бұрын

    specially loved this one, thanks Mizko!

  • @akashupadhyay7104
    @akashupadhyay71043 жыл бұрын

    Hey Mizko ..this one is golden... it's good if you'll teach "design system series" and throughout the series , you'll cover different different parts of design systems

  • @zahrabagherian8893
    @zahrabagherian88932 жыл бұрын

    Thank you a lot seriously I struggle with auto layouts a lot but now I learn it perfectly

  • @_lfaustoo
    @_lfaustoo3 жыл бұрын

    You are a beast Mizko! Thank you for this tut!

  • @iamthomasogun
    @iamthomasogun2 жыл бұрын

    You just saved my life bruh! very simple and clear content.👌

  • @aglhanna
    @aglhanna3 жыл бұрын

    Thank you for this! Helped a lot !

  • @lisabordjah9981
    @lisabordjah99812 жыл бұрын

    I'm starting to use Figma after a few years with Sketch (and of course Photoshop before that), and I must admit I'm pretty AMAZED by it. Thanks for the videos, I keep watching :)

  • @Mizko

    @Mizko

    2 жыл бұрын

  • @JasonGresalfi
    @JasonGresalfi3 жыл бұрын

    Super-helpful video! Love the channel -- thanks for taking the time to share your knowledge!

  • @kristinakicheva480
    @kristinakicheva480 Жыл бұрын

    These tutorials are amazing. Thanks!

  • @theemonitor
    @theemonitor Жыл бұрын

    Thank you, brilliant stuff explained simply.

  • @LivingInColumbiaTennessee
    @LivingInColumbiaTennessee2 жыл бұрын

    Thanks So much man! Watching all your videos in preparation for the master class! ;)

  • @nayana995
    @nayana9953 жыл бұрын

    Your tutorials are just AWESOME ❤️

  • @Mizko

    @Mizko

    3 жыл бұрын

    Than kyou Nayana!

  • @jackmak9941
    @jackmak99412 жыл бұрын

    Mizko you are brilliant! very clear and simple, save my lives!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you!

  • @Ndamoly
    @Ndamoly3 жыл бұрын

    Just subscribed. Awesome video. Learned a ton of stuff.

  • @emmachia5203
    @emmachia52033 жыл бұрын

    Thank you! Have subscribed! its so clear

  • @shruthigoutham8648
    @shruthigoutham8648 Жыл бұрын

    Woahh really helpful video man! It was great that you showed how to design with an example.

  • @karangill2065
    @karangill20652 жыл бұрын

    This guy is awesome, Thanks for your Effort.

  • @DJBremen
    @DJBremen Жыл бұрын

    So helpful, you're a great teacher!

  • @lmd4881
    @lmd48812 жыл бұрын

    jumped on the masterclass, it is epic :)

  • @vinjyou
    @vinjyou2 жыл бұрын

    Nice Guidance for FIGMA..... I can able to work simultaneously in figma and get to how it works ….and for understanding the process it was so helpful...

  • @BobbyCharlz
    @BobbyCharlz2 жыл бұрын

    Great tutorial! Very informative and timely for me. I especially liked the simple manner in how you broke down constraints. I've been working pretty heavily with Figma for the past week or so and every now and then I'd come across a feature-like this one-that more or less tripped me up and begged for extra attention. Taking what I've experienced so far along with what you've presented really helps set me up for success, thank you.

  • @samii3930
    @samii39303 жыл бұрын

    Your videos are amazing! Thanks for making it plain for beginners

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Sami! Really appreciate it.

  • @debiwijanto9049
    @debiwijanto9049 Жыл бұрын

    Great teacher and content. I am looking forward to learning more.

  • @tamaram461
    @tamaram461 Жыл бұрын

    Great explanation! Thank you so much!

  • @ThehighsofLo
    @ThehighsofLo2 жыл бұрын

    Dude you're a wizard. This is gonna save me time! Thank you, thank you, thank you.

  • @Mizko

    @Mizko

    2 жыл бұрын

    🙏🏼

  • @stevendesigner
    @stevendesigner Жыл бұрын

    Really cool! ✨

  • @misohnchen
    @misohnchen2 жыл бұрын

    You really have the best UX tutorial videos 👍🏼 Also really like how you give us time to think about a solution before you present it.

  • @Mizko

    @Mizko

    2 жыл бұрын

    Wow. Humbled, thank you Sohmik!

  • @Geovanna.michelle
    @Geovanna.michelle Жыл бұрын

    wow! youre a really good explainer. this is really helping me.

  • @magaly-eightwavelab
    @magaly-eightwavelab2 жыл бұрын

    You’re a life saver 🙌

  • @salvationim
    @salvationim2 жыл бұрын

    I LOVE your videos! you make our lives so much easier, thank you so much!!!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you!

  • @yuliabilonoh2402
    @yuliabilonoh2402 Жыл бұрын

    Thank you so much! You are a treasure) Really helpful videos

  • @ms.k1178
    @ms.k11782 жыл бұрын

    Thank you for this. Just popped up on my recommendations. I'm working on a social media cover photo and this is what i need!!!!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you!

  • @vaibhavnamburi2756
    @vaibhavnamburi27563 жыл бұрын

    super helpful mizko!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you V!!

  • @joychen1013
    @joychen10132 жыл бұрын

    Thank you so much! This is really helpful!

  • @cyriletiende6629
    @cyriletiende6629Ай бұрын

    Amazing video!🥰

  • @Bestrian
    @Bestrian Жыл бұрын

    Thank you :) Very nice and realatable Tutorials. Keep going!

  • @famosly
    @famosly2 жыл бұрын

    Des explications claires et pertinentes, j'aurai pu payer pour voir cette vidéo ! Merci beaucoup.

  • @bobans
    @bobans2 жыл бұрын

    I learned a lot from your video. I will definitely purchase the masterclass!

  • @livingitup_with_aashi
    @livingitup_with_aashi3 жыл бұрын

    Very nice tutorial!! Thanks!!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Aashi! Glad you found this useful

  • @Umavenugopal
    @Umavenugopal2 жыл бұрын

    is it too early to say I love you? You just saved me so much time with this! thank you so much

  • @michaeljordan49
    @michaeljordan492 жыл бұрын

    Great Videos!! Thank you!

  • @AngelLimitedAccessX
    @AngelLimitedAccessX3 жыл бұрын

    Loved this video! Could you show us how to take the next step and build out this same design and layout in Webflow? Specifically showing how we would set up the constraints and build the grid.

  • @pariadelnia7221
    @pariadelnia72213 жыл бұрын

    your videos are awesome🤩

  • @doxenbridge
    @doxenbridge11 ай бұрын

    Yet again, you ask us to download a file that is not there.

  • @lmd4881
    @lmd48812 жыл бұрын

    thank you soooooooooooo much for this...I have struggled with Figma but thanks to you I know that ctrl f is my friend in need :)

  • @motocruiser92
    @motocruiser922 жыл бұрын

    Awesome. thank you dude

  • @stephanieoparaku
    @stephanieoparaku3 жыл бұрын

    Thanks a lot for this!! Soo helpful.

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Жыл бұрын

    Thanks! At 9:52, there was no "hug contents" option for me when I clicked on the modal auto layout inside the frame (overlay). But, when I set the constraints to center center for the vertical and horizontal axis it worked just like your demonstration

  • @ajisafeaisha2800
    @ajisafeaisha28002 жыл бұрын

    You're an amazing teacher

  • @njengathegeek
    @njengathegeek2 жыл бұрын

    For sure, That's a life saver

  • @sabrinaafrinsimi6964
    @sabrinaafrinsimi69642 жыл бұрын

    Thanks for this amazing video 😊

  • @santiagocolina
    @santiagocolina Жыл бұрын

    thanks for this great vid!

  • @misalsudhir
    @misalsudhir3 жыл бұрын

    You create the magic, by simplifying the complex things.

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Sudhir!

  • @vs3310
    @vs33102 жыл бұрын

    U r the saver of my designer life ✌

  • @creativelizzy.wonder
    @creativelizzy.wonder Жыл бұрын

    So helpful. Thank you Boss

  • @maggiebaker1671
    @maggiebaker16713 жыл бұрын

    You are an angel. Thank you so much for all your videos!

  • @Mizko

    @Mizko

    3 жыл бұрын

    It definitely hurt when I fell down from heaven 🙏🏼

  • @EarngEarth
    @EarngEarth3 жыл бұрын

    Thanks For Tutorial that's useful for me

  • @nataliakozieja9439
    @nataliakozieja94392 жыл бұрын

    Wow you're the best!!! Thank u so much

  • @jakubnerc4805
    @jakubnerc4805 Жыл бұрын

    Finally found the solution, thanks !

  • @Varejka27
    @Varejka273 жыл бұрын

    Such an amazing videos you have! thank you so much for sharing, super helpful

  • @Mizko

    @Mizko

    3 жыл бұрын

    🙏🏼🙏🏼👌🏼

  • @rahulsbhatt
    @rahulsbhatt3 жыл бұрын

    These videos are gold🔥🔥🔥🔥

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thanks Rahul! Glad you found value.

  • @MinalB1539
    @MinalB15392 жыл бұрын

    Thank you. Video is very useful.

  • @erichepperledesigns
    @erichepperledesigns Жыл бұрын

    Nice. I like the Amazon UI look and feel

  • @nasserissat
    @nasserissat3 жыл бұрын

    That was awesome thanks!!! greetings from Dominican Republic u have a new suscriber

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Nasser! Appreciate the support

  • @ThePieas
    @ThePieas3 жыл бұрын

    I owe you a like and a comment because I am already subscribed. And I've just paid my due. Awesome content as always. Life saver. Thanks

  • @thiagodambttr1895
    @thiagodambttr18952 жыл бұрын

    Excelent content! Thanks a lot

  • @akashghadi8131
    @akashghadi81312 жыл бұрын

    all vedios are just amazing i love your way to explain the things - love from india

  • @aniadergachev5380
    @aniadergachev53802 жыл бұрын

    Amazing and very helpful video, thanks!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you Ania!

  • @andrenoore
    @andrenoore2 жыл бұрын

    Hi Mizko, your Figma content really helped me who just switched from Sketch to Figma. I regret why I didn't do it earlier. LOL Thank you!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Haha! Glad you enjoyed it Andre. If you want to learn more advanced techniques, check out my masterclass - thedesignership.com/courses/the-ultimate-figma-masterclass/

  • @stacyjara5098
    @stacyjara5098 Жыл бұрын

    Thank you for this video Mizko! I really appreciate that you don’t rush through it like many other designers on here. I just accepted my first major role with a company and found this video so incredibly helpful!

  • @Miowmio
    @Miowmio2 жыл бұрын

    your guide is more clear and more detailed than the official. I was able to easily complete it without any struggle and with your encouragement to play around with the setting, you are a great designer and teacher mentor. Since your online free tutorial is having such a huge influence and impact on us, is there any difference compared to your paid course?

  • @alfiesolomon3531
    @alfiesolomon35313 жыл бұрын

    And so well explained.....how can anyone dislike this?

  • @Mizko

    @Mizko

    3 жыл бұрын

    Trolls!

  • @delia3644
    @delia36442 жыл бұрын

    u are so cool! Thx a lot!

  • @user-yz4iy4kc6p
    @user-yz4iy4kc6p3 жыл бұрын

    Thanks for this!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Kay for the support! Glad you enjoyed this video ✨

  • @amorghene
    @amorghene2 жыл бұрын

    nxt lvl

  • @asvikram1628
    @asvikram1628 Жыл бұрын

    thank you dude