Figma has added typography to its variables, making Design System management more complete. There are some performance issues right now, but they'll be fixed soon. I want to share how you can set up your new typography variables with what Figma currently offers. I'll update this as new features come out.

[Update 15 May 2024: all the performance issues have been solved]

What's next with text styles?

Until recently, managing typography meant just using text styles. They quickly bundle rules like font-family, font-size, and font-weight. A common example of primitive text styles:

heading 1
heading 2
heading 3
paragraph
label
caption

Until now, we’ve done it this way, and it worked, but it’s a limited approach and not scalable, because Text styles define how a text looks when you apply that style, not what it means.

Text styles like Heading 1 or Heading 2 use semantic labels to indicate hierarchy and importance, Heading 1 being more important than Heading 2. But this doesn’t always match the visual design. For example, you might want a Heading 2 to appear smaller, so you end up applying a text style meant for paragraphs, just because the size fits better.

Trying to get more semantic via text styles alone is almost impossible, you’d need to create a separate style for every possible use case, which quickly makes the system hard to scale and maintain.

Instead, text styles should be named based on what they are: a primitive collection of visual properties like size, weight, and spacing, nothing more. This makes your system more flexible and easier to scale.

Few examples:

80px medium, negative spacing
20px regular, standard spacing
16px regular with large spacing

There are other parameters you can include, like paragraph spacing, but it’s up to you. I think the optimal paragraph spacing is paired to the line height, but is my personal preference.

Should You Delete Your Text Styles?

Not necessarily.

I still use text styles, but I’ve updated them by:

• Renaming them with primitive labels instead of semantic ones

• Replacing their properties with typography variables

Text styles are still useful because they’re quick to apply to a text element, so it’s helpful to keep a well-structured list ready to use.

For me, designing with only variables would be too time-consuming. I don’t need everything to be immediately semantic, it’s about finding the right balance.

The purpose of a text style is simply to define how text looks, how big, how bold, and which font family it uses. It’s all about the visual appearance, not the meaning.

Typography Variables

There are many ways to integrate Typography Variables in Figma, depending on your project’s needs and how you want to structure your system.

In my case, I wanted the typography to be both responsive, adapting across different devices, and flexible in terms of visual style, with the ability to switch font families and weights. To achieve this, I moved typography variables into two separate variable collections.

The Device collection includes variables for font size, line height, letter spacing, and paragraph spacing, organized into four modes: Large Desktop, Desktop (1200px), Tablet, and Mobile.

The Theme collection includes four themes responsible of the visual identity of my projects with variables for font family and font weight.

I like to have one Design System for all my projects, with each theme corresponding to a specific project. That way, I don’t have to maintain 200 separate Design Systems, which would be impossible to keep up with.

Device

I use a simple scale that ranges from 10px to 80px (though I’ll likely add larger sizes beyond 80px later on).

Font size, line height, letter spacing, and paragraph spacing all adjust based on the breakpoint—each mode representing a different screen size, like Desktop or Mobile.

Theme

I use four different font families (Sans Serif, Serif, Display, Mono) each with four weights (Delicate, Standard, Robust and Intense)

For instance:
sans serif -> font family -> Geist
sans serif -> font weight -> delicate = Light
sans serif -> font weight -> Standard = Regular
sans serif -> font weight -> Robust = Medium
sans serif -> font weight -> Intense = SemiBold

The Primitive/Semantic approach

The result of integrating typography variables is greater control, scalability, and consistency across your design system.

You start by defining primitive tokens, for example, sans-serif = Geist, or x100 font size = 16px. These primitives can then be applied directly to your text styles, or used through semantic aliases, like button label font size = x100 font size.

As I mentioned earlier, it’s not practical to completely replace text styles. But adding design variables into them is a great first step to make them more dynamic and flexible.

Typography variables have opened the door to better project management and more adaptable design systems.

To wrap up, I’ve shared a few simple examples here but of course not everything will apply to every use case. I work with Design Systems that vary a lot: some are straightforward, others are far more complex.

It all depends on the context, which should always guide your design direction and the decisions you make within your Design System.