How to Use Text Styles in Figma: Simple Guide

In Figma, you use Text Styles to save and reuse text formatting like font, size, and color across your design. Create a text style by selecting text and clicking + Create Style in the Text panel, then apply it to other text layers to keep your design consistent.

Syntax

Text styles in Figma are created and applied through the UI, not code. The main steps are:

• Create: Select a text layer, style it, then click + Create Style in the Text section.
• Apply: Select another text layer, open the Text Styles dropdown, and pick your saved style.
• Edit: Update the style from the Text Styles panel to change all linked text layers.

figma

/* No code syntax as Figma uses UI for text styles */

Example

This example shows how to create a text style named "Heading 1" and apply it to multiple text layers:

text

1. Select a text layer and set font to 'Roboto', size 24, weight Bold, color #333333.
2. In the right panel under Text, click the four dots icon next to 'Text' to open Text Styles.
3. Click '+ Create Style', name it 'Heading 1', and save.
4. Select other text layers, open Text Styles dropdown, and choose 'Heading 1' to apply.
5. To update, edit 'Heading 1' style and all linked text layers update automatically.

Output

Multiple text layers now share the same font, size, weight, and color defined by 'Heading 1' style.

Common Pitfalls

• Not naming text styles clearly, which makes them hard to find later.
• Applying local overrides after applying a style, which breaks the link to the style.
• Forgetting to update the style when design changes, causing inconsistent text formatting.
• Creating too many similar styles instead of reusing and modifying existing ones.

figma

/* Wrong way: Applying style then changing font size locally breaks style link.
Right way: Update the text style itself to keep consistency. */

Quick Reference

Action	How to Do It
Create Text Style	Select text layer → Style text → Click '+ Create Style' → Name and save
Apply Text Style	Select text layer → Open Text Styles dropdown → Choose saved style
Edit Text Style	Open Text Styles panel → Right-click style → Select 'Edit Style' → Change properties
Remove Text Style	Select text layer → Click 'Remove Style' in Text Styles dropdown
Override Style Locally	Select text layer with style → Change text properties (breaks link)

Key Takeaways

Create text styles to keep font, size, and color consistent across your design.

Apply saved text styles to multiple text layers for easy updates.

Edit a text style to update all linked text layers at once.

Avoid local overrides after applying styles to maintain consistency.

Name your text styles clearly for easy reuse.