Design Tokens

Follow this guide to understand and begin using the EcoOnline design tokens.

Let's say a brand has a Primary Pink color. Designers and developers should refer to this color by the same name and identity, regardless of platform (design, web, mobile etc). If the color changes in design, it should also change on all development platforms automatically (and vice versa).

Design tokens enable this behavior by creating an abstract identity and centralizing the source of truth for this color. Because they help to establish a source of truth, they are often found in design systems. They can be used for colors, text styles, spacings, animation values etc.

 

 

 

Token Changes

Over time, as our products evolve, we will make styling changes or add new variables to improve the user experience.

At EcoOnline the UX team create the design tokens in Figma and using a plugin which outputs a source file. The design system owner then works closely with front-end to make sure the output is correct. The tokens are then gate reviewed by the design system front-end representative to ensure there are no problems.

Upon approval the tokens are updated and teams will run "npm update" to get the latest version (note: some frontend setups will have this automatically). Version numbers will reflect which changes that are breaking and which ones are backwards-compatible. Once the update has been successfully done any style changes will then appear in our products automatically. This saves us time and energy pushing pixels and unifying our products experiences.

 

 

Further Reading

If you'd like to learn more about design tokens, explore the following links: