Design Tokens work across platforms and tools as a way to associate a specific name with a value. Design tokens can store values as numbers, strings and aliases.
They are grouped into separate groupings such as spacing, colour, typography and more.
The W3C standard governs design tokens; they have recently announced their 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 and unique experiences that meet the needs of their audience.
Tokens are foundational values that allow teams a palette of values 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 types that match the W3C standards.
Figma introduced the variables concept as a way 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 like a tool such as Token Studio.
Figma is slowly introducing more types; however, it is unlikely they will fully match all of the W3C Standards in the short term.
Figma Styles
Figma still plans to continue to use styles for items that are composites of several 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.
Numerical values apply to:
- Padding
- Spacing
- Auto Layout Spacing
- Border Radius
- Font Size
- Line-Height
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 and replaced with colour variables.
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 a suitable token does not exist, it is possible to propose one through the contribution process.
Tokens Documentation
Tokens appear alongside the foundation and the components guidelines.
- Colours
- Typography
- Spacing
- Elevation