Member-only story
Getting started with native design tokens in Figma
How to use Figma variables to implement different design token strategies
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.
