Text styles in Figma - Step-by-Step Guide

Introduction

Text styles let you save and reuse font settings like size, weight, and color. This helps keep your reports and dashboards looking consistent and professional without changing each text box one by one.

When you want all titles in your dashboard to have the same font size and color.

When you need to update the font style across multiple report pages quickly.

When you want to keep your text formatting consistent for headings, labels, and body text.

When collaborating with others to ensure everyone uses the same text styles.

When creating templates that require uniform text appearance.

Steps

Step 1: Select a text layer

- Canvas

The text layer is highlighted and its properties appear in the right sidebar

Step 2: Set the font, size, weight, and color

- Text section in the right sidebar

The text layer updates with the chosen font settings

Step 3: Click the four dots icon next to the Text section

- Right sidebar

The Text Styles panel opens showing existing styles

Step 4: Click the '+' button to create a new text style

- Text Styles panel

A dialog appears to name the new text style

Step 5: Type a descriptive name and click Create style

- New text style dialog

The new text style is saved and appears in the Text Styles panel

Step 6: Select another text layer and click the four dots icon

- Right sidebar Text section

The Text Styles panel opens

Step 7: Click the saved text style name

- Text Styles panel

The selected text layer updates to use the saved text style

Before vs After

Before

Multiple text layers have different fonts, sizes, and colors causing inconsistent look

After

All text layers use the same saved text style, showing uniform font, size, and color

Settings Reference

Font family

📍 Right sidebar > Text section

Choose the font type for your text

Default: Depends on the selected font

Font size

📍 Right sidebar > Text section

Set the size of the text

Default: 12 px

Font weight

📍 Right sidebar > Text section

Set how thick or bold the text appears

Default: Regular

Text color

📍 Right sidebar > Fill section

Set the color of the text

Default: Black

Text style name

📍 Text Styles panel

Identify and reuse saved text styles

Default: None

Common Mistakes

Changing text properties on one layer without creating or applying a text style

This causes inconsistent formatting and makes updates slow because each layer must be changed separately

Create a text style and apply it to all relevant text layers so changes update everywhere at once

Naming text styles with unclear or generic names like 'Style 1'

It becomes hard to remember what each style is for, leading to confusion and misuse

Use clear descriptive names like 'Heading Large Bold' or 'Body Text Regular' for easy identification

Summary

Text styles save font settings to keep text consistent across your design.

Apply text styles to multiple text layers to update them all at once.

Name text styles clearly to avoid confusion when reusing them.