There is no workaround for setting max-width, this is impossible. But for min-width, you can put an invisible line (set opacity to 0%, don’t hide the object itself) inside of the auto-layout frame. This line will prevent the frame from shrinking too much when the text is smaller than the line. There is an example in my file Auto Layout Tips & Hacks:
Figma
You can also mimic the max-width for components and their elements. Unfortunately, it’s not an automated process — you should manually switch some preferences but it still saves some time.
Please check this file.
Adding multipliers to fill container would also be helpful, and would correspond well with flex box, so you can set 2 or 3 to continuously fill but with 1 at 2 or 3x the size of another.
It would get a bit confusing since that’s not exactly how flex works. The flex-grow setting determines how remaining available space is distributed, not how overall space is distributed. So the contents of one of the flex items can make it so a flex-grow: 2 item is not actually twice as big as a flex-grow: 1 item.
What we need is actual CSS in Figma, not these approximations of it that continue to confuse my developers in hand-off.
This would be very useful. Another use case would be localization: in some languages button labels may become much shorter when compared to English for example. In this case I’d want to set a min-width for the button component so that buttons don’t shrink too much. This is just one simple but rather common example.
Having access to min/max settings would be so nice. Many components in our design system have this in documentation, but not in the Figma library, and we can’t rely on people reading every last detail in the docs (unfortunately). Having this built in would also be huge for showing responsive behaviors across devices!
+1 here. The last thing that actually keeps me using Sketch+Anima is lack of min/max width/height constraints.
+1 here. I’m working on a table concept, and I specifically need to be able to set a component to fill-container and “min-width.”
Right now if we want to set a min width and max width for a component we have to make 2 different variants and its kinda silly that you have to keep swapping the variants to make either use fixed width (for min width) and fill container for expanding the width.
Does anyone experience this? Or is there a plugin where I can make this happen?
For min-width, use the zero-height frame hack. For this frame, specify a fixed width such as 400px and place it in Auto Layout. And for max-width, just expand your Auto Layout horizontally so it becomes fixed in width.
@tank666 how exactly do you do this for mimicking a max-width?
I set the max-width manually in the Auto Layout properties, that is, I change from Hug content to Fixed width. Or, for example, you can add a component variant with a switch (max-width=true/false).
Yes, this is not ideal and I voted to add the min / max-width function, but unfortunately there is no other way to do it. In any case, the limitations should be described in the specification.
Yah that’s what im doing right now, but i’m hoping they can have an extra setting to set that so we don’t have to make extra variants
This is the only feature I am missing.
Would be great to be able to specify the max width of an element on resize. This would be helpful in auto layouts and when creating elements that can adapt to various screen sizes during design testing.
+1 i was trying find this option
First time Figma user, long time React/MUI developer here. This is such a fundamental feature that I find it super weird that Figma made it past alpha, let alone into such maturity, without it!
Designers have caused me so many headaches over the years by never bothering to set min/max width. Now I understand why, at least - because it’s waaay more work for them because for every change in that one css property they have to add a whole new component!!!
This is a must-have, please work on this feature! Having this will help my developers a ton.
