Figma Auto Layout: The Ultimate Guide

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

[@ItsmeeD13]

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

[@DennisLeoca]

Glad to hear it helped! 😊

[@AndreaBL-f4p]

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 🙏🏼

[@OBAIDAHMAD-u8p]

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 😊

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

[@enitanogunranti3558]

Thanks so much for this Dennis, you ate and left no crumbs

[@DennisLeoca]

Thank you 🤣. Appreciate it 🙏

[@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 🤣

[@michaelroberts2832]

easiest explanation after endless tuts. thank you!

[@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 😉

[@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 🙌🏼

[@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 😄.

[@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 🙌!

[@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! 🎉

[@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)

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

[@ahlamali6479]

This is what I was waiting for, thanks

[@DennisLeoca]

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

[@emeraldezy]

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!

[@joelcervantes6919]

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

[@DennisLeoca]

🙌

[@suyashtiwari5099]

You got really awesome teaching skills bro

[@DennisLeoca]

Thank you 🙏

[@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 🙏🏼

[@MsTimisoreanu]

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

[@DennisLeoca]

🙌

[@arizaycreates]

You just earned a subscriber!!!!!

[@DennisLeoca]

🙌🏼 Welcome to the channel!

[@moetainnyo96]

thanks for teaching so clearly

[@DennisLeoca]

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

[@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 🙏🏻

[@rehanjamali5829]

Thank You bro, It was so much helpful,

[@edenkefale7129]

Amazing way of explaining!

[@DennisLeoca]

thank you 🙏🏻

[@faten6554]

Great explanation Denis Thank you

[@DennisLeoca]

You're most welcome! Happy to hear this!

[@nazlıcerenkoç]

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 🤗

[@iamdciax2]

This is great. You are a good tutor.

[@DennisLeoca]

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

[@lamarlong6196]

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

[@DennisLeoca]

My pleasure. So happy to hear that 🙏🏻

[@ReviveThirty]

Well described!

[@DennisLeoca]

Thanks!

[@elysiumcore]

I followed along and made it thanks mate

[@DennisLeoca]

Nice 🙌🏼. Your most welcome 🙏🏻

[@sikandarmushtaq48]

Great very helpful video ❤❤

[@DennisLeoca]

Thank you Sikandar 🙏🏼

[@EmpoweredLady]

Totally wonderful 🎉

[@DennisLeoca]

Thank you 🙏🏻

[@ln9356]

This was soo helpful! Thank you!

[@DennisLeoca]

So glad to hear that! 🙌

[@chriscogan6131]

Thanks a lot! This was really helpful

[@DennisLeoca]

Thank you! So happy to hear this! 🙏🏼

[@nellymanukyan7665]

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

[@DennisLeoca]

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

[@sushmanp890]

very helpful video. Thank you for sharing it😊

[@DennisLeoca]

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

[@BeKindAlwayss]

Thank u Dennis,very helpful 😃

[@DennisLeoca]

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

[@enricclemente193]

Thanks, mate! Keep it up!

[@DennisLeoca]

Thank you Enric! Really appreciate it 🙏🏻

[@akulinia]

Wow! Thank you!

[@DennisLeoca]

No problem, happy to hear that it helped 🙏🏼

[@linzee18]

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

[@DennisLeoca]

Unfortunately not yet...either they don't care about it or they think that that's a feature 😅.

[@Ca_Z24]

Simply Thanks ❤

[@DennisLeoca]

You’re most welcome 🙏🏻

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

[@DennisLeoca]

You can do that with variables, I will add the video to my list!

[@zaynstudio6218]

bro i subscribed you 😋❤ for this amazing content

[@DennisLeoca]

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

[@MMaaz-xd6rk]

WOOOOOAHHHH finally i understand it

[@DennisLeoca]

🙌🙌🙌

[@clotildadaniels6453]

Thanks a lot 🎉

[@DennisLeoca]

Thank you as well Clotilda 🙏🏼!

[@anujrana5462]

quality content

[@DennisLeoca]

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

[@emeraldezy]

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 😊

[@rodrigovirgolino]

Thanks

[@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 😄

[@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 🙏🏻

[@endgamefond]

This is a good one, i have been manually adding the space by clicking one by one. hahaha i use figma to make instagram post. i am not a ui designer. i am really struggling with spacing like i want left and right to have the same empty space so i use grid but that doesnt help me to get precise number. so the trick is auto layout (set the vertical n horizontal space) and fill container. OMG that mobile setting is what i need for instagram story coz i have been copying it one by one. btw what is variant.

[@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 😅

[@nuriawettstein]

Muy bueno

[@DennisLeoca]

@@nuriawettstein Gracias 🙏😅

[@vincentnoske8880]

I don’t understand you put 0 margins to the top header and the body text and still there is space between them. Has that something to do that you gave header the top header padding?

[@DennisLeoca]

That space comes from the text height, if you want to get rid of that you will need to adjust your text layer. Is this what you were asking?

[@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 😂

[@zaynstudio6218]

wow

[@DennisLeoca]

Is this a bad wow or a good wow 🤣?

[@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 😅.

[@cristianleoca1252]

👏👏👏

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