Learn Figma Now Get the book IT
Lesson 5 of 5 · 6 min

Wrap, min and max: layouts that survive real content

In the book I ask you to experiment beyond the example, because a layout that only works with the perfect placeholder is a drawing. This lesson is that experiment: make it hold up when the content gets long, short, translated or missing.

Stress test first

Before adding anything new, try to break what you built. Put a very long name in the Username field, translate the buttons into German, empty the placeholder, then drag the edge of the Login frame until it is very narrow and very wide.

Each thing that breaks tells you which of the next tools you need.

Wrap: rows that go on a new line

Some content is a list of small things of different lengths, like tags, filters or chips. In a horizontal frame they run off the edge. Turn on Wrap and the items flow onto the next line when they run out of room, like words in a paragraph.

With Wrap you set two spacings, between items on the same line and between lines. The frame needs a width that is not Hug, otherwise there is no edge to wrap against.

Same tags, same gaps, a frame that changes width. With Wrap on, the tags that don't fit go on the next line instead of running off the edge.

Min and max: limits for Fill

Fill container is flexible, sometimes too flexible: a column becomes too narrow on a small screen, a block of text too wide on a large one. When a layer is set to Fill container inside an Auto layout frame, the Width menu offers Add min width and Add max width.

The layer stays flexible, inside a range you chose. In chapter 13 of the book we go one step further and drive these limits with variables, a different set for each breakpoint.

Truncate when space is really limited

Sometimes the content simply does not fit, like a long destination name in a small card. In the text settings you can truncate the text after a number of lines, so it ends with an ellipsis instead of pushing everything down. Use it on purpose, not to hide a layout that should grow.

Try it

  1. Make five small tag frames with different words, all hugging their text, and wrap them in one frame.
  2. Turn on Wrap, set the width to Fixed 240 and both gaps to 8.
  3. Change the width to 160 and to 400 and watch the tags reflow.
  4. Put the tag frame inside the Form, set it to Fill container and add a max width of 320.
  5. Truncate a long label to one line and paste a very long text into it.
  6. Stress test the whole Login screen again: long, short, empty, narrow, wide.

Check your work

When a file has many screens, it is easy to miss a frame without Auto layout or a fixed size where you wanted Fill. I built a free tool for that, Auto Layout Lint: copy a frame in Figma, paste it there and it marks what to fix. It is a good way to close this course.

Remember

  • Stress test with long, short, translated and missing content.
  • Wrap is for lists of small items of different lengths.
  • Min and max width keep a Fill container layer inside a sensible range.
  • Truncate only when the space is really fixed.