Watch This to Finally Understand FILL CONTAINER, HUG CONTENTS and FIXED WIDTH in Figma

In this video we're going to cover Fixed width, Hug contents and Fill container features in Figma and when to use them. These autolayout features are critical to understand if you want to design responsive UIs, websites and significantly boost your workflow in Figma.

————————
© 2023 Mavi Design

[funtipunti]

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.

[polarbyrd]

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

[sircasino]

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

[Sushilkumar]

Thank you so much, the only explanation in the whole internet that made me understand it. God bless you♥

[anabannaish]

Such a good video! Thank you, this was not explained in other autolayout tutorials

[reganbhandari]

Thank you mavi for the tutorial. FInally got to understand the whole concept with your wonderful demonstration !

[axxa]

Fantastic guide, clears up a lot. Thank you!

[scoutee]

finally understood the hug and fill settings. thanks so much bro!

[haritkhoda]

Very informative thanks 😊. Best video in YT to clear your doubt regarding the Auto layout Frame and FIXED, FILL & Hug concept.

[balajisenthil]

That was sooo sooo easy man!! Thanks :)

[AdelaidaButeler]

Thank youuuu so so much! I was so lost with this!

[CoolIntellect]

Thanks for this amazing video. It's really helpful!

[akhil]

Your teaching is very well that even a non designer also can understand... please do more videos for begginners like this.. LifeSaver

[jdmji]

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.

[storymaxart]

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!

[christianasobogun]

Thanks for this video, it was very useful

[roving-camera_]

Well explained tutorial. Thanks for posting.

[relja_]

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?

[Michael.design]

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