Getting started with native design tokens in Figma

What are design tokens anyway?

Design tokens are named entities that store raw, indivisible design values like colors or pixel sizes. They are the core pieces of a design system. Stored in a technology agnostic format they can be transformed for use on any platform, replacing hard-coded values. ~ Design tokens — What are they & how will they help you?¹

Your text and color styles, shadows, etc. can be represented as design tokens. The important part is to share design tokens between all parts of the product team. The goal is for design and development to use the same tokens from the same source of truth.

With design tokens, both hand-off and global changes get easier. If set up correctly, any design token change must be done at one place only, the design token source of truth. And this change will still affect the entire system, e.g. changing the brand color everywhere all at once.

Variables vs. design tokens

Figma introduced variables². They work well as design tokens, but they are more, they can also be used for prototyping³.

This article focuses on using the Figma variables feature to implement design tokens. I may refer to it as either variables or design tokens.

Variables can be one of four types: solid color, number, string, and Boolean.

Color

Color variables can be applied as fills, text fills or stroke color².

Currently, variables can’t be used in effects like shadows, in layout grids or in gradients.

Color variables can only be solid colors. Gradients are not supported, and you can’t change the opacity of a color variable.

You can use color variable in styles, but you can’t change its opacity. You can, however, add another layer on top of the color variable. If you created a style with a variable and add a 60% white on top, you could create a muted version of your variable.

Number

Number variables can be used as text, for sizes, paddings, gaps, and border radii². This covers most things you would need design tokens for.

The three things currently not supported are border-width, opacities, and effects. This means you can’t make styles or components semi-transparent using a variable. And you can’t define shadows with number variables from your design system. 😢

String / Text

Text can be used in text layers and for variant names². They are useful for translations or to tokenize UI copy.

To translate your entire app, create a collection with a mode for each language you support. Now you can switch the language of your entire app from a dropdown.

You can also use text strings to switch between variants. For example, you could set a text string to mobile or desktop. With this you can change a component variant between mobile or desktop. This is great if instead of different token values, you use different tokens on the two platforms.

Boolean

Boolean variables don’t seem to have a lot of use for design tokens.

They are great at toggling things within component depending on specific modes though. For example, to show or hide icons depending on the screen size.

At the time of writing Boolean variables can only be used for Boolean variants. Not for Boolean component properties.

Design tokens vs. styles

Styles in Figma are similar to design tokens. But they have some capabilities that design tokens are lacking. For example, design tokens don’t support blend modes or mutations like alpha changes. But they can be referenced in other tokens or even styles⁴. This is not possible using styles.

While some of those functionalities may come to design tokens at some point, many may not. And this is a good thing. Design tokens are purposely kept close to the w3c design token specs⁵.

Styles however are a Figma primitive, similar to classes in CSS. Maybe styles will get more capabilities in the future. For example, being able to set the opacity of a referenced variable.

When to use tokens?

At the moment styles have little unique use cases. I suggest using variables for all design tokens that can be represented as variables.

For now, only simple tokens can be created, composite tokens are not available in Figma.

You will also not be able to replicate tokens if you stray away from the w3c design token draft⁶ ⁵.

That being said, tokens should still most of your needs for color, and size base values.

When to use styles?

Use styles for anything that tokens can’t do. For example, you can use styles to replicate composite tokens⁶ for typography, shadows, or borders.

Typographic tokens are supposed to come to Figma at the end of 2023. But if this happens there are still borders and shadows left.

Design tokens in Figma libraries

Design tokens can be shared as part of a library just like styles. They also have the same limitations. This means they don’t get passed on through files.

Imagine you have three files: design tokens, components, app

• The components file imports design tokens and uses it on the components, which get exported
• app imports components, this will allow it to use the exported components. But the design tokens will NOT be available.
• app needs to additionally import the design tokens file to be able to use the design tokens directly.