February 2025

Keynote: Design tokens and their application in industrial HMIs

Our designer Johannes Ziebandt's presentation from the Future of Industrial Usability Conference is now available as a video. It shows how modern design systems and design tokens can revolutionize the development of Human Machine Interfaces (HMIs). These techniques are relevant for UX/UI designers, developers and project managers alike, as they make the development process more efficient in the long term.

Design systems have established themselves as the leading method for building and maintaining HMIs. Their component-based approach enables the creation of design templates that are closely linked to front-end development. This greatly simplifies the transfer of designs to developers (handoff) and the documentation for implementation.

The bridge between design and development

A key component of design systems is the documentation of design properties as variables, the so-called design tokens. Design tokens describe the appearance of an application, such as colors, typography or spacing. They make it possible to record design decisions in a standardized format that is understood by both designers and developers.

The advantage 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 possible to quickly and easily create different design variants that are tailored to different requirements (e.g. different screen sizes, dark/light themes or corporate designs).

Advantages of design tokens

Efficiency: Design changes do not require manual customization of the implementation.
Consistency: Design tokens ensure a consistent look and feel across all applications.
Flexibility: Design tokens allow easy customization to different requirements.
Scalability: Design tokens support the development of complex HMI systems.

Design systems and design tokens are indispensable tools for modern HMI development. They make it possible to create more efficient, consistent and flexible HMIs. Johannes Ziebandt's presentation offers a valuable insight into the practical application of these techniques and shows how they can sustainably improve the development process.