Figma has finally introduced typography variables, along with other updates that have moved this feature out of beta. Now, managing typography is outstanding, offering complete control over what happens in our design files without the need to individually adjust each text style involved.
However, deciding which text variables to create and how to set up a correct typography structure still requires planning. If you haven't considered how your Design System will change after this update, I'm happy to help you understand the decisions you'll need to make going forward and how your approach will change forever.
Choose the right approach depending on the project you're working on...
Before we start, I want to make an important disclaimer: my approach varies depending on the project I'm working on. From personal projects where I follow a more flexible structure, to projects involving other designers and developers where I adopt a more constrained approach due to specific rules.
So, it's crucial to understand that if you wish to approach text variables in a way that's completely different from what I describe in this article, you're doing the right thing because you're tailoring your approach to your project's specific needs.
While I offer guidelines and suggestions, the structure of variables will also adapt based on the project's scalability, needs, and goals. Therefore, these guidelines should be seen as a starting point.
... and according to the existing text styles in the project
Another thing we need to consider is that there's a before and after.
All the projects created before the arrival of Figma's typography variables are part of the "before" and were managed with text styles that are distributed throughout the project.
Meanwhile, projects created afterward are part of a new direction and don't require a massive update.
The approach we can take with these two types of projects is different, especially if there are a large number of text styles. Generally, the right direction is to have fewer variables and text styles, making the design quicker to manage so that we can update the typography with just a few clicks.
How Figma's typography variables simplify your work
Before using Figma's typography variables, we must consider their potential to enhance and simplify our work. The variables, as design tokens, offer two significant advantages:
They enable the management of the entire design with just a few clicks.
They allow for different display modes of the same design.
Variables not only simplify our work by enabling significant changes in a short amount of time but also evolve it by allowing for different display modes of the same design, whether it involves themes/brands, light/dark modes, or various accessibility options.
Swiftly switching typefaces and font families
In any design project, whether it's a design system, a simple app, or any other type of design file containing text, you likely have one or more typefaces, along with specific font families from these. Typically, a project doesn't have a wide variety of font families; sometimes, it might even stick to just one.
Before the introduction of typography variables, dealing with numerous text styles meant manually updating both typefaces and font families to achieve a coherent and hierarchically sound font list. This process was particularly time-consuming for files with a multitude of text styles.
The exciting update is that we can now define a variable for a project's typeface(s) and apply it across all text styles, allowing for quick typography updates. This not only grants us complete control but also lets us assign different typefaces for each mode. For instance, you could have a collection of "Theme" variables, with each theme featuring a distinct typeface.
Total control of letter-spacing, line-height, etc.
Besides changing typefaces and font families, typography variables let you customize other important text properties like letter-spacing and line-height. Putting these settings into one variable makes updates much simpler.
Although I adjust letter-spacing based on font size, which means a single variable might not always fit, it's great that I can apply one letter-spacing variable across multiple text styles with the same font size but different weights (like black, medium, regular, light...). This really cuts down on the effort needed to update them.
The concept is simple: instead of tweaking each parameter one by one, we now use variables to cut down the number of adjustments in half. Text styles benefit greatly from shared variables, with things like typefaces seeing a massive reduction in manual changes. This structured approach is a significant improvement, much like how developers manage SCSS more efficiently.
By simply setting a single variable in various text styles, we greatly simplify the process.
Semantic variables vs primitive text styles
This is probably the most important and revolutionary aspect of typography variables in Figma. Thanks to them, as is the case with any design tokens, it's possible to assign a variable as the value of another variable, and in this specific case, a text style as the value of a variable.
Let's explain this concept, which is very simple. Until the introduction of typography variables, we always referred to text styles. I don't know how you managed text styles before, but for example, you might have defined something like:
Title: 80px, medium, letter-spacing: -2px
Paragraph: 16px, regular, letter-spacing: 0px
Now, the idea is that if it's a title, you assign it the Title text style, if it's a paragraph, you assign it the Paragraph text style, but that's not entirely correct.
In fact, the text style can be called whatever you want, but basically, it's nothing more than a text style that's so many px tall, so many px wide, with letters spaced so many px apart. That's it. It's neither a title nor a paragraph, but a text style with styles assigned by you.
Within your project, there might be an element that isn't a title, but you want it to be as large as the title, and you might tend to assign it the Title text style. For example, the hero heading.
By doing so, a kind of contradiction is created: when I go to change, for example, the font size of the text style, I must remember that this text style has also been assigned to other elements that aren't titles but simply have that text style.
It would be much more correct if you had two variables, one for all the titles, and one for all the hero headings. Now you can assign the text-style "Title" to both, but you should properly name it for what it is, namely 80px, medium, letter-spacing: -2px or describe in words what form it takes, which is "large 80px text" for example.
In this way, you group text elements under distinct variables based on their function and assign the correct text style to define the visual of each variable. This not only makes it easier to make changes in the future, but also ensures consistency and clarity throughout your project.
Making typography simpler with Figma
One of the major challenges in designing for digital platforms is creating a typography system that is visually appealing, easy to read, and consistent across all elements. With the new typography variables in Figma, this process becomes much simpler and more efficient.
With this last feature we can separate function and visual, making it easier to maintain and update typographic elements in our projects. We can also ensure consistency and clarity by assigning the correct text styles to each variable. This helps prevent confusion and contradictions in our design, while also saving time in the long run.
