Richard Persson is the design director at Morphosis Apps. He is specialized in user experience and interface focused product design with deep knowledge in how to solve complex problems and delight users with simple and useful design.

Product Design
Design system and Design token

What are design tokens and how can they improve design production?

Tokens 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 colour, 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:

  • Colours
  • 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 usage, 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: