Design Tokens are a platform-agnostic way to associate a name with a value. Almost any value can be stored as a design token, at the highest level these can be grouped into around 30 types; space, colour etc.
Originally created by Jina Anne whilst at SalesForce, the concept is now governed by a W3C community group which is working towards defining a working standard.
Why Use Design Tokens
Designing for digital interfaces is increasingly becoming difficult. Squads much balance consistency, brand guidelines, accessibility whilst deliver new and unique experiences.
Tokens are foundational values that allow teams a palette of values to style and build their interfaces. Behind the scenes, the design system teams have integrated these into components and themes to make it easier to swap modes and branding, simply by changing the token value.
Going forward the W3C is Community Group envisages tokens being built into tooling outside of design such as testing, marketing palettes and more.
Design Tokens in Figma
It should be clear that Figma Variables cannot currently create all design tokens types.
Figma introduce their BETA variables concept as a way to allow teams to use a few design token categories; colour, numbers, with limited functionality. However, it was never intended to have full parity like the tool 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 keep continue to use styles for items that a composite 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.
Colour Variables are applied just like styles, however the palette has been locked down to semantic alias.
Numerical values can be applied to:
- Padding
- Spacing
- Auto Layout Spacing
- Border Radius
Transition from Styles to Figma Variables
Figma’s guideline on moving from styles to variables is to apply them gradually.
With this in mind, colour styles will remain in the palette until an agreed point. However, designers are encouraged to use tokens going forward and existing styles have been remapped to their token counter part.
Compound components will move to exclusively using tokens and Typography v2 styles going forward.
Descoped Styles
Descoped styles have been marked like below to indicate that they will be descoped. When styles are eventually depreciated, they will simply return to a raw hex value.
-- style name --
The current Styles > Tokens category will be deprecated and replaces with colour variables.
Token Changes & Suggestions
This overview outlines that adjusting a token has a big impact. Tokens are another core element within Compound and therefore open to collaboration. Therefore any feedback or suggestions should follow the existing contribution process or discussion in the #compound channel.