What are design tokens and how can they improve design production?
Published on 24 May 2022 inTokens are a new standard under the W3C umbrella that unify the foundation between design and code to ensure consistent and unified product experiences. In a design foundation, tokens are the smallest building blocks of a design that together represent styling in a front-end framework.
It all starts with a design foundation
In a design system, the smallest parts of the foundation are built up by tokens, whose main purpose is to store values such as color, typography, spacing, and more. This enables a design system to be shared across platforms like iOS, Android, and regular websites.
Tokens in a design foundation consist of the following:
Colors
Typography and type scale
Spacing and grid system
Breakpoints
Elevation, shadows, and opacity
Border radius and thickness
Design tokens in a design system
All design foundations start with a global design token and a value. This single token is later inherited down to alias tokens that represent a specific context or abstraction in a design.
This improves scalability and performance in a front-end framework, and it is also a great way to build your design system around the same principles.
Create better designer-to-developer handoffs
You can easily apply the same design token principles used in a front-end framework to your design system.
You start with a global design token that holds your primary value, which can later be inherited down to various alias tokens that represent the styling of a component.
A well-organized design foundation increases design automation and makes it easier to make the handoff between design and development, as engineers can quickly translate your design system foundation into code.
Developer handoff improvements:
Faster hand-off process
Easier design implementation
Increased design automation
A single source for global styling
Designing for scalability
Even if some of the most popular design tools on the market do not have built-in support for design tokens yet, you can still organize your design system foundation to support the principles of tokens.
This will be a manual process until it is fully supported. Still, design tokens are slowly becoming the new standard of design, ensuring that all styling can be updated and controlled in a single place.
Improve consistency
Design tokens force consistency in design, as each individual design element is connected to a style and therefore a design token, which enables scalability and productivity.
Consistency benefits:
Increased project scalability
Styling separated from components
Smarter design foundations
Foundation swapping
Design your foundation for context
You should organize your design tokens with a structured naming convention based on context and usage, which as a reference is called a token scheme. A token scheme is a naming convention based on usages, like a button, a form, or a card.
If we break that down, then your alias naming convention might follow a token scheme that looks something like this:
color-button-bg
color-button-border
color-form-input-bg
color-form-input-border
color-card-bg
color-card-border
You can apply the same naming convention principles to all the various design foundation types, like typography, spacing, elevation, and corner radius.
These all control the core styling of your components and help keep them organized based on their context and usage. They also enable you to use the same component and change design tokens based on the device and context of your project.
Swap your styling in an instant
You can easily swap a design foundation with an identical design system library using the same design token scheme and naming convention.
Done right, it enables you to use the same component and change design tokens based on the device and context of your project.
By using a design token scheme based on all core components, you can easily change styling based on a specific implementation or device type without affecting anything outside of the context.
Scenarios for swapping design foundations:
Responsive web versus native app
Theming for light or dark mode
Branding or white label design
Translate design tokens to code
Neatly organized design tokens in a design tool like Figma or Sketch can easily be translated into code. Just as you can use design tokens in your design system foundation to scale design, you can also use them in your front-end framework.
Your design tokens are, after all, the same styling foundation that has been used in front-end frameworks for years – so now is the time to move the responsibilities and control back to the designers.
A single source of truth
Design tokens can easily be translated into coding languages like SCSS, JSON, or XML, which enables you to transform your design resources into a single source of truth.
Benefits of using design resources as a single source of truth:
Simplified development process
Unification across platforms
Flexible design
Take control of your design and development
At Morphosis, we specialize in design fundamentals such as design systems and front-end frameworks. Both play a vital role in product design and building scalable products that can grow over time.
Learn how we can help you improve your product design:
Subscribe to our newsletter.
Here are some related articles
Product Design
Let us will help you open new business opportunities by giving you a new perspective on your digital product you may not have considered before.