Marvelous content! Very well explained!! I'm doing a Motion Design with Figma course and didnt understand the instructor instructions so i had to search on YT and found your video. Now everything is clear !!❤❤ Got a new sub!!!
Figma Evangelist ❤ You make better tutorials than Figma itself 😂 I would love to see more advanced material on creating design systems, variables and advanced modals. Keep on good work!
Thank you! Best compliment ever 🥹🥹 I have a whole playlist on creating a design system using variables! I love that we are all learning to use variables together and finding out what the best practice is for our systems ☀️🤗 - Figma Design System ua-cam.com/play/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq.html
@@TDSunshine your teaching style amazing, seems you reduce spped bit slow 10X to 5X 😀now able to understand, you worked very hard to explain the auto layout for viewers thank you 🙏🙏
In Last part... what if we have to scale vector size also...as I'm trying to do so either logo get distorted or it won't scale.. can you suggest how to fix this..
tricky one! sadly there is no way (that I know of) to make it scale dynamically :/ so if the width changes there is no way to make the height change accordingly automatically :/ ☀️
Thanks! You will only see both when you are selecting an element inside an auto layout. You can also always check to see if you need to update your figma! ☀️🙏🏻
Can you make a video showing how to use auto layout with a master table? The master table should have an action column as the last column, which contains a dropdown menu. However, the dropdown menu is getting hidden behind the next layer. How can we bring that particular row to the front? I'm looking for a video that explains this process.
Great question! I would say the best way around this would be to use an overlay for the drop down if you are using prototyping to show it OR if you just want to show it on the canvas than select absolute position for the dropdown and place it outside of the rows bounding box. I hope that helps! ☀️🙏🏻
Hi TD - 1st, the video is GREAT 2nd, do you know how can I use with auto-layout symbols? I have a symbol of text in my style guide, when I'm using it within a auto-layout - there is an issue - the auto-layout doesn't wrapping the dynamic text. Thanks in advance, T2B ;-)
If you're a UI designer and know how HTML and CSS work, this Figma feature blends your layout logic from design to code. The best Figma channel I've ever subscribed!!!
Hey I saw your video and this is really helpful I really liked and also subscribe a genuine request can you make a video on nested autolayout pls? it would be really helpful.
Hey thanks so much for putting this together! I'm relatively new to Figma (I did the Google UX course earlier in the year and I've been developing my UI skills since by doing personal projects). Sometimes when I see your videos I'm like OMG I'm a million miles away from fully understanding everything, but after this video I feel a lot better in that many of your points relating to autolayout I'm already doing! I'm really glad you highlighted that features like absolute position are only relevant in specific cases. I feel like the information overload of the internet can make us feel like we need to use every functionality, all the time! Sorry for the essay! Thanks again!
Aww yay! Im glad to hear you found my video helpful! and I completely get what you are saying! There is so much to learn in Figma and it can feel like you are constantly behind no matter how many videos you watch! but don't worry to much about it :) its all one big learning curve so take your time and just keep having fun with this amazing tool ☀️🤗
Wow, you are the best Figma instructor for me! You should consider creating content about Photoshop, Premiere Pro, and other creative software. It's hard for me to learn them from anyone else now.
Thanks for the great content. You're so good at explaining with examples. At 15:55, shouldn't you change the constraint position from Left Top to Right Top, or does it not matter?
Great point! yes I think making it Right Top would be a good idea in this case. Using constraints in conjunction with auto layout is really important I think! ☀️🙏🏻💛
was about to put my head through a wall, thank god i came across this video in time :') i still have a doubt if you could clear it please: 12:40 - Why did Green expand to that exact width? Why not slightly more or less? Is it because due to Red and Orange being fixed width, the effective "container" space to expand into was the area left around Yellow and Green and hence they both adjusted to each taking half of that available container space to fill?
thanks! and Yes, you explained it correctly! Green was set to fill width so it took up as much space as it could while respecting the other elements inside the auto layout and the spacing between them. 🙏🏻☀️💛
"It's exactly what I wanted, isn't it?" - Not really, they're not square anymore, and it's an obvious figma bug that even with aspect ratio locked on an object, when width is set to fill, the height lock stays on the original value, rather than scale appropriately.
It solves the issue I was facing so it was what I wanted 😊 you can play around with the height as well maybe set some min and max values there to get the result you are looking for ☀️
One of the best tutorial about auto layout i never ever seen except this❤, thanks a lot. I am looking for responsive complex forms creation using auto layout…
Really great ! Im french beginner in UI and i totally understand this video. I think everyone can understand too, i going to watch all your video ! Thanks a lot
Thank you so much! The explanation on fill/fixed/hug was the simplest, most engaging way to teach this. Thank you for making it accessible to new Figma users. SO helpful. I don't subscribe to a lot of channels, but I've subscribed to yours!
Spent 30 min on another tutorial where they used "tidy up" which I guess must have been replaced with auto layout. Going to stay with your channel from now on!
"Tidy up" is a kind of alignment and distribution function in Figma and it can be found in the top of the design panel in the drop-down at the end of the other alignment functions ☺️ But welcome to the channel! ☀️🙏🏻
@@TDSunshine I'm definitely not disagreeing, it must be me.. but on my browser I do know that the tidy up button should be on the top right and should have a dropdown but it just isn't there. That row ends with the align bottom button for me. Maybe it's the browser or b/c I'm on windows but that and the "distribute horizontally" function isn't working for me. But I'm just going to do what you do from now on. 😃Auto layout is better for what I wanted to do anyway.
I love seeing new Figma users coming from Adobe XD or Sketch lose their mind at what auto-layout can do, but then pull their hair trying to edit a file with lots of auto-layout rules. but in all seriousness, I think learning to use the auto-layout is a must and is not the hard to learn if you practice it for a short bit.
haha yes! Figma is just superior to them all 😎 and I agree, navigating a file with lots and lots of nested auto layouts can be a bit of a challenge at the start but , like you said, it gets much easier with practice 🤗☀️
2 more ways for changing packed and auto spacing: Just type 'a' instead of auto and enter. Double click on that box instead of selecting and typing 'x'
@@TDSunshinebtw had a request on an element. The tracking element companies use like track ur shipment, both horizontal and vertical. Also the upcomin events element in calendar apps. The auto layout feature for these r very complex to make
I believe there's really no need to make a big deal out of it. When the speed is reduced, the voice becomes distorted, and it's a shame when you have such a beautiful voice and an immense talent for teaching. Thank you for the information, I've been browsing UA-cam for a little over 15 years now.😇@@amashavindhya
You definitely have a subscriber now. That was the best explanation on how to use a tool I've ever seen. You really know your stuff! I used to watch video tutorials for a living and your in the top 10% of educators on UA-cam.
Hey I just want to say that I have been struggling with auto layout so much, I have watched 60 minutes videos, read articles and still no clarity, but your video hit me like a truck :) it was so well explained in such an engaging way, I understood it all, thank you so much, you have no idea the impact u created
Thanks so much :) Love the tip for absolute position and the max/min width/height, so helpful!
You're so welcome! ☀️🙏🏻💛
Marvelous content! Very well explained!! I'm doing a Motion Design with Figma course and didnt understand the instructor instructions so i had to search on YT and found your video. Now everything is clear !!❤❤ Got a new sub!!!
Aww thanks! 🙏🏼☀️💛
Great communication skills ! i liked it.
Thanks! 🙏🏻☀️💛
You're very charming and a great explainer :) Thank you
Thank you! 😃☀️🙏🏻
Excellent tutorial!! I finally get it :)
Thanks! 🙏🏻☀️
Figma Evangelist ❤ You make better tutorials than Figma itself 😂 I would love to see more advanced material on creating design systems, variables and advanced modals. Keep on good work!
Thank you! Best compliment ever 🥹🥹 I have a whole playlist on creating a design system using variables! I love that we are all learning to use variables together and finding out what the best practice is for our systems ☀️🤗 - Figma Design System
ua-cam.com/play/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq.html
amazing tutorial, just you are amazing, very clear expalnation
Thanks! Im glad you found it helpful ☀️🤗🙏🏻
@@TDSunshine your teaching style amazing, seems you reduce spped bit slow 10X to 5X 😀now able to understand, you worked very hard to explain the auto layout for viewers thank you 🙏🙏
great tutorial!!
Thank you! 🙏🏼☀️💛
@@TDSunshine yes, keep going!!
great video really....can you do autolayouts with texts and containers
Thanks! will add to my list! 🙏🏻☀️
In Last part... what if we have to scale vector size also...as I'm trying to do so either logo get distorted or it won't scale.. can you suggest how to fix this..
tricky one! sadly there is no way (that I know of) to make it scale dynamically :/ so if the width changes there is no way to make the height change accordingly automatically :/ ☀️
borrow me your mind
🧠📤 🤪☀️
Best tutorial i've seen so far, thank you. Btw my figma dont have fill container and absolute position :(
Thanks! You will only see both when you are selecting an element inside an auto layout. You can also always check to see if you need to update your figma! ☀️🙏🏻
Can you make a video showing how to use auto layout with a master table? The master table should have an action column as the last column, which contains a dropdown menu. However, the dropdown menu is getting hidden behind the next layer. How can we bring that particular row to the front? I'm looking for a video that explains this process.
Great question! I would say the best way around this would be to use an overlay for the drop down if you are using prototyping to show it OR if you just want to show it on the canvas than select absolute position for the dropdown and place it outside of the rows bounding box. I hope that helps! ☀️🙏🏻
So incredibly helpful! Thank you :)
You're welcome! ☀️🙏🏻💛
Hi TD - 1st, the video is GREAT
2nd, do you know how can I use with auto-layout symbols?
I have a symbol of text in my style guide, when I'm using it within a auto-layout - there is an issue - the auto-layout doesn't wrapping the dynamic text.
Thanks in advance, T2B ;-)
are all of your symbols in one text box or are they separate text boxes? and what do you mean by it doesn't wrap? ☀️
Hi @@TDSunshine thank you for your response. I've created a button with an Icon symbol and a Text symbol band in an auto-layout.
If you're a UI designer and know how HTML and CSS work, this Figma feature blends your layout logic from design to code.
The best Figma channel I've ever subscribed!!!
Thanks 🙏🏻! and I completely agree! Auto layout is juts such a game changer 🤗☀️
Excellent explained, than you.
Thanks! ☀️🙏🏻
Amazing best pn UA-cam
Thanks! ☀️🙏🏻💛
this is a great tutorial!
Thanks! ☀️🙏🏻
Hey I saw your video and this is really helpful I really liked and also subscribe a genuine request can you make a video on nested autolayout pls? it would be really helpful.
Thanks! Will add to my list! ☀️🙏🏻💛
Please make new version video
ua-cam.com/video/r966BWVccJ4/v-deo.html ☀️🙏🏻
Hey thanks so much for putting this together! I'm relatively new to Figma (I did the Google UX course earlier in the year and I've been developing my UI skills since by doing personal projects). Sometimes when I see your videos I'm like OMG I'm a million miles away from fully understanding everything, but after this video I feel a lot better in that many of your points relating to autolayout I'm already doing! I'm really glad you highlighted that features like absolute position are only relevant in specific cases. I feel like the information overload of the internet can make us feel like we need to use every functionality, all the time! Sorry for the essay! Thanks again!
Aww yay! Im glad to hear you found my video helpful! and I completely get what you are saying! There is so much to learn in Figma and it can feel like you are constantly behind no matter how many videos you watch! but don't worry to much about it :) its all one big learning curve so take your time and just keep having fun with this amazing tool ☀️🤗
Just loved and subbed lovely lady.
You are an absolute wizard, I can't think of anyone explaining it better.
Also your explainition is just awesome.
Yay, thank you! ☀️🙏🏻💛
Wow, you are the best Figma instructor for me! You should consider creating content about Photoshop, Premiere Pro, and other creative software. It's hard for me to learn them from anyone else now.
thanks! I'll add those idea's to my list for sure! ☀️🙏🏻💛
Thanks for the great content. You're so good at explaining with examples. At 15:55, shouldn't you change the constraint position from Left Top to Right Top, or does it not matter?
Great point! yes I think making it Right Top would be a good idea in this case. Using constraints in conjunction with auto layout is really important I think! ☀️🙏🏻💛
Amazing tutorial, thank you so much.
You're very welcome! ☀️🙏🏻
was about to put my head through a wall, thank god i came across this video in time :')
i still have a doubt if you could clear it please:
12:40 - Why did Green expand to that exact width? Why not slightly more or less? Is it because due to Red and Orange being fixed width, the effective "container" space to expand into was the area left around Yellow and Green and hence they both adjusted to each taking half of that available container space to fill?
thanks! and Yes, you explained it correctly! Green was set to fill width so it took up as much space as it could while respecting the other elements inside the auto layout and the spacing between them. 🙏🏻☀️💛
Great tutorial 🤩
Thank you ☀️🙏🏻💛
Thank You soooo much. So clear and simple, and fast and nice voice in comparing figma tutorialsD
Thanks! ☀️🙏🏻💛
Very clear explanations and so easy to grasp. Great job! You don't happen teach After Effects do you?
You're welcome! I don't :( I mainly use Apple Motion as well to create my effects so I'm not super familiar with After Effects. 🙏🏻☀️
Great ! Thx.
☀️🙏🏻
Your adorable demeanour made the tutorials easy to grasp.
And oh, I just subscribed!
Aww thanks! ☀️🙏🏼
Thanks a lot
You're welcome! ☀️🙏🏻
clear and objective explanations
You're welcome! ☀️🙏🏻💛
"It's exactly what I wanted, isn't it?"
- Not really, they're not square anymore, and it's an obvious figma bug that even with aspect ratio locked on an object, when width is set to fill, the height lock stays on the original value, rather than scale appropriately.
It solves the issue I was facing so it was what I wanted 😊 you can play around with the height as well maybe set some min and max values there to get the result you are looking for ☀️
One of the best tutorial about auto layout i never ever seen except this❤, thanks a lot. I am looking for responsive complex forms creation using auto layout…
Thanks! great idea will add to my list! ☀️🙏🏻
wow
☀️🙏🏻
Really great ! Im french beginner in UI and i totally understand this video. I think everyone can understand too, i going to watch all your video ! Thanks a lot
aww thanks! ☀️🙏🏻💛
Thank you so much! The explanation on fill/fixed/hug was the simplest, most engaging way to teach this. Thank you for making it accessible to new Figma users. SO helpful. I don't subscribe to a lot of channels, but I've subscribed to yours!
Glad you liked it! ☀️🙏🏻💛
Spent 30 min on another tutorial where they used "tidy up" which I guess must have been replaced with auto layout. Going to stay with your channel from now on!
"Tidy up" is a kind of alignment and distribution function in Figma and it can be found in the top of the design panel in the drop-down at the end of the other alignment functions ☺️ But welcome to the channel! ☀️🙏🏻
@@TDSunshine I'm definitely not disagreeing, it must be me.. but on my browser I do know that the tidy up button should be on the top right and should have a dropdown but it just isn't there. That row ends with the align bottom button for me. Maybe it's the browser or b/c I'm on windows but that and the "distribute horizontally" function isn't working for me. But I'm just going to do what you do from now on. 😃Auto layout is better for what I wanted to do anyway.
Finally a depression comes to end. Thank You❤
thanks! 🙏🏻☀️🤗
it's a mountain creating a simple responsive card!
Auto layout can be a bit complex at the start but stick with it and you will master it! ☀️🙏🏻
I love seeing new Figma users coming from Adobe XD or Sketch lose their mind at what auto-layout can do, but then pull their hair trying to edit a file with lots of auto-layout rules.
but in all seriousness, I think learning to use the auto-layout is a must and is not the hard to learn if you practice it for a short bit.
haha yes! Figma is just superior to them all 😎 and I agree, navigating a file with lots and lots of nested auto layouts can be a bit of a challenge at the start but , like you said, it gets much easier with practice 🤗☀️
Best tutorial I've seen so far. Thank you for the shared files to follow along. You're a great teacher.
Thanks! 🙏🏼☀️💛
I like it the way of your expression ❤😊
Thanks 🤪☀️
explained very well , easy and simple
Thanks! 🙏🏼☀️
2 more ways for changing packed and auto spacing:
Just type 'a' instead of auto and enter.
Double click on that box instead of selecting and typing 'x'
OMG I did not know about the double tapping!! such a great tip thanks!! 🤩🙏🏻☀️
@@TDSunshine helping each other out to get better at designing. What u do helps thousands of people 🙌🙌
🙏🏻🥹 @@kriswayne7938
@@TDSunshinebtw had a request on an element.
The tracking element companies use like track ur shipment, both horizontal and vertical. Also the upcomin events element in calendar apps.
The auto layout feature for these r very complex to make
You are so clear and pedagogical in your explanations that I find it a pity that you speak so fast.
Thanks! and yes I know I go a bit too fast sometimes :/ I'm working on it though!☀️🙏🏻💛
I believe there's really no need to make a big deal out of it. When the speed is reduced, the voice becomes distorted, and it's a shame when you have such a beautiful voice and an immense talent for teaching. Thank you for the information, I've been browsing UA-cam for a little over 15 years now.😇@@amashavindhya
Thank you so much , You taught this soooo well. I followed along and got it :)
Thanks! 🙏🏼☀️🤗
Love from india🇮🇳
Well explained 👏👏
Thanks! 🙏🏻☀️💛
really helpful, thank you!
You're welcome! ☀️🙏🏻💛
You definitely have a subscriber now. That was the best explanation on how to use a tool I've ever seen. You really know your stuff! I used to watch video tutorials for a living and your in the top 10% of educators on UA-cam.
Aww thanks so much! I really appreciate it! ☀️🙏🏼💛
You're a good teacher. Keep it up!❤
Thank you! 😃☀️🙏🏼
yes, it's chilled
🤪
thank you for this usefull lesson about auto layout
You are welcome! 🙏🏻☀️
Great tutorial! I followed along with your Figma practice files and feel like I understand Auto Layout much better. I'm happy☺. Thank you so much.
yay thanks! im glad it was helpful 🙏🏻☀️💛
Top stuff!
SUBSCRIBED
Thanks! 🙏🏻☀️
Fill is Chill
😆
I'm so glad I discovered your channel 🙏 I've been struggling recently with understanding this topic, you made my life easier thank you so much!
aww yay I'm glad my videos are helpful! ☀️🙏🏻
ure amazing!
Thanks! 🥺☀️🙏🏼
12:59 😋... Cool Leson
😂 it’s cool it’s chill! Ngl I don’t even remember saying this 🙈 ☀️
@@TDSunshine 🤩
Hey I just want to say that I have been struggling with auto layout so much, I have watched 60 minutes videos, read articles and still no clarity, but your video hit me like a truck :) it was so well explained in such an engaging way, I understood it all, thank you so much, you have no idea the impact u created
Thanks! 🥹🙏🏼 I’m glad you found it helpful! ☀️💛
Love the vibe, was fun watching, ask to share and subscribe alot more
Thanks! 🙏🏼☀️💛
Amazing teacher
Thank you! 😃☀️
My goodness! You are an amazing teacher. Going to look you up on Twitter
Thanks! Im not on twitter but I do have an instagram and a TikTok! ☀️
Wow!
Thanks! 🙏🏼☀️
Best auto layout tutorial on youtube!! No one goes into this detail and explains everything
Thanks! ☀️🙏🏻💛
Good work 💪
Thanks 🙏🏻☀️
Well explained. I love the way you explained, you made it simple.
Thanks! 🙏🏼☀️
Loved your energy
Thanks! ☀️🙏🏼
Thanks for the clear explanation
You're welcome! ☀️🙏🏻
Great tutorial! Thanks
You're welcome! 🙏🏻☀️💛
This was fun to watch 😅
Thanks! 🙏🏻☀️💛
you are amazing. finally i understand hug, fill, fixed sizing. thanks alot for that video. keep going
Glad it helped! 🙏🏼☀️💛