Figma Tutorial: Auto Layout & Constraints

Welcome to a new Figma tutorial on using constraints and auto-layout in Figma. In this tutorial, I will be showing you how to speed up your design process by utilizing these powerful features in Figma. By the end of this video, you will have a solid understanding of how to set up constraints between elements and how to use auto-layout to create responsive designs that automatically adjust to different screen sizes and orientations. This is one of the most powerful things you can learn to do in Figma, so be sure to pay attention and take notes. Let's get started!
1. Introduction to Figma - • Figma Tutorial: A Begi...
2. Responsive Grids - • Figma tutorial: Respon...
3. Typography Scale - • Figma tutorial: Typogr...
4. Responsive Type Scales - • Figma Tutorial: Respon...
5. Auto Layout & Constraints - This Video
6. Creating Components - • Figma Tutorial : Creat...
7. Figma Variants - • Figma Tutorial: Figma ...
8. Prototyping - • Figma Tutorial: Learn ...
9. Interactive Components - • Figma Tutorial: How to...
10. Figma Smart Animate - • Figma Tutorial: Smart ...
11. Figma to Webflow - • Figma to Webflow plugin
BECOME A DESIGN MASTER
🔥 www.uxlab.academy/
🧑‍🎓 Learn Product Development: bit.ly/45FsPrw
🧑‍🎓 Free Figma Course: bit.ly/3NeAQg3
AFFILIATE LINKS
These links are affiliates. Clicking may earn us a small commission at no extra cost to you. We only recommend trusted products. Your support through these links directly backs our channel. Thank you for being part of this fantastic community!
🖥 Try Webflow: bit.ly/3RBppjp
✨ Try Figma: bit.ly/3vlzF7O
💬 Try FigmaJam: bit.ly/3vnsY59
🔥 Try Figma Premium: bit.ly/48or1Uu
📝 Try Notion: bit.ly/3vPecVc
🗓️ Try Reclaim Ai: bit.ly/499Au2f
CONNECT WITH ME
🐦 Twitter / X: bit.ly/3WSi3tV
📸 Instagram: bit.ly/43Gp8Ab
📹 KZbin (Subscribe): bit.ly/3RGcrkB
Hashtags
#uxdesign #uidesign #uxdesigner #uidesigner #uidesigntutorial #uxdesigners #figmatutorial #figmadesign #learnfigma #tutoruials #2023
#learnuxdesign #learnuidesign #figma #figmamasterclass #masterclass #deigner #design #uidesigners #userinterfacedesign #userexperiencedesign #designtutorials #designtutorial #figmatips #figmaplugins #figmatutorial #productdesign #productdesigner #solopreneur #solopreneurs #solopreneurlife #solopreneurship #elearning
#elearningplatform #learnonline #onlinelearning #onlinelearningplatform #onlinelearningteaching #autolayout #constarins #autolayoutfigma
#figmaautolayout

[@DennisLeoca]

I hope you had a great time watching this video! If you have any questions or comments, feel free to drop them below. Also, don't forget to check out the video description for the full list of videos in this Figma series. Have a smashing day and I will see you in the next video!

[@user-qb8sl8vx5u]

After lots of tutorials, this is the first one that made me understand how to make a responsive design. Thank you very much

[@DennisLeoca]

So happy to hear that! Thank you for the comment means a lot! And well to the community! 🙌🏼

[@mariat2259]

This is the only video that helped me to understand how the auto layout and constraints work together, thanks so much!! I love that you managed to explain this concept in only 15 minutes:)

[@DennisLeoca]

Thank you Maria! Glad to hear this 🙏🏼

[@susmitanag9782]

Finally I got my answer of my confusion about why this set by default fixed . Thank you 😊

[@DennisLeoca]

Glad to hear it helped! 😊

[@MsTimisoreanu]

Thank you very much. That made me easily understand how auto layout works. 😊

[@joelcervantes6919]

GREAT VIDEO! Thank you so very much for posting this, it really helped me understand Auto Layout & Constrains.

[@Pollllz]

Yes I'm using auto layout! And yes I have watched tons of videos on it in order to get my head around it - and no it's not easy! But it's sooooo worth learning for speeding up the design process.This is an extra helpful video with the constraints demo - thanks so much for creating it!

