MASTER Figma Auto Layout Constraints & Resizing | Tutorial

Sdílet
Vložit
  • čas přidán 5. 08. 2024
  • Figma auto layout, frame constraints, resizing...Figma auto layouts and frames can get really frustrating. I know that, and I don't blame you. But the good news is that you'll be able to take your first steps towards mastering Figma auto layout and frames by the time you finish this video. I'm breaking this down into three main sections, to help you become a better, faster, and a more productive UX and UI designer while you're on Figma.
    ▬▬▬ Video Chapters ▬▬▬
    00:00 - Introduction
    00:54 - Frame Constraints
    03:46 - Auto-layout Resizing, Alignment & Padding
    08:27 - Combine It All
    10:00 - CZcams Live Workshop
    ▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
    Connect, learn, and grow with fellow designers
    www.skool.com/wired-to-design
    ▬▬▬ Free Weekly Design Resources ▬▬▬
    Sign up in the newsletter to get free resources every week!
    www.wiredto.design/
    ▬▬▬ Who am I? ▬▬▬
    Anik Devaughn
    Instagram: / anikdevaughn
    Twitter: / anikdevaughn
    ▬▬▬ Say whatsup! ▬▬▬
    Instagram: [ / wired2design ]( / wired2design )
    Twitter: [ / wiredtodesign ]( / wiredtodesign )
    #figma #autolayout #ux #ui #uxdesign #constraints #figmaconstraints #figmaframes #frames #resizing #components #ui #mockup #designprocess

