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
    tank666
    tank666
    February 22, 2021

    For min-width, use the zero-height frame hack. For this frame, specify a fixed width such as 400px and place it in Auto Layout. And for max-width, just expand your Auto Layout horizontally so it becomes fixed in width.

    UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
      Roberto
      Roberto
      February 24, 2021

      +1

      Jip_Asveld
      Jip_Asveld
      March 22, 2021

      @tank666 how exactly do you do this for mimicking a max-width?

        tank666
        tank666
        March 22, 2021

        I set the max-width manually in the Auto Layout properties, that is, I change from Hug content to Fixed width. Or, for example, you can add a component variant with a switch (max-width=true/false).

        Yes, this is not ideal and I voted to add the min / max-width function, but unfortunately there is no other way to do it. In any case, the limitations should be described in the specification.

        UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
        Tiffany_Lieu
        Tiffany_Lieu
        April 5, 2021

        Yah that’s what im doing right now, but i’m hoping they can have an extra setting to set that so we don’t have to make extra variants

          Yulia
          Yulia
          April 7, 2021

          +1

          Carsten_Jaksch
          Carsten_Jaksch
          April 17, 2021

          This is the only feature I am missing.

            Rizqi
            Rizqi
            May 21, 2021

            +1 👍

            Phil_Larsen
            Phil_Larsen
            Active Member
            May 22, 2021

            Would be great to be able to specify the max width of an element on resize. This would be helpful in auto layouts and when creating elements that can adapt to various screen sizes during design testing.

            Clement_Bettini
            Clement_Bettini
            June 6, 2021

            +1 👍

              Show more replies
              Terms & ConditionsAccessibility statement