Figma has finally updated variables with the addition of typography. Although, as of today, the update has some performance issues that will be resolved in the coming weeks, now the management of the Design System is even more complete.

Today, I want to suggest how you can structure your new variables for typography, based on what is currently possible to do with Figma and I will update the article as there are updates.

[Update 15 May 2024: all the performance issues have been solved by the Figma team 🎉]

What's next with text styles?

Up until now, managing typography meant relying solely on text styles. However, with the new typography variables entering the scene, text styles remain essential. They offer a fast method to bundle various typography rules, such as font-family, font-size, and font-weight, among others.

However, what you need to start doing is giving the text styles the right name. A text style is indeed.. a text style, and nothing more. For example:

• heading 1

• heading 2

• heading 3

• paragraph

• label

• caption

You might be choosing text styles based on size, like Heading 1 or 2 for big texts, and labels or captions for small ones. But that's not quite right.

Sometimes, you want a text to look as big as Heading 3 without it being a Heading 3. And not all text needs to be a paragraph to match paragraph size!

Basically, it's better to name text styles based on what they do: how much bigger they are, what font weight, and what type of spacing. This is what a text style is—a group of rules.

• 80px medium, negative spacing

• 20px regular, standard spacing

• 16px regular with large spacing

We should establish a typography scale—a set of text styles ranging from the largest to the smallest—that can be applied to any text element, thanks to typography variables and whether they are heading 1 or hero titles.

The Typography Scale

I created a typography scale for my Design System and integrated it into all the related design files. It is a list of text styles structured in this way:

type-of-font/size/font-weight

Few examples:

sans-serif/x500/delicate
serif/x250/delicate
serif/x100/standard
display/x400/robust
mono/x075/delicate

How it works:

Type of Fonts: serif, sans serif, display, and mono. I believe every brand should incorporate these four types, perhaps prioritizing one over the others. Having these options provides sufficient versatility to cover all design needs.

Font Size: Using a base of x100 to represent 1em (which is 16px in my case), I have compiled a list of font sizes ranging from 80px to 10px. Each font size is paired with optimal letter spacing and line height, calculated specifically for that size. For instance, an 80px font size has negative letter spacing to achieve a fresh and modern look, while a 10px font size requires positive letter spacing to enhance readability due to its small size.

Font Weight: I labeled them Delicate, Standard, Robust, and Intense. I chose these terms because each font family has different weights. Sometimes, you might prefer using Thin or Light as the lightest weight, which I've called "Delicate." On the other hand, "Robust" might include black, bold, or extrabold weights.

Text Variables: Tokenizing Typography

Figma Variables are Design Tokens, and they're useful to maintain a consistent style throughout all your designs. One of the best things about tokens is that you can edit them once, and it will automatically update all instances across your design files. This feature is particularly helpful when working with typography styles because it allows for quick changes in font size, weight, or typeface without having to manually update every instance.

Structuring your Design Tokens depends on various factors. In this post, I will share my approach to organizing them effectively.

The Foundation

Every Design System has a foundation, no matter what name can be used for this purpose. Foundation is the root element of your work. It sets up the basis for everything else and ensures consistency in all designs.

That means, for example, defining the font family and font weights used in the Design. In my case, as I told you before, I have 4 different font family with 4 font weights each.

sans-serif: Manrope
serif: Garamond
display: Bricolage Grotesque
mono: Roboto Mono

For each of them, I defined four distinct weights: Delicate, Standard, Robust, and Intense. For instance, the sans-serif-font-weight-delicate might correspond to Light, while the sans-serif-font-weight-robust could correspond to Medium.

These variables are included in the Theme Collection, as each mode within the collection can have distinct font families and font weights. It's crucial that my Design System is themed.

I apply the same approach to sizes, line heights, and spacing. I establish the foundation of the typography scale and assign all foundational size variables to the Device Collection. This is because these elements can vary depending on whether the design is for desktop, tablet, or mobile.

All the text styles I created with the structure type-of-font/size/font-weight are foundational, so they have foundational design tokens.

For example,

serif/x100/robust

font-family: foundation/serif/font-family
font-weight: foundation/serif/font-weight-robust
font-size: foundation/x100/font-size
line-height foundation/x100/line-height
letter-spacing: foundation/x100/letter-spacing
paragraph-spazing: foundation/x100/paragraph-spacing

This approach is both straightforward and scalable, providing a clear perspective on managing typography sizing and spacing.

The Semantics

After establishing the foundation of the Design System, it's time to delve into the Design Tokens by creating semantics.

Semantics Design Tokens, or Semantics Variables, are what makes a Design System consistent and scalable but also powerful.

A Design System meant for use across various products, such as a website and a web app, needs flexibility. For instance, both might have a page title, but the website's title could be larger than the web app's. This is where semantic design tokens excel, starting from generic foundation variables to specific semantic variables.

Semantic Design Tokens are sophisticated yet straightforward. The concept allows you to select font parameters from Theme/Foundation and Theme/Device. For example, the font-family for Website/Heading 1 could be sans-serif, with the specific sans-serif determined by the foundation.

Website/Heading/font-family = Foundation/sans-serif/font-family

Alternatively, if you opt to use the Foundation Serif, then:

Website/Heading/font-family = Foundation/serif/font-family

This approach ensures your design system is themed, responsive across various devices, and easily managed by defining how your products utilize foundational design tokens.

Final Thoughts

Design Tokens are an essential element in creating a robust and scalable Design System. By establishing a foundation and building on it with semantic variables, you can achieve consistency and flexibility within your design system. And with the power of token-based theming, your design system can adapt effortlessly to different products and devices.

I hope I helped you and inspired you for your work, if you're happy with my content feel free to reach out and subscribe to my newsletter for more design-related insights and tips.