How Do You Scale Text to Fit a Container in Figma?

A text layer in Figma is a box with type inside it. When you drag a handle with the Move tool, you change the box. Depending on the resizing mode, the text rewraps or overflows. The font size never changes, which is why "scale text to fit container" is one of the most viewed threads on the Figma forum (about 43k views).

The Scale tool (K) works differently. It resizes a layer and everything that depends on its size: font size, stroke weight, effects and blurs. It also ignores nested constraints, so a frame and its contents scale as one unit.

The font size shortcut steps the size up or down without touching the box, which is handy when you only need a couple of points. More text keys are in Figma text shortcuts.

Select the frame rather than the text layer when you want a button, card or badge to grow as one piece. With the Scale tool, the padding, corner radius, icon, stroke weight and font size all grow by the same factor. Resize the same frame with the Move tool and only the frame changes, while its children follow their constraints or auto layout settings.

For an exact result, type a multiplier in the right sidebar instead of dragging. Scaling by 2 doubles everything. The anchor box sets which point stays fixed, so pick the top-left square to keep a card pinned in place while it grows down and to the right.

• The layer is locked. The Scale tool can't scale locked layers. Unlock it with ⌘⇧L (Mac) or Ctrl+Shift+L (Windows).
• The text is nested inside an instance. Scale can't reach layers inside instances. Scale the whole instance, edit the main component, or detach if you really need a one-off.
• You're still on the Move tool. If the handles only resize the box, press K and try again.

Often the real goal is the opposite: keep the type size and make the box hug the words. Text layers have three resizing modes in the Typography section of the right sidebar.

• Auto width grows the box sideways as you type. The text never wraps.
• Auto height keeps the width fixed and grows the box downward as lines wrap. This is the usual choice for paragraphs.
• Fixed size keeps both dimensions. Text wraps, and anything that doesn't fit overflows the box.

Clicking once with the Text tool creates an Auto width layer. Clicking and dragging creates a Fixed size box. Inside an auto layout frame, a text layer set to Fill container stretches with its parent; see fill container vs hug contents for how those sizing options interact.

For labels and cards with a fixed size, turn on Truncate text in the text layer's type settings. Figma hides the overflow and adds an ellipsis at the end. Once truncation is on, a Max lines setting appears, so you can let a title run to two lines before it cuts off.

• Max lines only appears when truncation is on.
• Max lines needs the text layer set to auto height or auto width, or hug contents in auto layout.
• A text layer can't have both a max height and max lines.

Scaling is fine for a quick mockup, but dragging rarely lands on a round font size. For production screens, set the font size, then adjust line height and letter spacing on their own. If the text looks off after scaling, the font may have loaded a fallback; fonts not showing in Figma covers that.