Design Tokens

Tokens are platform-agnostic design decisions that are translated into values.

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.

Color Variables Example

Color Variables Example

Colour tokens have a square preview swatchs, styles are circular swatches

Numerical values can be applied to:

  • Padding
  • Spacing
  • Auto Layout Spacing
  • Border Radius
Spacing & Radius Variables

Spacing & Radius Variables

Numerical variables are triggered from the hexagon icon

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.

Style Tokens will be deprecated

Style Tokens will be deprecated

These values will be moved into primitive tokens and then aliased to semantic tokens

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.

Resources