Komentáře • 334

  • @mayumihashimoto7262
    @mayumihashimoto7262 Před 2 lety +46

    This is the best video on constraints & auto layout I have ever seen. I was so confused by it even after watching figma official vids or other CZcamsrs. Thank you so much!!!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety +1

      Oh wow, so happy to hear that! Thank you so much 🙏🏾

    • @plutonium.
      @plutonium. Před rokem

      Animations With Figma czcams.com/video/aMFUuGZ9LEs/video.html

    • @MadisonRaye18
      @MadisonRaye18 Před rokem

      Same! So easy to follow

  • @brunoescoto9630
    @brunoescoto9630 Před 9 měsíci +2

    i'm gonna cry. finally i found a video that explains this in a very simple, straight forward way. thanks a ton

  • @walfridoneto334
    @walfridoneto334 Před 2 lety +16

    Thank you! I've been struggling with Auto-layout inside components for a long time, and in 10 minutes you taught me all I needed to get it working. You rock!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      That’s amazing! Happy I was able to help. Thank you for the support! 🙏🏾

  • @lynaejohnson4471
    @lynaejohnson4471 Před 2 lety +3

    This has been the most clear explanation of constraints and auto layout I've been able to find! I clicked on the video because the title screen so perfectly summed up how I've been feeling about trying to get the constraints to behave how I want them to! Thank you so much!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem +1

      Thank YOU! This support is everything 🙏🏾❤️

  • @davterem123
    @davterem123 Před 2 lety +1

    Unlike a lot of videos I've seen about this topic, you break this down into clear first principles and built up my understanding from there. So much easier. Thanks!

  • @aanuopoola
    @aanuopoola Před rokem

    You are my best teacher for Figma, jus as Piximperfect is a great teacher for Adobe. You are amazing. I am grateful I found your channel. I love you. Thank you so much

  • @zeight
    @zeight Před rokem +4

    I wish I could like this video 100x. The absolute best video out there explaining auto layout and constraints! Definitely feeling more confident after watching your tutorial. Thank you so much for giving me the clarity I needed.

  • @kellymcculley7507
    @kellymcculley7507 Před rokem +2

    By far the best video on auto layout and constraints I’ve seen so far. Most videos gloss over constraints like it’s obvious. I appreciate how you explain so explicitly and thoroughly how the constraint settings work. Thanks for sharing this with everyone! 😃

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      I’m so happy to hear this helped you Kelly! Thank you for the support 🙏🏾

  • @NM-zu3ye
    @NM-zu3ye Před 2 lety +3

    Thank you so much! Best channel for me as a UX/UI student! Have you been a teacher before? You explain everything in such an easy way. I wish our teachers at school taught half this well.
    Thank you again!❤️❤️

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety +1

      Thank you so much ❤️🙏🏾 I’ve been teaching and mentoring most of my life, predominantly in other creative endeavors

  • @TheRealAfroRick
    @TheRealAfroRick Před rokem +2

    I've watched a number of these layout videos. I'm a developer, not a designer, so some of this is still a bit foreign to me - but I can definitely say that YOUR video is the first time that I've actually felt like I really understood what you were saying.
    Thanks for sticking to teaching the basics first!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem +1

      Hey!! I'm so happy to hear that this video helped you gain a better understanding of layout concepts. As a developer, it's awesome that you're taking the time to learn more about design principles, and I'm thrilled that my approach to explaining the basics resonated with you 🙏🏽 I truly believe that a strong foundation is crucial for anyone looking to expand their skills, regardless of their background. If you have any questions or need further clarification on anything, please don't hesitate to ask. Keep up the great work, and thanks a mill for your support!

  • @lesliewilliams6342
    @lesliewilliams6342 Před 2 lety

    Auto layout still trips me up sometimes. This was great!!! Love seeing this videos continue to push out. I know you're helping so many people including me still!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      It can really get confusing at times. Let me know if you have any specific problems that I can help out with 🙌🏾
      Thank you Les!! 🙏🏾

  • @mohamedalaa1206
    @mohamedalaa1206 Před rokem

    I'm stell a noob designer and yor video was really easy to follow and addressed the frustration I had with the auto layout. Thanks 🙏🏻.

  • @raphaelregnier867
    @raphaelregnier867 Před 2 lety +1

    This video really made me understand the basics of auto layout, but the hole Figma Tutorials playlist is awesome! Thanks man, please keep them coming!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety +1

      Super happy to hear that! Thank you. More to come!

  • @lanabstar
    @lanabstar Před 2 lety

    This is the most clear explanation I’ve found for auto layout and constraints so far, thank you!

  • @christosioannou9990
    @christosioannou9990 Před rokem

    Brilliant explanation and perfect tutorial!!! Thanks

  • @kelseyw587
    @kelseyw587 Před rokem

    Thank youuuuu been struggling, your video helped so much!

  • @user-mt3xq1qg9h
    @user-mt3xq1qg9h Před rokem

    I've watched a lot of videos and tutorials on the topic of "auto layout" and "constraints" and so far I've been struggling with it. Thank you for this video and this tutorial. ❤

  • @rakugakid
    @rakugakid Před 2 lety

    This is SO incredibly helpful and exactly what I needed to better understand auto layout. Thank you very much!

  • @esbenrose
    @esbenrose Před rokem

    First video iv'e seen with you. Really like your calmness and conficence - that makes ME calm and confident!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem +1

      I never knew how much of an impact that could have on others - thank you for letting me know! Really appreciate that 🙏

  • @rajagopenbiswas1855
    @rajagopenbiswas1855 Před rokem

    loved it! to the point and action packed! Thank you!!

  • @manikdingra5938
    @manikdingra5938 Před rokem

    You are a living god among n, a legend worthy of praise. What you've uploaded here, will echo into eternity!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      Thee most epic comment EVER 😅 thank u sooo much for the support! 🙏🏾

  • @KelvinChiuFilms
    @KelvinChiuFilms Před rokem +1

    Finally, someone who's explaining it nice and slow. Thank you x100.

  • @IramKahkashan
    @IramKahkashan Před rokem

    Awesome explanation for auto layout and constrains
    Thank you

  • @tkbape
    @tkbape Před rokem

    man i never comment on yourube videos, but you were the only video who actually explained this concept well.

  • @chiragmittal6212
    @chiragmittal6212 Před měsícem

    Thanks for sharing such infomative videos with us.

  • @punithkapoor5309
    @punithkapoor5309 Před rokem

    bro thanks so much, you actually made soft soft easy to understand

  • @ptholm50
    @ptholm50 Před rokem

    Thanks for making these fundamental concepts so easy to understand. I really appreciated the pace and clarity! Best video on auto layouts and constraints I’ve seen🎉

  • @karljohannsson1411
    @karljohannsson1411 Před rokem

    Exellent tutorial , sir! Great work !!!

  • @ITC2011AND12
    @ITC2011AND12 Před rokem

    This is the best video on constrains & auto layout I have seen. I was so confused before, thanks!

  • @capitain0
    @capitain0 Před rokem

    You slammed this topic. Loved the simple, step-by-step guide you used. Took my autolayout game up a big notch!

  • @educationplus8829
    @educationplus8829 Před rokem

    What a great video. Very clear explanation, thanks a lot!

  • @theado3183
    @theado3183 Před rokem

    Thank you! This video is very helpful!

  • @christeUXUI
    @christeUXUI Před rokem

    great help, you keep it simple but still in depth.

  • @sanjamkohli
    @sanjamkohli Před 2 lety +1

    I WANT A LIVE SESSION.
    I have struggled with these concepts for days and was so frustrated till I came across this video. So wonderfully explained! Thank you so much!

  • @juliepaddock8186
    @juliepaddock8186 Před 2 lety

    The best tutorial I’ve seen on Figma auto layout. Your style of teaching is so good! I’d love a live session…

  • @someonetookmynick
    @someonetookmynick Před 2 lety

    After countless videos, this one specifically finally made it click for me. You da best dude!!!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      Wooow that’s amazing!! Happy to help 🙏🏾

  • @wigzela7083
    @wigzela7083 Před rokem

    Man I have been having trouble trying to figure out what to use for fixed, hug, fill, auto-layout, constraints and when to use them, this really helped me out a lot, you're awesome man, thank you!

  • @khaung4413
    @khaung4413 Před 2 lety

    Very clear instructions.I’d love to see your more videos about ui and figma tool from you

  • @nynlou
    @nynlou Před 11 měsíci +1

    Your tutorial is the first tutorial that makes it clear to me!! Thanks a lot!!

  • @gstephanie5944
    @gstephanie5944 Před rokem

    Thank you for approaching both constraints and auto layout in this tutorial it helped me understand how to use both 👍

  • @jacob.olenick
    @jacob.olenick Před 2 lety

    This is the best video on youtube for auto-layout. Thank you so much! Subscribed!

  • @eelsteele7528
    @eelsteele7528 Před rokem

    Thanks so much for this tutorial; it was easy to follow and helped me with understanding these concepts. Thank you!

  • @lanemeyer77
    @lanemeyer77 Před 2 lety

    Dude your channel has the best and clearest explanations ii've seen in all of yt. Hope you keep making content! I want a live session! lol

  • @kingsufi6164
    @kingsufi6164 Před rokem

    thank you. Felt like woah.... this is soooooooooo helpful.

  • @PBLCDMND
    @PBLCDMND Před 2 lety

    Dude, you're the man!
    I struggled hard finding a tutorial which is explained properly.

  • @MadisonRaye18
    @MadisonRaye18 Před rokem

    You speak in a language that I actually understand. You laid out everything so easily for me to understand. Thank you!!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      I'm so happy it helped you! Thank you. I'd love to hear what else you'd like to learn.

  • @sprite9849
    @sprite9849 Před rokem

    Great tutorial, thanks a ton!

  • @MohakGrover
    @MohakGrover Před 2 lety

    Thank you so much man! I've been struggling with Auto layouts for a while. Needed a nice explainer.
    I WANT A LIVE SESSION!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      Thank you for the support! 🙏🏾
      🔥🔥🔥 let’s go!

  • @hazelflag
    @hazelflag Před rokem

    I'm not going to lie, I wasn't expecting much from this, but you proved me wrong!!! This was one of the best ways to explain why auto layout can make you crazy. The first minute and a half I felt the light bulb go off! Suddenly things are clicking. Thanks so much.

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      Oh wow!! That’s incredible. I am so happy it helped. Thank you!

  • @badermuteb4552
    @badermuteb4552 Před 2 lety

    this is by far the best video i found on youtube. thank you so much

  • @kahanx10
    @kahanx10 Před 2 lety

    Loved the video, keep on creating!

  • @MegaSketchbook
    @MegaSketchbook Před rokem

    Thus far, this has been the most helpful tutorial I've come across. Thank you.

  • @FarmerChazman
    @FarmerChazman Před rokem

    Incredibly knowledgeable and we'll-spoken teacher. Nice tutorials comfortableness with the subject makes starting soft real exciting!!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      Thank u so much for the kind words Sagar! 🙏🏾

  • @petermckinnon386
    @petermckinnon386 Před rokem

    Brilliantly explained.

  • @mahammujahid5920
    @mahammujahid5920 Před rokem

    The most concise video thankyou

  • @glendanascimento1853
    @glendanascimento1853 Před rokem

    Dude, this is the only video that works. Thanks for posting!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      Happy to hear it helps! 🙏🏾 thank u for the support

  • @sadhucat4476
    @sadhucat4476 Před 2 lety

    Just found this video. This style of communication works really well for me. Gonna check out what else this guy has to teach, I feel like I could learn anything from him.

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      This means a lot! I really appreciate you 🙏🏾

  • @TheToysoja
    @TheToysoja Před 2 lety

    I NEED A LIVE SESSION! I've been ripping my hair out trying to u understand auto-layout, then came the updates. This is just what I needed. I'll be watching it over and over until I master it. Thank you.

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety +1

      Now with the new auto layout being launched, the live session is coming very soon! 🙏🏾

    • @TheToysoja
      @TheToysoja Před 2 lety

      @@WiredtoDesign I'm looking forward to that.

  • @Aquarellina
    @Aquarellina Před 2 lety

    Thank you for explaining this so nicely it was very easy to follow and clear

  • @gazallemoraveji2424
    @gazallemoraveji2424 Před rokem

    By far the best explanation of the subject . Thank you

  • @nsisongumoren7232
    @nsisongumoren7232 Před rokem

    You saved my day. Very well explained, thank you.

  • @ekaterinadergam
    @ekaterinadergam Před 2 lety

    amazing!What a talented teacher!Exactly what beginners need

  • @anthony-9117
    @anthony-9117 Před 2 lety

    Thanks for explaining a confusing area of figma. This was a very clear and helpful presentation.

  • @espressodawn4000
    @espressodawn4000 Před rokem +1

    Love the thumbnail for this video - that’s exactly how I feel about Figma’s auto layout as I‘ve been going through this learning curve. This video explains these concepts well and better explained than Figma.

  • @marilynyballa809
    @marilynyballa809 Před rokem

    this video helped me. thanks

  • @hawalk5707
    @hawalk5707 Před 2 lety

    Thanks and Very useful!!!

  • @angelacalvin5790
    @angelacalvin5790 Před rokem

    This was such great vid. You really explained it so clearly in a way it was easy to understand. I hope you do more. I need to check out your other vids. I really wanna master auto layout and responsive design. I am self teaching UI design.. so vids like these help!

    • @WiredtoDesign
      @WiredtoDesign  Před rokem +1

      Happy this one helped Angela! Would love to know if there’s anything specific you need guidance with as well, taking on requests all the time 🙏🏾 Thank u for supporting!

    • @angelacalvin5790
      @angelacalvin5790 Před rokem

      @@WiredtoDesign I haven't taken a look yet at all your vids, but I am always looking for a good understanding of the grid system! I like to watch a few channels of people to see what is said. Overall it is pretty confusing since everyone has something different to say. I wanna know what is typically used and how it is set up... mobile, tablet, desktop etc. I work in Figma. So if you have already or will drop a vid like this, it would be great!🙂

  • @Hola-eo4un
    @Hola-eo4un Před rokem

    Fantastic video bro, legend.

  • @jewon0813
    @jewon0813 Před rokem

    Comments explain the value of this video. Thanks for letting us know how to master it! 🙌

  • @renatahelm2961
    @renatahelm2961 Před rokem

    I WANT A LIVE LESSON
    this dude rocks!!! always helpful AF and c'mon, dudes so cool haha

  • @qty.4206
    @qty.4206 Před rokem

    Thank you man!

  • @dilantasdemir8248
    @dilantasdemir8248 Před rokem

    This video saved my life!! Best video ever. Thank you for everything. 💃 🌸 🌸 🌸

  • @slovvedreverb
    @slovvedreverb Před rokem

    Great video, keep it up

  • @danielwatson6529
    @danielwatson6529 Před rokem

    agreeing with people below that this is awesome tutorial and excited to see ur other vids as a new sub

  • @olanowacka
    @olanowacka Před 2 lety

    So grateful for your channel 🙌

  • @shreelathadps391
    @shreelathadps391 Před rokem

    Hey! Thanks so much for this video!

  • @mandarbhogale1887
    @mandarbhogale1887 Před 2 lety

    Thanks for sharing the Auto Layout & Resizing | Tutorial Concepts tutorial

  • @dheepshemare5833
    @dheepshemare5833 Před 2 lety

    Absolutely golden content, actually figured this shit out in about 30 min! CZcams has taken over my formal education!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      CZcams University for the people! ☝🏾 happy you got value 🙏🏾

  • @1989maihan
    @1989maihan Před 2 lety

    You’re the best!! Thank you from Aus
    🇦🇺

  • @MelindaMatturro
    @MelindaMatturro Před 2 lety

    This video thumbnail is literally me. Still getting used to figma after switching from sketch and I end up skipping on auto layout after losing my mind over it, even though I know it saves time once it’s figured out. Thank you for this tutorial!!

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      Haha happy the thumb resonated with you! It definitely takes some time, but once you have it locked in like second nature, you’ll be flowing faster through your mockups and wireframes 🔥🙏🏾

  • @loveworksinc.5025
    @loveworksinc.5025 Před rokem

    I want a live sessionnnn😅. this is so good

  • @fahimekan
    @fahimekan Před rokem

    Very professional content creator. Take love, Boss.👌

  • @tiagopesce
    @tiagopesce Před rokem

    extremely helpful! tyvm

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      I'm happy you found it helpful! Thank youu for the support 😁

  • @hihi9674
    @hihi9674 Před 2 lety

    Good stuff man. You explained it well. I'm getting better everyday at this shit.

    • @WiredtoDesign
      @WiredtoDesign  Před 2 lety

      Glad you are! Thanks for the support! 🙏🏾

  • @fiveshorts
    @fiveshorts Před rokem

    Good tutorial. No wasted words and you didn't build a button. Everyone builds a button and calls it button.

    • @WiredtoDesign
      @WiredtoDesign  Před rokem

      Thank u! And yes I agree, it’s always a button right? 😂

  • @Phoebe11117
    @Phoebe11117 Před 2 lety

    Awesome explanation!

  • @melvilleparrish4848
    @melvilleparrish4848 Před 2 lety

    fire tutorial and beat

  • @savageafricacreativegroup284

    this is great

  • @aradi8819
    @aradi8819 Před 2 lety

    Beautiful tutorial

  • @NoName-im9rp
    @NoName-im9rp Před rokem +1

    Thanks brother

  • @prodbyprodby1633
    @prodbyprodby1633 Před rokem

    I agree with the others, this is one of the best videos on the subject - period. Thank you, Anik! Insta-subbed 🔥

  • @casange1s
    @casange1s Před 2 lety

    Thanks a lot

  • @elmagnifico647
    @elmagnifico647 Před rokem

    Thank you

  • @uxmunzir
    @uxmunzir Před 2 lety

    very helpful

  • @ikennagibson3933
    @ikennagibson3933 Před 2 lety

    You are a legend mate🙌🏻

  • @micalcre8ts
    @micalcre8ts Před rokem

    bruh new sub here keep it fire!!! much appreciated

  • @necodp
    @necodp Před 2 lety

    Great video mate! I want live session!!!!

  • @khirulanam2793
    @khirulanam2793 Před 2 lety

    Great content!
    Want more!
    Please convey a live session!

  • @jaysenb
    @jaysenb Před 2 lety

    this is fire!

  • @nilofarahmed-vs7st
    @nilofarahmed-vs7st Před 11 měsíci

    Thank you so much