How to Create Text Style in Figma: Step-by-Step Guide

To create a Text Style in Figma, first select a text layer with your desired font, size, and color. Then click the Styles icon in the right panel and choose + Create style to save it for reuse across your project.

Syntax

Creating a text style in Figma involves these steps:

• Select Text Layer: Choose a text element with your preferred font settings.
• Open Styles Panel: Click the Styles icon (four dots) in the right sidebar under the Text section.
• Create Style: Click + Create style to save the current text properties as a reusable style.
• Name Style: Give your style a clear, descriptive name for easy identification.

figma

Select text layer -> Styles icon -> + Create style -> Name style

Example

This example shows how to create a text style named "Heading Large" with font size 32px, bold weight, and dark blue color.

figma

1. Select a text layer and set font to 'Inter', size 32, weight Bold, color #003366.
2. Click the Styles icon in the right panel.
3. Click '+ Create style'.
4. Name the style 'Heading Large'.
5. Press Enter to save.

Output

A new text style named 'Heading Large' appears in your Styles list and can be applied to other text layers.

Common Pitfalls

Common mistakes when creating text styles in Figma include:

• Not selecting a text layer first, so the + Create style button is disabled.
• Using unclear or inconsistent style names, making it hard to find styles later.
• Forgetting to update text styles when design changes, leading to inconsistent typography.
• Applying styles to text layers with overrides that break consistency.

figma

Wrong: Click '+ Create style' without selecting text layer (button disabled).
Right: Select text layer first, then create style.

Quick Reference

Step	Action
1	Select text layer with desired font settings
2	Click Styles icon in right panel
3	Click '+ Create style' button
4	Name your text style clearly
5	Press Enter to save style

Key Takeaways

Always select a text layer before creating a text style in Figma.

Name text styles clearly to keep your design system organized.

Use text styles to maintain consistent typography across your project.

Update text styles to reflect design changes and keep consistency.

Avoid overrides on styled text layers to preserve style integrity.