No video :(

Figma Tutorial: Auto Layout & Constraints

Подписаться 3,9 тыс.

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

50% 1

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.acad...
🧑‍🎓 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
📹 RU-vid (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

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

6 фев 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

@michaelroberts2832 11 дней назад

easiest explanation after endless tuts. thank you!

@user-qb8sl8vx5u 8 месяцев назад

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

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

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

@susmitanag9782 4 месяца назад

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

@DennisLeoca 4 месяца назад

Glad to hear it helped! 😊

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

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

@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 😊

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

@MsTimisoreanu Месяц назад

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

@samamukh 3 месяца назад

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

@DennisLeoca 3 месяца назад

Happy to hear it helped!

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

@kizseafloralde2022 6 месяцев назад

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 5 месяцев назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 5 месяцев назад

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!

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

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

@DennisLeoca 9 месяцев назад

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

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

thanks for teaching so clearly

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

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

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

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

@ln9356 24 дня назад

This was soo helpful! Thank you!

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

@suyashtiwari5099 Месяц назад

You got really awesome teaching skills bro

@ahlamali6479 Год назад

This is what I was waiting for, thanks

@DennisLeoca Год назад

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

@EmpoweredLady 3 месяца назад

Totally wonderful 🎉

@DennisLeoca 3 месяца назад

Thank you 🙏🏻

@ReviveThirty 4 месяца назад

Well described!

@DennisLeoca 4 месяца назад

Thanks!

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

Thank You bro, It was so much helpful,

@iamdciax2 3 месяца назад

This is great. You are a good tutor.

@DennisLeoca 3 месяца назад

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

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

I followed along and made it thanks mate

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

Nice 🙌🏼. Your most welcome 🙏🏻

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

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

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

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

@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 🤗

@faten6554 7 месяцев назад

Great explanation Denis Thank you

@DennisLeoca 7 месяцев назад

You're most welcome! Happy to hear this!

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

Amazing way of explaining!

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

thank you 🙏🏻

@sikandarmushtaq48 Год назад

Great very helpful video ❤❤

@DennisLeoca Год назад

Thank you Sikandar 🙏🏼

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

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

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

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

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

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

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

My pleasure. So happy to hear that 🙏🏻

@BeKindAlwayss Год назад

Thank u Dennis,very helpful 😃

@DennisLeoca Год назад

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

@zydbinak2561 4 месяца назад

Simply Thanks ❤

@DennisLeoca 4 месяца назад

You’re most welcome 🙏🏻

@clotildadaniels6453 Год назад

Thanks a lot 🎉

@DennisLeoca Год назад

Thank you as well Clotilda 🙏🏼!

@VeronikaPavlova-j2g 28 дней назад

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!

@MMaaz-xd6rk 3 месяца назад

WOOOOOAHHHH finally i understand it

@DennisLeoca 3 месяца назад

🙌🙌🙌

@sushmanp890 Год назад

very helpful video. Thank you for sharing it😊

@DennisLeoca Год назад

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

@chriscogan6131 Год назад

Thanks a lot! This was really helpful

@DennisLeoca Год назад

Thank you! So happy to hear this! 🙏🏼

@zaynstudio6218 Год назад

bro i subscribed you 😋❤ for this amazing content

@DennisLeoca Год назад

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

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

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

Wow! Thank you!

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

No problem, happy to hear that it helped 🙏🏼

@enricclemente193 Год назад

Thanks, mate! Keep it up!

@DennisLeoca Год назад

Thank you Enric! Really appreciate it 🙏🏻

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

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 5 месяцев назад

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 😊

@linzee18 Месяц назад

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

@maliksewedo6395 9 месяцев назад

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 9 месяцев назад

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 😅

@anujrana5462 Год назад

quality content

@DennisLeoca Год назад

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

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

@cristianleoca1252 Год назад

👏👏👏

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