LAUNCHED: Min and Max Width for Auto Layout

+100 !!!

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

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

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.

I’m going to assume this is in the pipeline 🤞
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)

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

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.

+1 Would be really helpful.

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

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?

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.

What I do to define max-widths is create a component for the element (e.g., a container with text inside). In the component, I define a fixed width (e.g. 1100px), which will play as my max-width.
Then, I use instances of that component in the screen I’m working on and, depending on the frame size I’m using, I switch from “fixed width” (it will have the same width as the one I set in the component, which would be the max-width) to “fill container” (for frames that have a smaller size than the max-width).

I need to have buttons expand (and reduce padding to a certain minimum) if their label is longer than usual, but if the label is shorter than usual, they need to retain a certain minimum width (all while keeping the label centred).

I’ve tried a bunch of different ways to do this, and none of them are working. It’s a big concern because I don’t want the team members to keep fussing with Auto-Layout settings (the whole idea is to make this easy for everyone, not harder).

+1 for this feature, all the way.

Another +1 for this feature. IMO a big missing part of auto-layout. For now I think I’ll just use another variant for the max-width

+1
This would be a very handy feature.