Text Resizing in Figma Auto Layout

WHY IT EXISTS: Auto Layout in Figma was built to let interfaces scale like the web, but text is fundamentally different from rectangles. A rectangle has a fixed aspect ratio or explicit dimensions, while text wants to flow and wrap based on available width. Without explicit rules for how text layers negotiate space with their parent frames, designers would constantly fight broken line breaks, overlapping labels, or buttons that refuse to shrink. Text behavior settings exist to bridge the gap between rigid box-model math and fluid typography.

THE MENTAL MODEL: Think of every text layer as a guest at a dinner table and the Auto Layout frame as the host setting the seating chart. The host can say either stay exactly this wide, take as much room as you need, or fill whatever is left. The guest can respond by refusing to wrap, wrapping only when forced, or demanding infinite width. The layout only works when both sides agree on who sets the boundary.

HOW IT WORKS: Every text layer in Figma has three resizing modes in the right panel. Auto Width expands horizontally to fit the string without wrapping. Auto Height uses a fixed width and wraps vertically. Fixed Size locks both dimensions and truncates overflow. Inside an Auto Layout parent, the parent adds its own rule. Hug contents shrinks or grows to match children. Fill container stretches to occupy space from its own parent. The critical conflict is Auto Width text inside a Hug contents parent on the same axis. The text refuses to wrap, demanding width equal to the full string, so the parent stretches to match. If you expected a paragraph, you get one long line. To force wrapping, give the text a width boundary by setting it to Fixed Size or Fill container.

WHEN TO USE IT: Use Auto Width for single-line labels like navigation links or tags where you never want wrapping. Use Auto Height for headings or paragraphs inside cards where the frame should hug the text vertically but constrain the width. Use Fixed Size for character-limited fields or table cells where truncation is preferable to layout shifts. Pair text Fill container with a Hug contents parent when you want a button or card to grow taller as the copy grows, while keeping a tight horizontal boundary.

WHEN NOT TO USE IT: Do not use Auto Width for multi-line body copy or dynamic strings because it will refuse to wrap and overflow its frame. Do not use Fixed Size text for user-generated content unless you are okay with clipped words. Do not assume that adding Auto Layout to a frame automatically makes text responsive; without checking the text layer's own resizing mode, the layout will break as soon as the content changes.

ONE CANONICAL EXAMPLE: Imagine a notification toast. The toast frame is vertical Auto Layout with 16 pixel padding and Hug contents. Inside is an icon and a message text layer. If the message is Auto Width, a long notification pushes the toast wider across the screen. If the message is Fill container horizontally and Auto Height vertically, the toast stays at a readable max width and grows taller to fit the message. The icon stays aligned and padding stays consistent because the parent hugs the taller content. This pattern appears in almost every scalable design system component with variable copy.