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
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 & limitations
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').
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.
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.
