Figma | Text Wrap Adds Responsive Typography Controls
Figma is bringing responsive text wrapping closer to the way typography can behave on the web. Released on August 14, 2026, the new Text Wrap controls add Balance and Pretty options for managing multiline text, giving designers more control over headlines, descriptions, buttons, and other interface copy while keeping the resulting behavior connected to corresponding CSS properties in Dev Mode.
Figma gives designers more control over how text breaks across lines
Text wrapping can have a noticeable effect on the visual balance of a responsive interface. A heading that looks clean at one width may produce an awkward short line at another, while longer copy can leave a single word isolated at the bottom of a paragraph. Figma's new Wrap style setting gives designers alternatives to the default line-breaking behavior.
The feature introduces three options: Auto keeps the existing behavior, Balance distributes text more evenly across multiple lines, and Pretty keeps lines relatively full while adjusting the final lines to avoid leaving a single word stranded on its own. The controls are available across Figma products including Figma Design, Figma Sites, Figma Slides, and Figma Buzz.
Balance and Pretty target different typography problems
Balance is intended for shorter text where the overall shape of the copy contributes strongly to the interface. Figma recommends it for elements such as headlines, buttons, badges, and tooltips because it attempts to make each line similar in length. It is not recommended for text blocks longer than six lines.
Pretty is aimed at longer content such as descriptions and body copy. Rather than balancing every line, it adjusts the final four lines to reduce the chance of an orphan appearing on the last line. This keeps paragraphs visually natural while addressing one of the more distracting typography problems that can appear as responsive layouts change width.
Wrap styles can be applied to layers, paragraphs, or text styles
Designers can apply a Wrap style at several levels depending on how reusable the rule needs to be. Setting it on a text layer affects all text inside that layer, while paragraph-level control makes it possible to give individual paragraphs different wrapping behavior within the same text object.
The setting can also become part of a text style. This is particularly useful for design systems because a team can define headline styles with Balance and body styles with Pretty, then reuse those typography decisions consistently across multiple screens and components without adjusting each text layer manually.
Dev Mode connects the design setting with CSS text-wrap
For web handoff, Figma exposes corresponding CSS in Dev Mode. A layer using Balance shows text-wrap: balance;, while Pretty produces text-wrap: pretty;. Layers using Auto rely on the browser's default wrapping behavior and do not add an additional text-wrap property.
This connection can help designers and frontend developers align typography decisions more closely between the canvas and production code. Figma does note that browser support varies and individual browsers may calculate line breaks differently, so the final implementation may not reproduce every break exactly as it appears in the design file.
REMEMBER: Balance and Pretty map to CSS text-wrap values in Dev Mode, but browser support and line-breaking calculations can vary. Test responsive typography in the actual browsers required by the website before treating the Figma result as final.{alertSuccess}
Daisuki's Take: What This Means for Web Designers
This is a relatively small Figma control with a direct connection to real web typography. Responsive design is not only about resizing containers and rearranging components; text itself changes shape as available width changes, and those changes can affect the hierarchy and rhythm of an interface.
For designers working on websites and reusable UI systems, putting wrap behavior inside text styles is particularly useful. It lets typography rules carry more information about how copy should behave responsively instead of leaving every line break to manual adjustments or developer interpretation during handoff.
We would still avoid using manual wrapping as a substitute for testing real content. Balance and Pretty are most valuable when they support flexible layouts, allowing the browser to respond to different widths while preserving a more intentional typographic result.
Sources and Recommended Links
- Get responsive text across screens with text wrap | Figma Official Release Notes
- Explore text properties | Figma Official Help Center
