Keynote: Design tokens and their application in industrial HMIs

The talk by our designer Johannes Ziebandt from the Future of Industrial Usability Conference last fall is now also available as video. The techniques discussed are important for UX/UI designers as well as for developers and project managers of professional HMIs, because the flexible and modular approach can make the development process much more efficient in the long term:

Design systems are currently the state-of-the-art method for building and maintaining human machine interfaces. Their component-based approach to creating design templates enables a close connection to front-end development. This simplifies the handoff and documentation for implementation.

A crucial component of design systems is the documentation of design properties as variables, the so-called design tokens. The aim here is to bring the description of the design as close as possible to the implementation, while at the same time ensuring platform and technology independence.

Another key aspect of design tokens is that changes to the design do not require any additional documentation or implementation effort. Both the design output and the integration into the development can be automated. This makes it relatively easy to create parallel design versions that are tailored to different aspects such as larger or smaller displays, dark and light themes, or adaptations to different corporate designs.

Design tokens are also used in our HELIO IDE. We optimized the visualization system based on web technology for simplicity and speed. It was particularly important to us to keep the interface between design and development as lean as possible. Design tokens give us the opportunity to make quick and flexible adjustments to a standardized modular system. Our biggest challenge was to use the token library before it was fully completed. In other words, “living tokens” that enable us to continue developing new variants of the same core system in a sustainable and future-proof way.

Download Keynote (PDF)
Video on vimeo
Video on youtube

W3C Draft
Design Tokens Naming Playbook
Naming Tokens in Design Systems
BEM - Block Element Modifier