How to create and use text styles in Figma

Oscar de la Hera Gomez
A flower that symbolized Figma with the text 'text styles' below it.

A step by step tutorial on setting up text styles in Figma.

Step One: Create your Styles

A visual of Figma that shows the Typographic styles for Farm Tales.

In Figma, create your typographic styles.

Step Two: Select text & click on Style

Once you have created your text style navigate to the fill section on the right hand side menu and press "Styles" which is an icon consisting of four dots in a square without borders.

Select the typographic style that you wish to convert into a Text Style and subsequently navigate to Style under the fill section.

Step Three: Create a new style

In the modal that appears on the right hands side, select the '+' to create a new style.

Press the + button in the modal that appears to create a new style.

Step Four: Name & select Create Style

In the modal that appears, name the text style that you wish to create and when ready select 'create style'.

In the modal that appears, type in the name of the text style that you wish to create and subsequently press Create Style.

Step Five: Use the Style

The text style that you created should now appear under the text styles menu.

The text style should now appear under Text Styles.

If you select a piece of text and select the style that you created, it should alter it to that style.

If you select that text style it will change your selected text to that style.

If at any moment you want to edit the style, remove, delete or detach it, follow one of the tutorials linked below.

Gotcha's

Unfortunately Figma does not yet attach Colors, Stroke or effects to text styles.

Keep this in mind when creating complex typographic styles. We strongly recommend that you maintain a typographic style area that can be used a master typographic style guide.

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details