How to create and manage text styles in Figma
Introduction
Manually setting font properties for every headline and paragraph ensures inconsistency. Text Styles allow you to save a specific combination of font family, size, weight, and line height as a reusable token.
This guide shows you how to define your type scale and save it for rapid reuse.
Prerequisites
- •Selected font family
- •A text layer with desired formatting
Guide Steps
Format your text layer
Create a text layer. Adjust the font, weight, size, and line height (recommended: 120-150% of font size) until it looks right for its purpose (e.g., H1 Headline).
Create the style
With the text selected, click the four-dot 'Style' icon in the Text section of the right sidebar. Click the '+' icon. Name your style clearly (e.g., 'Headlines/H1' or 'Body/Large').
Apply the style to other text
Select another text layer. Click the four-dot Style icon again and choose your newly created style from the list. The text will instantly adopt all the formatting.
Update the style
Click the 'Edit style' icon (sliders) next to the style name in the sidebar. Change a property (e.g., increase font size). All text layers using this style will update automatically.
Common Mistakes to Avoid
- ×Naming styles vaguely (e.g., 'Big Text') instead of semantically (e.g., 'H1 Hero').
- ×Ignoring line-height settings, which can cause readability issues.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.