LAUNCHED: Min and Max Width for Auto Layout

great news folks, figma appears to be working on this feature! a release date is unknown, nor can it be promised. only time will tell.

There are so many advanced features in Figma, and I love it for that. I really wonder how or why have Figma peeps forgotten about including min-width or max-width settings for frames or other elements.

This constitutes one of the most sought-after and overlooked inclusions for the software and it is incredible we have auto-layouts, but not a proper way to set minimum width or maximum width.

It seems like working with duplicates of the same work is the norm when it comes to UX and UI. I know we have components, but even so, I don’t see practical having a gazillion instances of a component just to convey an use case.

Please Figma, PLEEEAAAAAASSSEEEEE, for the love of god, include min-width and max-width in your feature development pipeline.

Absolutely. Being able to create grids and layouts with behaviour that directly follows CSS Grid / Flexbox would be HUGE.

99% of my layouts involve grids and tables, and autolayout as currently implemented is not suitable for this; you end up having to do a lot of janky manual resizing to make even-sized columns.

And related to this topic, being able to set text box min and max-width using the ch unit would be really good to help with readability - using the heuristic that text should be between 45-75 characters per line.

I use this trick for min height and width. Create an invisible line and set the length and then you can set the parent container to hug.

@Figma_Support, please can this be implemented as soon as…

Yes!! This would be so incredible!

I vote a big “YES” for Min/Max values! Please make this a reality ASAP, thank you! ❤️

Set a minimum or maximum height or width for the components. To be able to adjust the component by setting a requirement that it cannot exceed a certain size.

+1 for min/max width please. This will be so helpful for responsive designs and developer handoff

Yes !!! +1 too

And this line break in the auto layout part 🫣

Vincent. I made the min width work in a couple different ways using the hidden line. In the case of a button with an icon (and all non-2 action) set the line as its own frame under the frame that contains the text and icon.

Figma has made a lot of progress in making the design/dev handoff easier and bring design and/dev closer than ever before. Having min/max width and height would be another step closer.
My use case at the moment is for min-heights on things like buttons, inputs etc That way I don’t have to rely on line-height and top/bottom padding to get the desired height and still have a button text that can wrap.

You got what you wanted in the end <3

When it will be launched?

Hi. I have a component made of a frame containing frames containing texts. If, in this component, I set a max with for the top frame, I can change or remove it in the component instances. But I cannot change or remove max width for the nested layers in the instances… Shouldn’t this be possible?

Does anyone know if this is a bug?

I am able to set min and max height for components. When I use the scale tool (double and single arrow versions of scaling), the min is respected, but the max is changeable - i.e. i can increase the size of the instance when scaling. I would like to prevent that so our components don’t exceed the intended size. Thanks!

Variants with interactions seem to remove/ignore min-max values in instances? If min-max is applied to instance, then after interaction it loses the min-max. When interacting back to the initial state, min-max is back! But it should retain min-max in every variant/state. State management options in interaction panel doesn’t seem to affect the behaviour.