Figma Text Properties: Beyond Font and Size

WHY IT EXISTS: Digital text isn't just about the words; it's about their presentation. Without precise control over spacing, alignment, and style, interfaces become hard to read and visually inconsistent. Text properties exist to give designers the same level of typographic control that graphic designers have in print, ensuring clarity and brand consistency.

THE MENTAL MODEL: Treat the Text properties panel as the main dashboard for your typography. The most-used controls are immediately visible, like font size and weight. Think of the "Type settings" menu (the '...' button) as the advanced settings or engine tuning, where you access less common but powerful features like OpenType settings for ligatures or stylistic alternates.

HOW IT WORKS: When you select a text layer in Figma, the right sidebar displays its properties. The "Text" section contains the most frequent adjustments: font family, weight, size, line height, letter spacing, and paragraph spacing. Alignment controls (left, center, right, and top, middle, bottom) dictate how text sits within its bounding box. For more advanced features, clicking the three-dot "Type settings" icon reveals options for things like case transformations, list styling, and special font features.

WHEN TO USE IT: Use these properties constantly. Adjust line height (leading) to make long paragraphs more readable. Increase letter spacing (tracking) on all-caps headings to improve legibility. Use vertical alignment to perfectly center text inside a button. Creating and applying Text Styles is crucial for maintaining consistency across a large project.

WHEN NOT TO USE IT: Avoid manually overriding text properties on every single instance of a component. Instead, define and apply Text Styles. This makes your design system scalable and easy to update. Also, remember that properties like color, stroke, and effects are not in the Text panel; they are in the Fill, Stroke, and Effects panels, even when applied to a text layer.

ONE CANONICAL EXAMPLE: A designer is creating a button. They set the font to Inter, size to 16px, and weight to Semi-Bold. To ensure the text is always centered, they set the horizontal alignment to Center and the vertical alignment to Middle. They then save these properties as a Text Style called "button-label". The most common footgun here is forgetting that the text box's resizing behavior (hug contents vs. fill container) is controlled in the Layout panel, not the Text panel.