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

  Рет қаралды 34,893

Mavi Design

Mavi Design

Жыл бұрын

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
FREE FIGMA COURSE / SERIES: Design a Website in Figma: • FREE Figma Web Design ...
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

Пікірлер: 63
@funtipunti7231
@funtipunti7231 Жыл бұрын
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.
@polarbyrd23
@polarbyrd23 11 ай бұрын
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!!
@Sushilkumar92
@Sushilkumar92 Жыл бұрын
Thank you so much, the only explanation in the whole internet that made me understand it. God bless you♥
@axxa5000
@axxa5000 10 ай бұрын
Fantastic guide, clears up a lot. Thank you!
@anabannaish
@anabannaish 9 ай бұрын
Such a good video! Thank you, this was not explained in other autolayout tutorials
@scoutee
@scoutee 7 ай бұрын
finally understood the hug and fill settings. thanks so much bro!
@reganbhandari6239
@reganbhandari6239 9 ай бұрын
Thank you mavi for the tutorial. FInally got to understand the whole concept with your wonderful demonstration !
@storymaxart
@storymaxart 16 күн бұрын
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!
@AdelaidaButeler
@AdelaidaButeler 8 ай бұрын
Thank youuuu so so much! I was so lost with this!
@haritkhoda
@haritkhoda 11 ай бұрын
Very informative thanks 😊. Best video in YT to clear your doubt regarding the Auto layout Frame and FIXED, FILL & Hug concept.
@Joanna-fz1vs
@Joanna-fz1vs Жыл бұрын
Thank you for this. Very helpful
@rajthedev
@rajthedev 10 күн бұрын
I understand it now. Thanks!
@akhil1754
@akhil1754 Жыл бұрын
Your teaching is very well that even a non designer also can understand... please do more videos for begginners like this.. LifeSaver
@CoolIntellect
@CoolIntellect 9 ай бұрын
Thanks for this amazing video. It's really helpful!
@mennahisham4359
@mennahisham4359 10 ай бұрын
clearly explained , thank you
@nikhilgoyal007
@nikhilgoyal007 3 ай бұрын
thanks so much!!!
@rulick4101
@rulick4101 3 ай бұрын
Thank you so much!
@04balajisenthil
@04balajisenthil Ай бұрын
That was sooo sooo easy man!! Thanks :)
@stargazing0010
@stargazing0010 Ай бұрын
your tutorials are lifesavers fr
@serwidort7200
@serwidort7200 4 ай бұрын
thanks it was helpful
@apodnies
@apodnies 8 ай бұрын
Thank you!
@abhijeetpatil9819
@abhijeetpatil9819 Ай бұрын
Great tutorial 😊
@manishmishra6572
@manishmishra6572 4 ай бұрын
Such a good video! Thank you
@user-hg5nn7xx8i
@user-hg5nn7xx8i 5 ай бұрын
brilliant explanation huge thanks
@Pawlkoko
@Pawlkoko 8 күн бұрын
Great video, slowly explained for dumb dumbs like me, thanks!
@ingasatryan5655
@ingasatryan5655 20 күн бұрын
saved me ) thanks
@roving-camera_72
@roving-camera_72 3 ай бұрын
Well explained tutorial. Thanks for posting.
@christianasobogun2593
@christianasobogun2593 2 ай бұрын
Thanks for this video, it was very useful
@mingsirakowit3316
@mingsirakowit3316 6 ай бұрын
Thank you
@sircasino614
@sircasino614 3 ай бұрын
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
@uladzimirkolb6836
@uladzimirkolb6836 8 ай бұрын
Thanks! ^^
@lalogreiner
@lalogreiner 2 ай бұрын
Very nice explanation. Thank you.
@zulkifantastic
@zulkifantastic 2 ай бұрын
Thanks bro
@linkonsarkar7550
@linkonsarkar7550 Жыл бұрын
thank you ...
@saradia5989
@saradia5989 Ай бұрын
Very good reference for me.
@mangeshdarnule8987
@mangeshdarnule8987 Жыл бұрын
Nice explanation
@alexmaftei7025
@alexmaftei7025 2 ай бұрын
Best explanation so far!
@Ezhil-yc3tt
@Ezhil-yc3tt 3 ай бұрын
The best explanation ever.👌❤❤❤
@jdmji
@jdmji 10 ай бұрын
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.
@relja_
@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
@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
@mavidesign
@mavidesign Жыл бұрын
I think you need to go to advanced type settings and search for "Vertical trim" on both these objects
@GordonWhiteDesigns
@GordonWhiteDesigns Ай бұрын
Im following the settings perfectly but the text is still breaking out of the main container.
@balarv4892
@balarv4892 10 ай бұрын
how can design a side nav with minimized, maximize containers?
@Underhills
@Underhills 3 ай бұрын
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.
@mabroukatis
@mabroukatis Ай бұрын
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?
@MetaWoody
@MetaWoody 10 ай бұрын
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.
@MiMekDesign
@MiMekDesign 3 күн бұрын
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?
@user-ux9pd1pp9e
@user-ux9pd1pp9e Күн бұрын
because the parent container would not be having auto layout. Fill only appears when parent element has fill container
@andrewstrasser
@andrewstrasser Ай бұрын
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
@Jalias323
@Jalias323 Жыл бұрын
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
@mavidesign
@mavidesign Жыл бұрын
Please reach out to my email and share the access to the file for faster resolution ✅
@Jalias323
@Jalias323 Жыл бұрын
Whats your email address ?
@mavidesign
@mavidesign Жыл бұрын
@@Jalias323 find it in the about section on my channel
@Jalias323
@Jalias323 Жыл бұрын
Maybe im dumb but i cant find your e Mail
@mavidesign
@mavidesign Жыл бұрын
@@Jalias323 look under "details". Trust me, it’s there
@haniakamran8439
@haniakamran8439 Жыл бұрын
I couldn't find any job in uiux designing
@f8vourite
@f8vourite 10 ай бұрын
How long have you been searching?? Also what's the strength of your portfolio??
@user-uq3fp2be3w
@user-uq3fp2be3w 8 ай бұрын
Thank you!
Watch This To Finally Understand FRAME CONSTRAINTS in Figma
9:56
🍕Пиццерия FNAF в реальной жизни #shorts
00:41
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 99 МЛН
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 61 МЛН
Fixed Hug Fill container (Figma)
7:40
Grampus
Рет қаралды 2,4 М.
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
Complete Guide to Creating Dynamic Table Components on Figma
5:07
Mindesigning
Рет қаралды 22 М.
Auto Layout for Beginners (crash course)
21:19
Flux Academy
Рет қаралды 10 М.
KILLER Auto Layout Tutorial in FIGMA
10:36
MDS
Рет қаралды 30 М.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Ricardo Costa
Рет қаралды 163 М.
Figma Auto Layout | Getting Started with Auto Layout
13:16
Jesse Showalter
Рет қаралды 303 М.
From Figma to Real Website With Framer | No Code
11:21
Product Sensei
Рет қаралды 20 М.
Figma Tutorial: project organization that saves you hours of work
7:41
Самый ХИТРЫЙ сын!😀
0:57
Petr Savkin
Рет қаралды 2,8 МЛН
Sharing is caring- sister love ❤️ #shorts
0:16
Quinn FAM
Рет қаралды 9 МЛН
THIS GIRL MISSES HER SLIDE! But finally...😱
0:17
Znd
Рет қаралды 9 МЛН
Please subscribe!!
0:19
なべの口呼吸な生活
Рет қаралды 25 МЛН