Masterarbeit
Automating the Analysis of the Usage of Design System Tokens and Components
Completion
2025/03
Research Area
Students
Sanika Humbe
Advisers
Dr.-Ing. Sebastian Heil
Description
In the fast-growing digital world, tech companies have faced challenges keeping design consistency in scaling digital products. Design Systems have emerged as a potential solution to these issues. Therefore many big companies have developed their own Design System based on their brand identity. The Design System is mainly divided into two different areas: style guide (tokens): focuses more on the graphic elements such as colors, fonts, spaces and pattern libraries (components): focus more on different UI components each representing a specific design pattern or interaction. The adoption of Design Systems has gained traction across industries. However, as Design System grow in complexity and are employed across multiple projects, analyzing and managing the usage of design tokens and components becomes a significant challenge. Measuring and tracking Design System adoption is vital for various stakeholders. It provides data that shows the effectiveness of a Design System and how it is benefiting customer growth and retention through maintaining brand identity.
The core problem lies in the required manual analysis of design token and component usage across multiple repositories, which is time-consuming, error-prone and does not scale well, leading to escalating UI/UX inconsistencies in digital products. Automating the analysis of Design System adoption therefore is the goal of this thesis. To address this, it is important to identify relevant metrics that effectively measure the usage of Design System tokens and components. The analysis needs to be capable of tracking and detailing design token and component usage across several projects in several repositories created by different teams. It should provide feedback for relevant stakeholders using appropriate means of data visualization and allow to identify potentially improvements for the existing Design System.
The objective of this thesis is the creation of a solution or the combination of existing techniques to solve the problem of automating the analysis of Design System adoption as described above. This comprises surveying the state of the art with regard to methods for identifying the usage of existing tokens and components in code repositories, how companies manage the adoption of Design Systems, and ways to visually track Design System adoption through automation. The demonstration of the solution by implementation and a suitable experimental evaluation in a pilot study are integral parts of this thesis.