[@DennisLeoca]

Thank you Polly for your kind words 🙏🏼, and I'm very glad to hear that you found the video useful. I completely agree with you, life without Auto Layout is not the same 🤣

[@user-zt4oq5lf1k]

Thank you so much, brother. Despite watching numerous videos, I couldn't grasp a single concept. However, this particular video effortlessly made its way into my understanding.

[@DennisLeoca]

So glad to heat that 🙏🏻 And reality happy for you. Auto Layout will speed up your design process tremendously 😊

[@ahlamali6479]

This is what I was waiting for, thanks

[@DennisLeoca]

Your welcome Ahlam! If you have any questions please feel free to ask 😄

[@ln9356]

This was soo helpful! Thank you!

[@emmanuel_kolawole]

This is an amazing tutorial, first time I'm getting how to use auto layout

[@DennisLeoca]

Hey Emmanuel, so happy to hear that 🥳 , well done!

[@suhanamedappa2480]

Yes, I use auto layout on a regular basis. Look forward to your videos.

[@DennisLeoca]

🙌🏼 well done, looks like you’re already a pro! Thank you 🙏🏻

[@laurapandjatcharam]

Thank's so much! I finally understood the auto-layout and the constraints, too clearly and you explains very well :)

[@DennisLeoca]

Thank you 🙏🏻 so happy to hear this! Really glad to hear that the tutorial helped ☺️. An well done for learning auto-layout and constraints 🙌🏼

[@ObaUIUX]

I super enjoyed the tutorial. Subscriber alert. I am so going to watch the other videos. Finally!!! Auto-layout demystified. Thanks Dennis

[@DennisLeoca]

Thank you 🙏🏻 So happy to hear that I managed to demystify Auto-Layout for you 🙌🏼

[@surendharp8056]

Thank you so much for making this video! Now, everything is cleared about autolayout

[@DennisLeoca]

You’re most welcome. Happy to hear that it helped out 😉

[@argapratama9784]

Thank you so much, this heal my pain on auto layout. keep going!

[@DennisLeoca]

So happy to hear this Arga! Glad it helped you out 🙌!

[@ReviveThirty]

Well described!

[@DennisLeoca]

Thanks!

[@user-bv2qd5wt1q]

Amazing tutorial Dennis! Thank you so much!! You know how to teach! Everything is very clear for me now. Really appreaciated

[@DennisLeoca]

Hey Nazlı ! Thank you this means a lot 🤗

[@rehanjamali5829]

Thank You bro, It was so much helpful,

[@zydbinak2561]

Simply Thanks ❤

[@DennisLeoca]

You’re most welcome 🙏🏻

[@contatofvn]

Incredibly good this video! Thank you so much for sharing, it helped me a lot!

[@DennisLeoca]

So happy to hear that! You are most welcome 🙏🏻

[@thesoftestgloww]

Thank you!! I'm a beginner designer and your videos help me a lot. It's was a bit difficult for me to make everything look as it should for the first time, but I think I'm starting to get it! Hope that with more practice I'll nail it. Auto layouts are seriously useful!

[@DennisLeoca]

Hello melkqq! I'm so glad to hear that! With practice, it will indeed become second nature. By the way, we still have open spots on our Slack channel. If you're interested, you can get access through www.uxlab.academy/. After filling in your details, you'll receive the link to our Slack in an email. Feel free to join the channel if you'd like. Our Slack community is meant to be a small and supportive group where we can help each other with tips, job opportunities, design reviews, and other valuable information. Currently, it's free to join, but once we launch the platform, it will only be available to premium users. Thank you again for watching the video and your comment and best of luck in your learning endeavours!

[@thesoftestgloww]

@@DennisLeoca Thanks a lot! Just joined the community)

[@hehe77733]

Thank u Dennis,very helpful 😃

[@DennisLeoca]

My pleasure Katarina 🙏🏼! Happy to hear that you liked the video! Thank you 🤗

[@EmpoweredLady]

Totally wonderful 🎉

[@DennisLeoca]

Thank you 🙏🏻

[@elysiumcore]

I followed along and made it thanks mate

[@DennisLeoca]

Nice 🙌🏼. Your most welcome 🙏🏻

[@lamarlong6196]

it all made sense after i watched this. thank youuu 🙏🏾

