Implementation of design tokens in existant structure

Replace the actual colors, spacing, radius and elevations with organized and logical tokens, shared with designers and developpers with the maximum efficiency before a global rebranding.

Timeline

2 months

My roles

Design system manager

Goals

Create a system of tokens for colors, spacing, radius...

Constraints

Lack of time before a global rebranding

Deezer is

20%

BEFORE

20%

BEFORE

Design tokens integration in App, on Web, TV and weartech.
Naming differences between iOS, Android and Web.
Teams don’t speak the same langage (rgb, hexa, hsl, px, ).

100%

AFTER

Design tokens integration in App, on Web, TV and weartech.
No more differences between iOS, Android and Web.
Better communication between designers and developpers.

Why tokens are necessary in a product and mandatory for a rebranding?

Design tokens make it possible to do a number of essential things in a large-scale company.

- Harmonize the product across different platforms.
- Improve communication between designers and developers.
- Facilitate onboarding of new employees.
- Simplify large-scale processes such as rebranding (hello deezer!).

First step: migration of the old colors to core tokens

1. Meeting with developers to understand the scope of the task and their expectations/doubts.
2. First creation of a file to associate the colors used with core tokens.
3. Validation of this nomenclature with developers and designers.

Excel dedicated to change core tokens screenshot

Second step: creation of the new system of semantic tokens

4. Creation of semantic tokens to demonstrate interest to stakeholders.
5. Implementation in Figma designs and in the various programming languages.
6. Check that tokens are correctly integrated using a slack alert group.

Excel dedicated to create semantic tokens screenshot

Maintenance

To maintain this token system and add new tokens as the product needs them, we use Figma and its branch system.

Thanks to the Figma variables implemented earlier this year, each time a token is added, we create a new branch with the following nomenclature (0.10 - Disabled semantic tokens update) and make our changes inside. When we publish the branch, developers only see the changes we've made.

Diversity

After implementing these color tokens with the core and semantic tokens.

Seeing the success of this implementation and its adoption by all developers as well as product and brand designers, we decided to do the same for spacing, radius and elevation tokens.