Min and Max Width for Auto Layout

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

3 Likes

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)

2 Likes

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

2 Likes

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.

6 Likes

+1 Would be really helpful.

1 Like

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

9 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).

@alvvvvvin please check this video (from 6:30) — I hope it will be helpful.

Yes That’s my exact use case for why I need it, too!

I am still having trouble with setting min-width for buttons. The option of including an hidden line works but doesn’t work when I include an icon. Who can help?

I am still having trouble with setting min-width for buttons. The option of including an hidden line works but doesn’t work when I include an icon. Who can help?

+1 how to use auto-layout without max-width?

+!,000,000 PLEASE! This is a critical feature and hope it’ll be added soon.

It appears this workaround does not work anymore… I, like others can still resize beyond the min size limit. Even in the demo files.