No video :(

MASTER Figma Auto Layout Constraints & Resizing | Tutorial

Подписаться 26 тыс.

Просмотров 64 тыс.

50% 1

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 - RU-vid Live Workshop
▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
Connect, learn, and grow with fellow designers
www.skool.com/...
▬▬▬ Free Weekly Design Resources ▬▬▬
Sign up in the newsletter to get free resources every week!
www.wiredto.de...
▬▬▬ 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

Опубликовано:

16 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 334

@mayumihashimoto7262 2 года назад

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 RU-vidrs. Thank you so much!!!

@WiredtoDesign 2 года назад

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

@plutonium. Год назад

Animations With Figma ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aMFUuGZ9LEs.html

@MadisonRaye18 Год назад

Same! So easy to follow

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

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

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

🥹

@walfridoneto334 2 года назад

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 2 года назад

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

@aanuopoola Год назад

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

@manikdingra5938 Год назад

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

@WiredtoDesign Год назад

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

@TheRealAfroRick Год назад

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 Год назад

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!

@tkbape Год назад

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

@WiredtoDesign Год назад

Thank u so much!

@lynaejohnson4471 2 года назад

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 2 года назад

Thank YOU! This support is everything 🙏🏾❤️

@kellymcculley7507 Год назад

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 Год назад

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

@zeight Год назад

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.

@WiredtoDesign Год назад

Thank u soooo much for the support 🙏🏾

@MadisonRaye18 Год назад

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

@WiredtoDesign Год назад

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

@sanjamkohli 2 года назад

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!

@WiredtoDesign 2 года назад

Awesome! Let’s go!! 🔥🔥

@KelvinChiuFilms Год назад

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

@WiredtoDesign Год назад

Thank you so much!

@davterem123 2 года назад

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!

@WiredtoDesign 2 года назад

Thank you! Glad I was able to help 🙏🏾

@FarmerChazman Год назад

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

@WiredtoDesign Год назад

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

@hazelflag Год назад

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 Год назад

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

@raphaelregnier867 2 года назад

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 2 года назад

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

@ITC2011AND12 Год назад

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

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

Happy to hear, thank you so much!

@jewon0813 Год назад

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

@WiredtoDesign Год назад

Thank you so much!

@nynlou Год назад

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

@WiredtoDesign Год назад

Glad to hear that it helped!

@mohamedalaa1206 Год назад

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 🙏🏻.

@esbenrose Год назад

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

@WiredtoDesign Год назад

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

@NM-zu3ye 2 года назад

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 2 года назад

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

@renatahelm2961 Год назад

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

@WiredtoDesign Год назад

Hahaha, thank you sooo much Renata!

@user-mt3xq1qg9h Год назад

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

@WiredtoDesign Год назад

Thank you so much for your support!

@TheToysoja 2 года назад

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 2 года назад

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

@TheToysoja 2 года назад

@@WiredtoDesign I'm looking forward to that.

@espressodawn4000 2 года назад

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.

@WiredtoDesign 2 года назад

Thank you!! 🙏🏾

@gstephanie5944 Год назад

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

@WiredtoDesign Год назад

Thank you Stephanie!

@fiveshorts Год назад

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

@WiredtoDesign Год назад

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

@wigzela7083 Год назад

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!

@WiredtoDesign Год назад

Thank you sooo much!

@lanabstar 2 года назад

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

@WiredtoDesign 2 года назад

Thank you so much! 🙏🏾

@someonetookmynick 2 года назад

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

@WiredtoDesign 2 года назад

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

@khaung4413 2 года назад

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

@WiredtoDesign 2 года назад

Thank you! 🙏🏾

@gazallemoraveji2424 Год назад

By far the best explanation of the subject . Thank you

@WiredtoDesign Год назад

Thank you so much Gazalle!

@dheepshemare5833 2 года назад

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

@WiredtoDesign 2 года назад

RU-vid University for the people! ☝🏾 happy you got value 🙏🏾

@MegaSketchbook Год назад

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

@WiredtoDesign Год назад

Really appreciate you!

@glendanascimento1853 Год назад

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

@WiredtoDesign Год назад

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

@sadhucat4476 2 года назад

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 2 года назад

This means a lot! I really appreciate you 🙏🏾

@juliepaddock8186 2 года назад

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

@WiredtoDesign 2 года назад

Thank you so much! Coming up 🙏🏾🔥

@MelindaMatturro 2 года назад

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 2 года назад

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 🔥🙏🏾

@appustudio8637 2 года назад

I want a live session,. way of your teaching is very catchy.

@WiredtoDesign 2 года назад

🔥🔥🔥 Thank you! 🙏🏾

@logisticmaster8318 Год назад

Am Just Impressed About Your TeacNice tutorialng Way About Daw Its Really HelpFull For Begginer Just Like Love From India Tamil Nadu ...

@chiragmittal6212 2 месяца назад

Thanks for sharing such infomative videos with us.

@christeUXUI Год назад

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

@WiredtoDesign Год назад

Appreciate you Christie!

@IramKahkashan Год назад

Awesome explanation for auto layout and constrains Thank you

@capitain0 Год назад

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

@WiredtoDesign Год назад

Happy to hear man! Thank youuu 🙏🏾

@eelsteele7528 Год назад

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

@WiredtoDesign Год назад

You're very welcome! Thank you! 🙏🏽😁

@PBLCDMND 2 года назад

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

@WiredtoDesign 2 года назад

Thank you so much!! 🙏🏾

@nsisongumoren7232 2 года назад

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

@WiredtoDesign 2 года назад

Thank you!

@christosioannou9990 Год назад

Brilliant explanation and perfect tutorial!!! Thanks

@kelseyw587 Год назад

Thank youuuuu been struggling, your video helped so much!

@punithkapoor5309 Год назад

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

@lesliewilliams6342 2 года назад

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 2 года назад

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!! 🙏🏾

@dilantasdemir8248 Год назад

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

@WiredtoDesign Год назад

Thank you for the amazing support 🙏🏾

@user-wm8xl1xe1d 2 года назад

you record with hardware outside of the program. Great tutorial btw it was very detailed but still just right for beginners.

@WiredtoDesign 2 года назад

Thank you! 🙏🏾

@fahimekan Год назад

Very professional content creator. Take love, Boss.👌

@WiredtoDesign Год назад

Thank u so much! 🙏🏾

@MohakGrover 2 года назад

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 2 года назад

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

@chessgm931 Год назад

TNice tutorials guy's tutorial is more understanding than the others

@WiredtoDesign Год назад

Thank you!! 🙏🏾

@lanemeyer77 2 года назад

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

@WiredtoDesign 2 года назад

Appreciate you a lot man!! 🙏🏾

@loveworksinc.5025 Год назад

I want a live sessionnnn😅. this is so good

@ptholm50 Год назад

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🎉

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

Appreciate you!

@karljohannsson1411 Год назад

Exellent tutorial , sir! Great work !!!

@mahammujahid5920 Год назад

The most concise video thankyou

@anthony-9117 2 года назад

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

@WiredtoDesign 2 года назад

Happy to help!

@theado3183 Год назад

Thank you! This video is very helpful!

@petermckinnon386 Год назад

Brilliantly explained.

@jacob.olenick 2 года назад

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

@WiredtoDesign 2 года назад

Thanks a milli! 🙏🏾

@angelacalvin5790 Год назад

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 Год назад

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 Год назад

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

@rakugakid 2 года назад

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

@WiredtoDesign 2 года назад

Happy it helped!!

@badermuteb4552 2 года назад

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

@WiredtoDesign 2 года назад

Thank you for the support! 🙏🏾

@hihi9674 2 года назад

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

@WiredtoDesign 2 года назад

Glad you are! Thanks for the support! 🙏🏾

@jquinnmacrae 2 года назад

Live session please! Thank you sir!

@WiredtoDesign 2 года назад

Let’s go! 🔥🔥🙏🏾🙏🏾

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

Now I understand why Figma has no competition for UI/UX design!

@1989maihan 2 года назад

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

@WiredtoDesign 2 года назад

Thank you!!

@kingsufi6164 Год назад

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

@tygerman2696 Год назад

the ahh hah?! moment. lol Fam thank you so much. What I got from this is that auto layout has its constraints and frames have their own constraints?! and they work together.

@WiredtoDesign Год назад

Exactly!! Happy you got some value from it man 😄

@mandarbhogale1887 2 года назад

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

@WiredtoDesign 2 года назад

Anytime! 🙏🏾

@rajagopenbiswas1855 Год назад

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

@educationplus8829 Год назад

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

@sprite9849 Год назад

Great tutorial, thanks a ton!

@Aquarellina 2 года назад

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

@WiredtoDesign 2 года назад

Thank you for the support!

@willyadenuga4493 2 года назад

I want a live session.. thank you soooo muchhhh

@WiredtoDesign 2 года назад

Glad u liked it!! 🔥🔥🔥

@ekaterinadergam 2 года назад

amazing!What a talented teacher!Exactly what beginners need

@WiredtoDesign 2 года назад

Thank you!! 🙏🏾

@danielwatson6529 Год назад

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

@WiredtoDesign Год назад

Thank you for the sub Daniel!

@necodp 2 года назад

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

@WiredtoDesign 2 года назад

🔥🔥🙏🏾🙏🏾

@mariamgabodze3076 Год назад

Thank you for this video

@WiredtoDesign Год назад

Thank you! And I feel like it’s time for me to set this up now 🔥

@shadesofblaquecreations2796 2 года назад

This was a great tutorial. I want the livestream

@WiredtoDesign 2 года назад

🙏🏾🙏🏾🔥🔥

@marilynyballa809 Год назад

this video helped me. thanks

@Hola-eo4un Год назад

Fantastic video bro, legend.

@shreelathadps391 Год назад

Hey! Thanks so much for this video!

@WiredtoDesign Год назад

Thank you for supporting!

@harshadrokade8563 2 года назад

I want a live session nowww ❤️

@WiredtoDesign 2 года назад

Oh you have no idea what’s coming for y’all this fall! 🔥🔥🔥

@kahanx10 2 года назад

Loved the video, keep on creating!

@vishal.moondkar Год назад

Thanks a lot for simplifying auto layout concept. There is only one challenge i.e I'm not able to resize(stretch) parent frame that holds three auto layout. In updated version of Figma there is no resizing and hug option so how can I fix this?

@sentiasatransformasi Год назад

this guy makes me feel like I'm watching a video on how to produce fire beats

@WiredtoDesign Год назад

Maybe it’s time for me to teach that as well?! 😂🙏🏾 appreciate you!

@olanowacka 2 года назад

So grateful for your channel 🙌

@WiredtoDesign 2 года назад

Thank you so much! 🙏🏾 that means a lot

@usmannaeem Год назад

Can you create a video from a different angle. Deconstructing autolayout and making very quick adjustments by breaking components for quick changes in a live design review sessions. The tips and tricks around that.

@WiredtoDesign Год назад

Excellent idea! Definitely something I'm planning on doing in a future live stream.

@Phoebe11117 2 года назад

Awesome explanation!

@WiredtoDesign 2 года назад

Thank you!!

@NoName-im9rp Год назад

Thanks brother

@khirulanam2793 2 года назад

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

@WiredtoDesign 2 года назад

Thank you! Let’s go! 🔥🔥🔥

@azarmohamed6973 Год назад

Very useful infos with Detailed explanation. Can two object shapes of ( union, subtract, intersect, exclude) be done, when (rectangle x circle) frame is in auto layout.

@WiredtoDesign Год назад

That’s a great question! I haven’t tried out that myself, but based on the logic and use cases for each (shapes being created by rectangles/and other shapes VS auto layouts being created by containers/frames) I’d say that may not be possible. They’re intended to do two different things. Shapes = vector shapes. Whereas frame containers contain objects.