Abstract

The handoff between UI/UX designers and developers is rarely seamless. Like runners in a relay, both aim for the same finish line, but the baton of information can be lost between their separate environments. Designers work in tools like Figma, while developers work in code editors. Without a clearly defined Source of Truth (SoT), design decisions must often be manually translated, creating redundant work, inconsistencies, and opportunities for error. This thesis presents Kolibri Sync, a Figma-native plugin designed to enable bidirectional synchronization between design and code without npm dependency. The plugin exports color tokens defined in Figma to production-ready CSS custom properties and imports existing CSS variables back into Figma as reusable styles or variables. Key features include creating structured color palettes with matching Figma collections, importing modern CSS constructs such as color-mix(), light-dark(), and var(), and exporting color token definitions from either styles or variables for development use. Five primary pain points in current design and development workflows were identified, with the implementation serving as a proof of concept addressing these challenges. User testing revealed that the plugin offers potential benefits for smaller teams, particularly in reducing manual work, saving time, and minimizing translation errors between design and code. Findings also suggest that for small-scale projects, defining the SoT within Figma can be effective, whereas larger projects may require an external platform with stronger documentation and version control capabilities. While the proof of concept demonstrates the feasibility of synchronizing color tokens between Figma and CSS, further work is needed to improve the plugin’s user interface. The bidirectional synchronization approach developed in this thesis offers a strong foundation for extending the method to other types of design tokens in future research.

Keywords:

Figma, CSS, JS, Figma Plugin, UI/UX, Design Token, no npm, colors