Back to rankings

Figma: Text Wrap with Balance and Pretty

FigmaView original changelog

Figma introduced native text wrap controls that make text layers responsive across different screen sizes, adding two new settings: Balance, which distributes text evenly across lines, and Pretty, which prevents a single word from being stranded alone on the last line. Either option can be applied to a text layer, a text style, or an individual paragraph directly from text settings. The update mirrors the CSS text-wrap: balance and text-wrap: pretty properties, closing a long-requested gap between Figma's typography controls and how modern browsers actually render text.

Key Takeaways

  • Figma added two native text-wrap modes, Balance and Pretty, directly mirroring CSS's text-wrap: balance and text-wrap: pretty properties.
  • Balance evens out line widths across a text block, primarily aimed at making headlines and titles look intentional rather than lopsided.
  • Pretty prevents orphaned words, ensuring a single short word is never left stranded alone on the final line of a paragraph.
  • The settings can be scoped at three levels — a single text layer, a shared text style, or an individual paragraph — giving designers granular control.
  • This closes a feature request that had circulated on the Figma community forum since at least 2025, where designers repeatedly asked for native CSS-aligned text-wrap behavior.
  • Because the feature maps directly onto native browser text-wrap CSS, it should reduce visual mismatches between Figma mockups and their coded, responsive implementations.

Responsive Text Wrapping Arrives in Figma

Figma rolled out native support for two modern text-wrapping behaviors long requested by its community: Balance and Pretty. Both options make text layers adapt automatically as they resize across breakpoints, screens, and containers, removing a class of manual fiddling that designers previously had to do line-by-line.

Balance: Even Line Widths for Headlines

The Balance option distributes text evenly across the available lines in a text block. It is aimed squarely at headlines, titles, and short pieces of display copy, where an unbalanced final line (a long first line followed by a short, lopsided second line) can look sloppy or accidental. With Balance turned on, Figma automatically recalculates line breaks so that each line occupies roughly the same width, producing a more intentional, polished look without the designer needing to insert manual line breaks.

Pretty: No More Orphaned Words

The Pretty option solves a more subtle but equally common annoyance: a single short word (often "a," "the," or a short verb) left stranded alone on the final line of a paragraph. Known in typography as an "orphan," this kind of line break can look unintentional and disrupts the visual rhythm of body copy. Pretty detects when this would happen and adjusts the wrap so the last line always contains a more balanced cluster of words.

Where and How to Apply It

Both Balance and Pretty are configurable directly in text settings, and they can be scoped at three different levels: on an individual text layer, on a shared text style so the behavior propagates across every layer using that style, or on a single paragraph within a larger block of text. This flexibility means designers can apply Balance broadly to every heading in a design system via a text style, while reserving Pretty for specific body paragraphs where orphaned words are most visually distracting.

Why It Matters for Design-to-Code Handoff

Until now, achieving this kind of polished line-wrapping in Figma required manually inserting line breaks, which then had to be stripped out or reinterpreted by developers translating designs into responsive code. Because Balance and Pretty mirror the CSS text-wrap: balance and text-wrap: pretty properties already supported in modern browsers, designs built with these settings map far more directly onto real, responsive front-end implementations. That means fewer discrepancies between how a design looks in Figma and how the equivalent text actually renders and reflows on a live, responsive webpage across different screen sizes.

Figma Text Wrap: Balance and Pretty Options | Yet Another Changelog