Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (like hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
There are two types of design tokens:
- Platform tokens are specific to a platform (web, iOS, Android, etc. ), and they map directly to CSS properties.
For example, on the web you might have a design token named $color-primary, which would map to the CSS color property.
- Component tokens, on the other hand, don’t map directly to CSS. They’re more like “conceptual” atoms that can be used in various ways by different parts of the system. For example, you might have a token named $font-size-heading. This could be used by both the web and native platforms, but it wouldn’t necessarily map to a CSS property — instead, each platform would use it in whatever way made sense.
How do I use Figma Design Tokens?
You can use Figma Design Tokens in two ways:
- By reference: In this method, you simply reference the design token wherever you need it. For example, if you need to apply the $color-primary design token to an element’s color property, you would just write color: $color-primary; in your CSS code.
- Inline: In this method, you actually include the value of the design token in your CSS code. For example, if you need to apply the $color-primary design token to an element’s color property, you would write color: #ff0000; in your CSS code (assuming that #ff0000 is the value of $color-primary).
The best way to use Figma Design Tokens is by reference because it keeps your code clean and easy to read. It also makes it easy to update your code if you need to change a design token’s value later on.
