Anaplan Design Tokens

Anaplan Design Tokens

Anaplan Design Tokens

Anaplan Design Tokens

The brief

At Anaplan our Design System was rapidly growing, with many new contributions and requests for components, enhancements, and design patterns. To ensure our design system was robust, scaleable and future-proof, I led the discovery for implementing Design Tokens into our component library.

The brief

At Anaplan our Design System was rapidly growing, with many new contributions and requests for components, enhancements, and design patterns. To ensure our design system was robust, scaleable and future-proof, I led the discovery for implementing Design Tokens into our component library.

The brief

At Anaplan our Design System was rapidly growing, with many new contributions and requests for components, enhancements, and design patterns. To ensure our design system was robust, scaleable and future-proof, I led the discovery for implementing Design Tokens into our component library.

The brief

At Anaplan our Design System was rapidly growing, with many new contributions and requests for components, enhancements, and design patterns. To ensure our design system was robust, scaleable and future-proof, I led the discovery for implementing Design Tokens into our component library.

Problem Statement

Anaplan wanted to re-design the product in a systematic way. In order to achieve this, we wanted to implement tokenisation that would lead to a one source of truth for our component library.


I researched and implemented a set of tokens for this new brand, implemented these in github and figma token studio. I collaborated between developers, UX and visual designers to validate our assumptions and launch of a new token system.

Benefits

Tokens would reduce complexity across our multiple themes within the Anaplan Design System library- for both designers and developers. Tokens would allow teams to work efficiently across squads and platforms, and would scale our library for future options such as multi-brand, visual design changes and customisation.

What are design tokens?

Design tokens are name and value pairings that represent small, repeatable design patterns. A token can be a colour, font style, unit of white space, or even a motion element. These all create building blocks of a design system.


To illustrate this example, instead of choosing one of many shades of purple for a primary button, we can apply a design token that is consistent with all similar usages across our products: 'signature'. When the button is in a new state (eg, hover), the token will update to 'signature-hover', pulling a new global token.

button

Raw Value

#B1AFFF

Global Token

purple-thistle

Semantic Token

signature-default

button (hover)

Raw Value

#D3D2FB

Global Token

purple-lavendar

Semantic Token

signature

-hover

button (hover)

Raw Value

#D3D2FB

Global Token

purple-lavendar

Semantic Token

signature-hover

Theme swapping: Proof of concept

Theme swapping: Proof of concept

Kick off workshop

To kick off the project, I facilitated a workshop to define names for our tokens with engineers and designers. This was a complex process and beneficial to work through the levels, component specific tokens, and foundations such as spacing, typography, padding etc.


Research

This project was started before Figma introduced their new 'variables'. I conducted research into competitor studies and followed research produced by the W3 community group.


Implementation

To begin working with tokens, I mapped our token types, from radius to spacing. I went through spreadsheets of naming and values to create a consistent convention and hierarchy. On consulting with the development team, I then applied these to our component library, to create a proof of concept. This additionally added themes (light, dark and an example 'red').

Theme swapping: Proof of concept

Theme swapping: Proof of concept

Many tokens build a theme: a collection of token values designed to achieve a certain look or style. Themes are how we switch colour schemes and styles everywhere using a single set of tokens. My proof of concept demonstrated a simple swap between light and dark theme, and an example 'red' theme.

Assisting new Visual Design

Assisting new Visual Design

Implementing design tokens helped rapidly speed up a new Visual Design rebrand.


As our tokens were all mapped out, we could now consistently make changes across multiple components, without duplication and error.


See an example of a component before and after. By only updating the tokens, we could quickly update the component without having to deprecate an old pattern.


© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall

© 2023 Sophie Powell-Hall