Quick Text Style Setup in Sketch


Tutorials - Text Styles Cover

Why Text styles?

One of the biggest obstacles in the design process is keeping everything consistent. We use Sketch's Text styles to help us keep track of type hierarchy. That's why you should set them up in the early stages of your project. Text (and layer) styles can be changed in the overrides panel of a symbol.

01 layers

Give your styles a name, size & line height

Write the Text styles in a list, then align them to the center and adjust size and line height for each one of them.

I’m using HTML like naming for my styles, but you can name them whatever you want. 
02 duplicate

Duplicate your column

Now, we want to duplicate the list twice, and align one to the left and the other to the right. 

03 colors and weight

More colors and weights

We’ll probably need more than one color in our design. Duplicate the columns we’ve created and change the color of their text layers. 

The same can be applied to create styles for different weights.

04 structure

Naming structure

In order to navigate easily through our Text styles, it’s important to organize their naming correctly. We group them just like we group our symbols: by using slashes ( “/” ) between our groups in a layer name.

05 rename it

Rename It

To quickly rename multiple layers use the Rename It plugin.

Select the first column and open the plugin. Type in this Text style structure: %*/Weight/Alignment/Color (%* will be replaced with the current layer name, e.g. H1, H2). Click the Rename button.

Repeat this step for each column until all layers have been named properly.

06 generate

Generate our style

All we have to do now is create Text styles out of our text layers. 
In order to select all layers at once, we will use a Styles generator plugin.

Simply select all our text layers and press ⌃⌘S or go to Plugins → Styles Generator → Generate Shared Styles

07 the result

Aaaaaaaaand congradientulations!

Your Text styles should look something like this, but probably with not so cool color names :)

Here's a Sketch file with Text styles created in this tutorial, feel free to use it on your own projects!
The Ultimate Figma Flavoring Tutorial
More treasures ahead
A true explorer like you is always in search of new quests and gems. How about we send you one every month?
Ahh, the cookie banner 😩. The first of website frictions, the breaker of UX, mother of privacy lawsuits. State your preference or
manage cookies.