The Case for Design Tokens

What are design tokens

Design tokens are platform-agnostic variables that are used to store design and style values (eg. typography and colour choices) They are often used as a source of truth for design choices and decisions which in turn allows for consistent application of design across all tools and platforms.

What does a design token look like?

Design tokens are just JSON (or sometimes XML) “key, value pairs”. Octana design tokens are managed with a plug-in called Figma Tokens, which formats tokens using JSON.

Here is a few examples of what tokens look like when expressed in JSON:

This JSON is then interpreted by whichever software is being used (in our case Figma + Figma Tokens plug-in) to organise and format your project styles.

_{Don’t worry, you don’t have to actually write in JSON (though you could if you really wanted to).}

Here’s what some JSON looks like when it’s being interpreted by the Figma Tokens plug-in (this Ui can be interacted with in almost the same way as Figma’s default colour management system):

Design token categorisation and organisation

Octana has three levels (or hierarchies) that make up it’s token system: Foundation tokens, Context tokens and Component tokens.

Why use tokens?

To understand how tokens benefit designers (and developers) we must first understand the current state of design software style systems. Figma, Sketch and their predecessors all have very similar style management experiences. Figma and Sketch offer Colour and Text Styles and are slowly expanding style management to other properties like gradients and drop shadows. In a way these styles are just tokens, considering that they are variables (key-value pairs). However, they lack the flexibility that is needed to build complex design systems that scale to cover multiple variations, themes and brands simply because there is no way to assign a style to the value of another style (nesting styles). Default styles also lack the modularity available to developers using CSS/SASS/SCSS which leads to design-developer alignment issues. Lastly, there is also no easy way to create and maintain a cross-platform source of truth using default design software styles. These limitations are what a token system (and Figma Tokens) addresses.

Tokens unlocking theming

Using a token system, it is possible to define a variable like “grey-300” (with a value of #B4B4B4) and that same grey-300 variable can then be assigned as the value of another variable such as “disabled” and any number of other variables. This ability to assign styles as values of other styles is the functionality that unlocks scalable theming.

Modularity and alignment

Figma and Sketch styles are monolithic, whereas tokens take a modular/additive approach to styling. The latter is more in line with the cascading model of CSS/SASS/SCSS which means closer alignment between design and development can be achieved and styling can be managed in a less repetitive manner that is easier to maintain.

Cross platform source of truth

Many of the previously stated issues with Figma and Sketch styles seem to be able to be traced back to the design software style management systems lacking a source of truth. Not only are token systems designed to be that source of truth, but they’re also formatted in a way that (with the help of some other third-party tools) they can be used as the source of truth for other platforms and software. Using tools like Amazon’s Style Dictionary or Salesforce’s Theo—your design tokens (in their JSON format) can be used as an input to create an exact corresponding set of web/android/iOS styles for a development environment. With some DevOps magic, this process can be automated in a build script to drastically cut down on the time that needs to be spent on client-side development whilst enabling near pixel-perfect implementation of design to a live product.

How does all of this come together to be used in practice?

Use cases

• In it’s simplest form, a token system can be used to manage different variations or states of components within a Ui kit

• It could be used to manage a light and dark theme, or an alternative accessibility focused theme

• It could be used to quickly A/B test different brands or brand treatments

• It could be used to manage different style treatment for localisation/localised versions of a product

• or finally, if you’re an agency (like us) or a company with multiple products or subsidiaries tokens are one of the most elegant ways to manage a multi-brand design system

Do you have to use design tokens with this Ui kit?

Absolutely not. The design token system has been applied using a third party plugin called “Figma Design Tokens” and it can be seen as a separate layer over top of the components in this file. Should you wish to manage your themes and styles with your own methods, you are free to do so. Octana Figma components themselves have been created in the same way as any other Figma component and will work with a default Figma styling system.