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:
- Tokens in Design Systems - Nathan Curtis
- Using design tokens to promote collaboration and maintainability of a design system
- An example of design tokens in a live design system - Lightning Design System