1. Introduction

Initial Situation

The implementation of modern web applications relies on the close collaboration between design and development. While designers work in design tools like Figma, developers translate these designs into functioning user interfaces using HTML and CSS. Despite this shared goal, the workflow is often fragmented. Design tokens such as color, spacing, and typography must frequently be duplicated and manually kept in sync across tools.

As digital products grow in complexity, more organizations are formalizing their approach by adopting design systems. Between 2024 and 2025, the proportion of organizations with a dedicated design system team rose from 72 % to 79 %, signaling a shift toward more structured and scalable design operations (Zeroheight, 2025). According to Zeroheight’s Design Report 2025, managing design tokens is becoming increasingly challenging. 57 % of respondents report difficulty in defining a coherent token architecture. A further 37 % struggle with integrating tokens into existing codebases, and another 37 % have difficulty with distributing tokens consistently across design and development tools (Zeroheight, 2025)

As design systems mature and token-based workflows become the norm, the need for seamless synchronization of design tokens in design tools and codebases is more critical than ever.

Problem Statement

The challenges of aligning design and code become especially clear when examining Kolibri, a vanilla web UI toolkit developed by Prof. Dierk König, Fabian Affolter, and others. Kolibri maintains a structured and scalable CSS architecture. Yet even in such systems, maintaining alignment between Figma designs and the corresponding CSS code remains an ongoing effort.

A key challenge in the Kolibri project was that core parts of the design system, such as color tokens, were already implemented in code but not yet represented in Figma. This created friction when attempting to communicate design decisions from the codebase back into Figma design. Keeping both sources aligned proved to be time-consuming and error-prone. This challenge has been outlined in the project description.

The disconnect between design tools and implementation environments creates inconsistencies, redundant work, and slows down iteration. When there is no shared workflow, the Source of Truth (SoT) becomes unclear, and design decisions risk being implemented incorrectly or not being updated at all. This brings us to our central research question:

How can a synchronized workflow between Figma design systems and CSS be established to maintain a clear Source of Truth (SoT)?

Goal

In this thesis, we explore how to bridge the gap between designers and developers by synchronizing their workflows and minimizing inconsistencies between design and code. To achieve this, a Figma plugin called Kolibri Sync has been developed, tailored to the learnings of the Kolibri web UI toolkit. This plugin aims to enable a bidirectional synchronization between design and code. It seeks to reduce friction during handoff, support a clearer SoT, and provide a reusable solution for teams working with design systems.

Motivation and Scope

This research is motivated by practical experience and recent findings in design systems. Studies show that when designers and developers donʼt work in sync, it can harm team productivity, clarity, and focus. Design systems help solve this by improving communication, aligning workflows, and reducing time spent on repetitive UI tasks (Stepanova, 2021 ). Their growing use in the industry reflects their value.

From an educational perspective, this project offered the opportunity to study how shared design assets support mutual understanding across disciplines. By focusing on the synchronization of design tokens between Figma and CSS, this thesis contributes to a growing understanding of how cross-functional workflows can evolve toward greater alignment and maintainability.

The primary implementation presented in this thesis focuses on the synchronization of color tokens between Figma and CSS. While this represents a critical aspect of design system consistency, it does not yet include other design token types such as typography, spacing, or layout. These elements are equally important in achieving a fully synchronized, bidirectional design and code workflow and remain open areas for future development and research.