LAUNCHED: Min and Max Width for Auto Layout

+1 :+1:

1 Like

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

9 Likes

This is a must-have, please work on this feature! Having this will help my developers a ton.

2 Likes

+1 Thanks

absolutely need it

1 Like

+100 !!!

+1 would make it so similar to designing in webflow, that would be amazing!

1 Like

+1, it would be great to add this feature and wondering why it is impossible to add min and max for the layout width, I prefer the container width can stop at an exact width for both min and max px even if I set it in fill container setting. thanks

+1 This would be helpful for our team too

Min/Max width would fit in nicely to a proper breakpoint system. I’m told Webflow handles this nicely by other designers that I’ve spoken with on the topic.

1 Like

Do we know if Figma has any plans for including this configuration? Zero.size frameworks do the workaround but its messy!

Definitely need min-max width.

1 Like

I’m going to assume this is in the pipeline :crossed_fingers:
I’ll also assume It will work in any combination of properties, like…

"Hug contents" + "Max width"
Would be the perfect way to build a single component for message-bubbles in chat UI. Whether a single emoji or a few sentences is typed, it would look right.
(currently this requires a variant, afaik)

3 Likes

+4 from our ux designers + max-height prop, as well =)

1 Like

Webflow is built on actual HTML/CSS rendering system, Figma is built on a custom WebGL canvas renderer. This is why there are so many feature requests for HTML/CSS-like behavior that have been around for ages, it is ridiculously difficult for Figma to recreate much of this behavior from scratch, and they have indicated they don’t want to make Figma a 1:1 match for HTML/CSS.

More and more Figma-like design tools are coming out that like Webflow are built on HTML/CSS meaning you get a bunch of these features out of the box, but the downside is slightly worse zoom/scroll performance for very complex documents (browsers are built around rendering one page at a time, not dozens of pages) and a slightly higher learning curve for designers not familiar with HTML/CSS concepts like the box-model or the difference between margin and padding.

As more and more product designers switch to these new tools you will see more pressure on Figma to remain competitive and build out some of these requests finally.

9 Likes

+1 Would be really helpful.

1 Like

+181,000 ← voting on behalf of all Microsoft employees :slight_smile:

8 Likes

Like in Sketch, it would be nice to be able to set the minimum width on components like Buttons. This way the button will never be too small when there is a short CTA inside and keeping the flexibility to grow in width based on Hug resizing.

Anyone else need this feature?

8 Likes

Hi @Vitalii_Sologub, Thanks for sharing the file. I’m testing the blocks out that have min-width rules set w/ the zero-frame layers, but when I shrink/scale down the width of the entire component, the text box inside seems to just continue to minimize past the rule set by the zero frame (both the 400px & 640px).