Skip to main content

I would like to add a max-width to a text box while using auto layout to keep the word count per line at a reasonable minimum.


Currently, I have the text element set to “Fill Container” which makes the text respond very nicely to the screen size. But because it is set to “Fill Container”, the text spans the entire width of the element which makes the text lines more difficult for users to read quickly.




If a max-width was set, the component should respond until it reaches the max-width, which would help keep the line length down.


I also feel like there are many other circumstances where max and min-width would be extremely helpful


Anyone else having this issue? Or does anyone have a great fix/hack to get around it?


Looking forward to seeing what you have to say.


Cheers,

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.


twitter.com

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


twitter.com

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.


Reply