Contact now
Contact now
An abstract digital interface in shades of blue, designed with data points and diagrams in a futuristic style.

Token-based design system

Optimized workflow between designers and developers
BMW Group Logo
DeutscheBahn_logo-2
Creditreform Logo
DERTOUR
jochen-schweizer
Dräger Logo
kuka
BMW Group Logo
DeutscheBahn_logo-2
Creditreform Logo
DERTOUR
jochen-schweizer
Dräger Logo
kuka
ProSieben_Logo_2015-2
Mercedes
Miele Logo
Volkswagen Logo
DEKRA
stihl
Sonax_logo
Weidmüller logo
ProSieben_Logo_2015-2
Mercedes
Miele Logo
Volkswagen Logo
DEKRA
stihl
Sonax_logo
Weidmüller logo
HomeResearch & DevelopmentToken-based design system

Design systems: A common language

Not only customer projects, but also conferences and the online community around Figma have been characterized by the topic of design systems and design tokens in recent years. Designers and developers are speaking a common language for the first time with the definition of design decisions in variables (design tokens). This thesis was the motivation for the project and was intended to answer the following questions:

➔ Is synchronization and partial automation between UI design and frontend development possible via tokens?

➔ And what can a workflow look like that really optimizes collaboration in this respect?

This research project focuses on a token-based design system that is created from the outset in collaboration between designers and developers. The challenge is to build the design system and to base the process from requirements to design to the development of web components on the foundation of design tokens.

A diagram shows a hierarchy of tokens in the design system: Core Token, Semantic Token and Component Token, each with specific names and values.

The design system is platform-independent

The already established principle of atomic design has been extended by one level through the trend of so-called design tokens. Thus, in the metaphor used, atoms are no longer the smallest components of a design, but the tokens. A parameterized design system makes it possible to change the overall look and feel of the result quickly and easily by adjusting individual variables, the design tokens.

Similar to theming, it is possible to create different visual characteristics from the same basic design. However, design tokens can be made more granular and complex, allowing more control. Design tokens can also be used as design decisions for any media, such as PowerPoint templates, Word templates or other brand-specific material, and are therefore platform-independent.

Team works together on a laptop outdoors.

Design tokens as the basis for collaboration

As part of the R&D project, a technical approach was chosen as the basis for improving collaboration between design and development. Design tokens form the link between the Figma designs and a web components library.

Changes to the design tokens are thus controlled via a technical process and reflected in both the design and the code. Code is not generated automatically. Rather, the smallest design decisions - such as spacing, fonts or colors - have a direct impact on the implemented version of the elements.

Our current workflow

A very strict structure and naming scheme for the design tokens support the technical process. This creates an unambiguous basis for the smallest but essential design decisions that both developers and designers work with.

  • Technologies:
    Figma, Token Studio Plugin, Stencil, Style Dictionary, Storybook, Chromatic, React, Vue, Angular, Web Components, GitHub, GitHub Actions
  • Methods:
    Agile project management, Kanban
A diagram describes the workflow of design tokens between Figma, GitHub, Storybook and applications, supported by Token Plugin and MWUI.

Successful design system: communication is key

Communication between developers and designers is essential in order to implement a software project successfully and efficiently. The expertise of both areas flows into a joint product and is mutually dependent in many areas.

Unambiguous communication is important so that a good exchange of creativity, technical feasibility and decision-making can take place. Some decisions arise from a designer's creativity, others are driven by technical feasibility or other framework conditions.
Challenges can be recognized early on through good designer-developer communication and solutions can be found together.

A man in a gray jacket wears a light blue shirt.
Design systems are complex. It needs process and technology expertise to create added value for the company. We experience with our customers that the last 20 percent is often missing at this point. To ensure that the system is used holistically, this is exactly where we start.
Christian Loos, Managing Director, MaibornWolff
Find what suits you best
Refine your search
clear all filters