This could have been summarized in 20 seconds while testing it. Fill = stretch, hug = smol? Frame resizes to content or something, Fixed = also stretch? I have ADHD, so I couldn't get patient with it
You are a saint! When you just started learning Figma autolayout tends to get pretty confusing once you link multiple elements. The tutorial for the accordion explained all the functions perfectly.
STANDING OVATION from Phoenix Arizona! I FINALLY understood this!!! thanks so much!! Im on a crunch deadline to finish homework and finally move across the country and you saved me so much stress. TYSM!!
This is such a clear video The only thing that could be better is a bit of a pause when explaining, but hey, we have yt so I could just rewind. I learned so much!
Thank u! Its been a week I've watched all auto layout tutorials but it's all the same thing and I was still facing problems. Your tutorial's awesome by far
When would you use auto layout over just frames? For example from your other video you could setup a fixed header using frame constraints but here you use fill container.
Thanks alot! Very clear explanation and one of the few videos on it out there. I had a question tho about spacing text boxes. How do u make sure the space between two textboxes is determined by the baseline of the upper text box and the upperline of the below text box..? If u know what I mean. Because line heigth gives extra heigth to the container and if thats different theres unequal space between the text and its container.. I assume its always the containers that get spaced when u set padding for example, and not the texts itself. Correct? I hope I make myself clear haha
Is the fill for both children ALWAYS 50/50? I have two children containers that must both stay fill in width, but one of them is wrap container and 50/50 seems to have ugly consequences. The wrap is for sorta sidebar that has additional contents. The wrap extends pushing the other container (the main container that I wish to keep wide). The remedy to that was to set the wrap into a single column, but sometimes the width is to great and I think it would be better to exapnd to fill the device screen. But not to expand in a 50/50, maybe 70/30. And of course, I experimented with all sorts of max width for all elements, still the responsive behaviour looks ugly. any solution to that?
The problems starts mounting up when using Auto for space between and you nest several frames. I've banged my head against the wall numerous times because of the lack of logic in Figma when it comes to this. I still don't get how Figma is calculating things when I have a text box set to Fill and fixed elements on each side of that and space between set to Auto, then the outmost frame that holds the whole content starts messing up the "flexbox" simulation that is going on inside. It seems like there's a structural limit to how Figma have implemented the auto layout concept.
When I paste my copied text it wont strech to the sides even if I add autolayout. Also there is no option for fill content only hug sides and fixed. Any clue why?
I am watching it now in 2024, I had to come back to previous interface of Figma because the new one makes the work with fill and hug stuff even more complicated for me(( Thanks for help!
Hello i bought your file (Dropdown-Menü ) for figma but i dont know how To edit the Text. I imported the file already To figma but If i Click on the Text To edit it, it is Not possible
I am grateful for the video, but I get so frustrated when no files are shared. Would be 10x easier to understand if there is a file to play with as you watch the video.
i wish they would separate child and parent auto layout into 2 different products - CHILD AUTO LAYOUT & PARENT AUTO LAYOUT, so people get less confused. it feels like there's 1 thing that has 2 variations and it makes things very murky and unclear
![KSI - Dirty [Official Visualiser]](http://i.ytimg.com/vi/VoDh1h1dPUE/mqdefault.jpg)
This could have been summarized in 20 seconds while testing it. Fill = stretch, hug = smol? Frame resizes to content or something, Fixed = also stretch? I have ADHD, so I couldn't get patient with it
You are a saint! When you just started learning Figma autolayout tends to get pretty confusing once you link multiple elements. The tutorial for the accordion explained all the functions perfectly.
STANDING OVATION from Phoenix Arizona! I FINALLY understood this!!! thanks so much!! Im on a crunch deadline to finish homework and finally move across the country and you saved me so much stress. TYSM!!
finally understood the hug and fill settings. thanks so much bro!
Thank you so much, the only explanation in the whole internet that made me understand it. God bless you♥
This is the best explanation I have found. Thank you!
Thanks alot, the best video on autolayout I have watched.
your tutorials are lifesavers fr
thanks a lot! you literally saved my whole semestral course!
Hey thanks so much. You cleared up all my confusion.
This is such a clear video
The only thing that could be better is a bit of a pause when explaining, but hey, we have yt so I could just rewind. I learned so much!
Thank u! Its been a week I've watched all auto layout tutorials but it's all the same thing and I was still facing problems. Your tutorial's awesome by far
Brilliant! Thank you!
You're a LEGEND 🎉 Thank You!
Thanks.. Very thorough details..
Well explained tutorial. Thanks for posting.
That was sooo sooo easy man!! Thanks :)
Best explanation so far!
The best explanation ever.👌❤❤❤
Such a good video! Thank you, this was not explained in other autolayout tutorials
brilliant explanation huge thanks
Great tutorial 😊
Such a good video! Thank you
I understand it now. Thanks!
Thank you mavi for the tutorial. FInally got to understand the whole concept with your wonderful demonstration !
Thanks for this amazing video. It's really helpful!
Thank youuuu so so much! I was so lost with this!
Thanks for this video, it was very useful
Very informative thanks 😊. Best video in YT to clear your doubt regarding the Auto layout Frame and FIXED, FILL & Hug concept.
Fantastic guide, clears up a lot. Thank you!
Great video! Can you tell me why when i put child element to fill and parent element to hug it changes my parents property to fixed?
Very good reference for me.
clearly explained , thank you
Your teaching is very well that even a non designer also can understand... please do more videos for begginners like this.. LifeSaver
Thank you for this. Very helpful
Thank you!
When would you use auto layout over just frames? For example from your other video you could setup a fixed header using frame constraints but here you use fill container.
thanks it was helpful
Thank you so much!
saved me ) thanks
thanks so much!!!
Thank you
Nice explanation
Thanks! ^^
Great video, slowly explained for dumb dumbs like me, thanks!
Thanks alot! Very clear explanation and one of the few videos on it out there.
I had a question tho about spacing text boxes. How do u make sure the space between two textboxes is determined by the baseline of the upper text box and the upperline of the below text box..? If u know what I mean. Because line heigth gives extra heigth to the container and if thats different theres unequal space between the text and its container.. I assume its always the containers that get spaced when u set padding for example, and not the texts itself. Correct? I hope I make myself clear haha
I think you need to go to advanced type settings and search for "Vertical trim" on both these objects
Is the fill for both children ALWAYS 50/50? I have two children containers that must both stay fill in width, but one of them is wrap container and 50/50 seems to have ugly consequences. The wrap is for sorta sidebar that has additional contents. The wrap extends pushing the other container (the main container that I wish to keep wide). The remedy to that was to set the wrap into a single column, but sometimes the width is to great and I think it would be better to exapnd to fill the device screen. But not to expand in a 50/50, maybe 70/30.
And of course, I experimented with all sorts of max width for all elements, still the responsive behaviour looks ugly.
any solution to that?
thank you ...
how can design a side nav with minimized, maximize containers?
The problems starts mounting up when using Auto for space between and you nest several frames. I've banged my head against the wall numerous times because of the lack of logic in Figma when it comes to this. I still don't get how Figma is calculating things when I have a text box set to Fill and fixed elements on each side of that and space between set to Auto, then the outmost frame that holds the whole content starts messing up the "flexbox" simulation that is going on inside. It seems like there's a structural limit to how Figma have implemented the auto layout concept.
When I paste my copied text it wont strech to the sides even if I add autolayout. Also there is no option for fill content only hug sides and fixed. Any clue why?
because the parent container would not be having auto layout. Fill only appears when parent element has fill container
1:53
2:37
4:41
7:10 !
Im following the settings perfectly but the text is still breaking out of the main container.
sometime the fill container does not available can anyone help me with this issue
for text - 'this is an answer.... ' - horizontally fill works, but vertically hug works, why so? why cant vertically fill work as well?
I am watching it now in 2024, I had to come back to previous interface of Figma because the new one makes the work with fill and hug stuff even more complicated for me(( Thanks for help!
Hello i bought your file (Dropdown-Menü ) for figma but i dont know how To edit the Text. I imported the file already To figma but If i Click on the Text To edit it, it is Not possible
Please reach out to my email and share the access to the file for faster resolution ✅
Whats your email address ?
@@Jalias323 find it in the about section on my channel
Maybe im dumb but i cant find your e Mail
@@Jalias323 look under "details". Trust me, it’s there
I am grateful for the video, but I get so frustrated when no files are shared. Would be 10x easier to understand if there is a file to play with as you watch the video.
why my figma doesn't has it?
I couldn't find any job in uiux designing
How long have you been searching?? Also what's the strength of your portfolio??
i wish they would separate child and parent auto layout into 2 different products - CHILD AUTO LAYOUT & PARENT AUTO LAYOUT, so people get less confused. it feels like there's 1 thing that has 2 variations and it makes things very murky and unclear
The background music and noise?? ugh.
you are the best, i just got myself a figma teacher
Very nice explanation. Thank you.
Thank you!