Creating a Design Token Library for ABB’s CommonUX Design System

Abstract

This commissioned product-thesis describes the process of creating a design token library for ABB’s design system. The objective of the thesis is to create a design token library, which aims to improve the design handoff process within the CommonUX-team. The goal of the thesis is to improve the knowledge and skills of the thesis worker. The research questions of the thesis are: what is a design token library and how can it improve the design handoff process?

These goals are met by describing the structure of design systems in general, which is followed by a definition of design tokens. The definition, together with an overview of the design system is then applied to create a project plan that consists of first level token architecture and a command line tool for importing the design tokens into a language agnostic format for the developers to use. The development process is described in a thesis diary, which is finally evaluated and discussed.

The conclusion to the research questions is that a design token library is a set of values that can be used to maintain and organize design decisions within a design system. It can improve the design handoff process by being a centralized and visible set of values that the designers and developers can agree upon and refer to by using a shared language.