Skip to main content
Cody_Porter
Cody_Porter
New Member
January 22, 2021

LAUNCHED: Min and Max Width for Auto Layout

  • January 22, 2021
  • 95 replies
  • 65553 views

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,

    95 replies

    Show previous replies
    Borja1
    Borja1
    October 11, 2021

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

    Michael_Jones
    Michael_Jones
    November 1, 2021

    Definitely need min-max width.

      Ethan_Ray
      Ethan_Ray
      November 20, 2021

      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)

        Michael_Kuhlmann
        Michael_Kuhlmann
        December 9, 2021

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

          mattaningram
          mattaningram
          New Participant
          December 10, 2021

          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.

            Tara_Urso
            Tara_Urso
            New Member
            January 8, 2022

            +1 Would be really helpful.

              Jeremy_Knudsen
              Jeremy_Knudsen
              Active Member
              January 13, 2022

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

                Neo_Cheung
                Neo_Cheung
                February 4, 2022

                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?

                  alvvvvvin
                  alvvvvvin
                  March 4, 2022

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

                  Vitalii_Sologub
                  Vitalii_Sologub
                  New Participant
                  March 22, 2022

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

                  Show more replies
                  Terms & ConditionsAccessibility statement