Auto-width vs auto-height text in Figma - Compared

Introduction

This feature helps you control how text boxes resize when you change the text inside. Auto-width text boxes grow wider to fit the text on one line. Auto-height text boxes grow taller to fit the text wrapped on multiple lines. This solves the problem of text getting cut off or leaving too much empty space.

When you want a button label to stay on one line and the button width to adjust automatically.

When you have a paragraph of text that should wrap and the box height should grow to fit all lines.

When designing a card where the title should not wrap but the description should expand vertically.

When you want to keep a menu item width fixed but allow the text inside to wrap and grow in height.

When creating responsive layouts where text boxes need to adjust size based on content length.

Steps

Step 1: Select the text layer

- Layers panel or canvas

The text layer is highlighted and its properties appear in the right sidebar

Step 2: Click the 'Auto width' button

- Text section in the right sidebar

The text box width adjusts to fit the text on a single line; height stays fixed

💡 Use this when you want the text to stay in one line without wrapping

Step 3: Click the 'Auto height' button

- Text section in the right sidebar

The text box width stays fixed; height adjusts to fit wrapped text lines

💡 Use this when you want the text to wrap and the box to grow taller

Step 4: Resize the text box manually

- Canvas by dragging the edges

If auto height is selected, width stays fixed and height adjusts automatically; if auto width is selected, width adjusts automatically and height stays fixed

Before vs After

Before

Text box is fixed size 200px wide and 50px tall; text longer than box width is clipped or hidden

After

With auto width selected, text box width changes to 300px to fit text on one line; height stays 50px

Settings Reference

Auto width

📍 Right sidebar > Text section

Makes the text box width adjust automatically to fit the text on one line

Default: Fixed size

Auto height

📍 Right sidebar > Text section

Makes the text box height adjust automatically to fit wrapped text lines

Default: Fixed size

Fixed size

📍 Right sidebar > Text section

Keeps the text box size fixed; text may overflow or be clipped

Default: Fixed size

Common Mistakes

Choosing auto width for a paragraph of text expecting it to wrap

Auto width keeps text on one line and expands width, so text does not wrap

Use auto height for paragraphs so text wraps and box height grows

Using fixed size text box and expecting it to resize automatically

Fixed size boxes do not resize; text may overflow or be clipped

Select auto width or auto height to enable automatic resizing

Summary

Auto width makes text boxes grow wider to fit text on one line without wrapping.

Auto height makes text boxes keep width fixed and grow taller to fit wrapped text.

Choose the right auto sizing based on whether you want text to wrap or stay on one line.