[@DennisLeoca]

My pleasure. So happy to hear that 🙏🏻

[@w0mblemania]

Thanks for the tutorial. A small addition about adding Auto Layout to text. You can just add text to the page, then press Shift A to add AutoLayout (and a Frame) to it. (i.e. you don't need to add a frame to the text first.) Cheers.

[@DennisLeoca]

w0mbles, you are a legend 🙌. I can't believe I did not know that shortcut. Thank you for sharing this 🙏🏼. Since your comment, I started looking into all Figma shortcuts and I found another one that I was not aware of Shift + 2 this will zoom in to objects that are selected on the Figma file. And if you don't select anything it will zoom so that you see all your frames on the screen 😱. Thanks again for sharing this 🙏🏼

[@samamukh]

The only video which helps me to understand the difference between auto layout n constraints 😅, I was so confused between these two

[@DennisLeoca]

Happy to hear it helped!

[@iamdciax2]

This is great. You are a good tutor.

[@DennisLeoca]

Thank you! I appreciate it 🙏🏻! And happy to hear you found it useful ☺️

[@chriscogan6131]

Thanks a lot! This was really helpful

[@DennisLeoca]

Thank you! So happy to hear this! 🙏🏼

[@akulinia]

Wow! Thank you!

[@DennisLeoca]

No problem, happy to hear that it helped 🙏🏼

[@enricclemente193]

Thanks, mate! Keep it up!

[@DennisLeoca]

Thank you Enric! Really appreciate it 🙏🏻

[@edenkefale7129]

Amazing way of explaining!

[@DennisLeoca]

thank you 🙏🏻

[@faten6554]

Great explanation Denis Thank you

[@DennisLeoca]

You're most welcome! Happy to hear this!

[@suyashtiwari5099]

You got really awesome teaching skills bro

[@AllenCenteno]

This was so helpful! I didn’t understand this concept from the course

[@DennisLeoca]

So glad to hear this! Thank you! 🙏🏼 And I'm supper stoked for you that you know how to use Auto Layout now. You will see that this will be a game changer on how fast you will be able to create designs from now on! 🎉

[@moetainnyo96]

thanks for teaching so clearly

[@DennisLeoca]

Pleasure is all mine! Happy to hear it was helpful 🙌🏼

[@kizseafloralde2022]

This is a great help! I'm just new to auto layout and constraints, and I must say, it is so difficult as someone who is just starting to learn Figma.

[@DennisLeoca]

So happy to hear that it helped out! And yes it's indeed difficult when you first start out, but give it some time. You will see that once you get the hang of it it will become like second nature 😄.

[@nellymanukyan7665]

Thank You for crear explanation. It was so useful 👌🏼

[@DennisLeoca]

🙏🏻 Thank you! Happy to hear that it helped you out 😊

[@clotildadaniels6453]

Thanks a lot 🎉

[@DennisLeoca]

Thank you as well Clotilda 🙏🏼!

[@sushmanp890]

very helpful video. Thank you for sharing it😊

[@DennisLeoca]

My pleasure 😊 Sushma, Happy to hear this! Thank you! 🤗

[@sikandarmushtaq48]

Great very helpful video ❤❤

[@DennisLeoca]

Thank you Sikandar 🙏🏼

[@emeraldezy9675]

Wow. Amazing tutorial. I am at the phase were auto layout is stressing me out. Hopefully I pass this phase just like you and master it well. Thanks for your videos. So Helpful

[@DennisLeoca]

Hahah, don't be stressed out. It's normal, we all went through it when we first started out. Just keep practicing and you will see that you will get the hang of it. Once you do I promise you will only use auto-layout, that's because it's such a time saver!

[@MMaaz-xd6rk]

WOOOOOAHHHH finally i understand it

[@DennisLeoca]

🙌🙌🙌

[@zaynstudio6218]

bro i subscribed you 😋❤ for this amazing content

[@DennisLeoca]

Haha 😂 Thanks man 🙏🏻 I appreciate it a lot! 🤗

[@anujrana5462]

quality content

[@DennisLeoca]

Thank you Anuj 🙏🏻. And thank you watching the video 😊

[@VeronikaPavlova-j2g]

Thanks for the video, everything is expressed clearly! Could you, please, tell if there is a chance to adapt the size of the text to the size of the frame? For instance, the frame becomes smaller and I want the font to change to a smaller size too. Thank you in advance for your response!

[@cristianleoca1252]

👏👏👏

[@WB-zr7pq]

I was hoping min-max logic had dropped when I saw this. The standard fr logic for a grid is nice but I need more control to match proper code based layouts. Lots of tricks to make mins happen but cant wait for them to add more options to the tools.

[@DennisLeoca]

Oh man, I would have loved that as well! But to be honest I hope that this new collaboration with Webflow will push them to add more CSS properties directly in Figma. I really believe that we are getting closer to bridge that gap between design and front-end. The lines are getting pretty blurry already 😅. Thanks for checking out the video, and appreciate your comment 🙏🏻

[@BEPrimAnim]

Hey, I have a question. How do I make a UI element with a dropdown menu that moves the bottom objects below upon collapsing using prototyping? That would be very helpful in my work. Cheers!

[@DennisLeoca]

Hey BEPrimAnim! To achieve this you have to create a component with 2 variants close and open. After you do this this component it inside a frame that has auto-layout. Inside this frame you will add all your components and elements. Now when you change the variant state all that content will be pushed. Hope this makes sense This might be easier if I would just create a short video about it. Will add it to my list 😄

[@emeraldezy9675]

Hi. I know its not a recent video. But I would appreciate if you can respond to this. How do you set the container if the input field is bigger than the one above? Let say multiple input field where users have to type in long messages. Thanks

[@DennisLeoca]

Hey! Don't worry I still offer full support even form my old videos 🤣🤣🤣. For those instances I simply increase the Bottom Padding of my message box. Eg if I have on my input field a padding of 12px on all sides on my message box I will have the same 12px except on my Bottom Padding which I will usually set to around 3x so that will be 36px. Or you can set your Height to Fix Height but personally I like just changing the paddings. Hope this answers your question 😊

[@zaynstudio6218]

wow

[@DennisLeoca]

Is this a bad wow or a good wow 🤣?

[@maliksewedo6395]

I am having problem using constraints after using the Auto layout, i can't find the constraints on my properties panel, I'm confused

[@DennisLeoca]

Well the auto-layout becomes your constraints. That’s why when you apply it to your elements you have that box in the property panel where you can choose how elements should align. In more simple words that blue box represents your constrains and those properties like fixed, hug and fill container represent the rules for the content inside your frame. One dictates your content where to stay when you resize the frame the other one tells the elements how to behave when the frame is being resized. Hope this all makes sense 😅

[@linzee18]

since it's been one year of making this video, did figma fix the auto-layout bug that dennis talks about?

[@jan6743]

What is the difference between "fill the container" vs constraints "left and right"? They both create responsive design..

[@DennisLeoca]

Hey Jan! So the fill container is telling the component how to behave inside other components while the constrains tells the element where to stay while the outer components resize. This might be a strange analogy but here it goes 🤣. Imagine that you are instructed to go inside a room where you have other people (this will be your other components 😅, and the room is your container) and I instruct all of you to not leave the room, but if the room expands you can move about (this is fill container). Now I start expanding the room so everyone starts using the entire space because my instruction was for you guys not to leave the room. So I come back and I tell you ok you guys when the room expands should always stay to the left part of the room no mater what, then I go to another group and I direct them to stay at the top, so if the room only expands sideways you guys don't move...and so on (these will be the constrains instructions). I hope this crazy analogy makes sense 🤣. Thanks for the comment and for checking out the video!

[@jan6743]

@@DennisLeoca lol great example 😂

[@udesai2011]

how to add constraints to auto layout frame?

[@DennisLeoca]

Well the auto-layout becomes your constraints. That’s why when you apply it to your elements you have that box in the property panel where you can choose how elements should align. In more simple words that blue box represents your constrains and those properties like fixed, hug and fill container represent the rules for the content inside your frame. One dictates your content where to stay when you resize the frame the other one tells the elements how to behave when the frame is being resized. Hope this all makes sense 😅.

[@EricShelton-ss6kw]

truly don't need to see your face a thousand times at full size in my office.

[@DennisLeoca]

Hey! 😅 Sorry about that, will make sure from now on to show my face less in tutorials. Thanks for the feedback.