Introduction
Design Tokens work across platforms and tools to associate a specific name with a value. Design tokens can store values as numbers, strings and aliases.
They are grouped into categories such as spacing, colour, typography, and more.
The W3C standard governs design tokens; the W3C recently announced its first stable standard, which Compound uses.
Benefits of design tokens
Designing for digital interfaces is becoming increasingly challenging. Squads must strike a balance between consistency, brand guidelines, and accessibility while delivering new, unique experiences that meet their audience's needs.
Tokens are foundational values that give teams a palette to style, format, and build their interfaces. Design tokens provide foundational theming of components and interfaces, making it easier to swap modes and parameters simply by changing the token value.
Design Tokens in Figma
Note that Figma Variables cannot currently create all design token categories that match the W3C standards.
Figma introduced the variables concept to allow teams to use a few design token categories, such as colour and numbers, with limited functionality. However, it does not have complete parity with the component codebase.
Figma Styles
Figma still plans to use styles for composite tokens, such as shadows and typography.
Working in Figma
Although there are variables and styles, Figma has worked hard to reduce the learning curve for designers.
Apply colour variables just like styles; however, the palette has been locked down to semantic aliases.
Color Variables Example
Numerical values apply to:
- Padding
- Spacing
- Auto Layout Spacing
- Border Radius
- Font Size
- Line-Height
Spacing & Radius Variables
Descoped Styles
Descoped styles are marked in the syntax below to indicate that they will be descoped. When styles are removed from Figma, they revert to their raw hex value.
-- style name --
The current Styles > Tokens category will be deprecated in favour of colour variables.
Style Tokens will be deprecated
Tokens to Code
Compound exports tokens in various formats for Web and React Native component libraries and themes.
Token changes and suggestions
Tokens are another core element within Compound, a small property with a substantial impact. Adjusting a token has a significant impact across the system.
If no suitable token exists, you can propose one through the contribution process.
Tokens Documentation
In this documentation, tokens appear alongside the foundation and component guidelines.
- Colours
- Typography
- Spacing
- Elevation