What are design tokens?
Design tokens represent the small repeating design decisions. You can imagine them as the visual design atoms. Design tokens replace static values like hex codes for colors with self-explanatory names.
Why are design tokens necessary?
A design system with design tokens enables a single source of truth. If you use design tokens for your design and implementation, style updates will propagate consistently through an entire product or suite of products.
Design token types
These types are the building blocks and the design decisions.
Global design tokens
Global design tokens are the primitive values in our design systems. These can be used and inherited by other tokens.
- Typography
- Color palette
- Animations
- Dimensions
Alias design tokens
Alias design tokens help communicate the intended purpose of a token. These tokens are practical when a value with single intent appears in multiple places.
Component-specific design tokens
Component-specific design tokens represent value associated with a component. They are named in a way that allows engineering teams to be as specific as possible in applying these tokens in component development.
Are the Design tokens right for me?
Google Material Design 3 documentation offers a list of scenarios where design tokens are most helpful and efficient:
- You plan to update your product’s design or build a new product
- Your design system is applied across more than one product or platform
- You want to maintain or update styles in the future easily
- You want to get the most out of Material Design, including features like dynamic color
Material Design also mentioned two instances where design tokens might be less helpful:
- Your existing app uses hard-coded values that will not change in the next 1-2 years
- Your product does not have a design system
Benefits of Design tokens
There are three main benefits of design tokens.
Single source of truth
Design tokens align design and implementation and allow teams to speak the same language no matter their role, platform, programming language, or responsibilities.
UI Consistency
UI consistency is critical to delivering great understandable products. Designers accidentally use slightly different sizing, brand, colors, and spacing for a single product. These inconsistencies cause usability issues and increase development and design debt. Design tokens help eliminate these inconsistencies because of a single source of truth.
Flexibility to scale
Design tokens give design systems and products flexibility to make changes and scale. If you decide to change colors, create a dark theme, or change the typeface from Helvetica to Roboto, you only have to update the regarding tokens to implement a change.
Design tokens in practice
Workflow without design tokens
- The designer updates a style in a design tool (Figma, AdobeXD, etc.)
- The designer documents the changes for the design handoff
- The engineer updates the component’s properties (CSS, LESS, SASS, etc.)
- The design team confirms the changes during quality assurance (QA)
There are several problems with this workflow:
- It creates more work and attention to detail during the design handoff.
- It’s prone to errors and miscommunication.
- It creates more tickets and could increase technical debt.
- Making the changes and fixing any corresponding errors costs unnecessary time and money.
Workflow with design tokens
- Designer updates a style in a design tool (Figma, AdobeXD, etc.)
- A design tokens generator updates a centralized repository creating platform-specific files (JSON/YAML)
- Engineers pull the new repo, add any new tokens, and automatically update the project’s styles
You reduce documentation for design handoffs and save programming time for engineers using design tokens. This automated system significantly reduces human error, streamlining the development and QA process.