4.1 Bridging CSS and Design: Our Solution
This chapter outlines the implementation of Kolibri Sync, our solution: a Figma plugin focused on synchronizing color design tokens between Figma and CSS. The current implementation centers around color variables and color styles.
The Solution consists of three main features:
This chapter covers Kolibri Sync's primary goals, core functionality, and target users. After that, dedicated sections will explore the Plugin Architecture and each of the three main features in depth. In addition each feature also presents a set of hypothetical use cases. These use cases illustrate how the plugin’s capabilities could be applied in practical workflows.
What is Kolibri Sync?
Kolibri Sync is a comprehensive Figma plugin that enables bidirectional design token synchronization between Figma color tokens and CSS variables. The plugin serves as a bridge between design and development workflows, allowing seamless movement of design tokens in both directions while maintaining consistency and reducing manual work.
Primary Goals (PG) of Kolibri Sync
These primary goals address the fundamental pain points identified in the section 3.7, focusing on the systematic challenges that hinder efficient collaboration between design and development. Addressing our central research question of how to establish a synchronized workflow between Figma design systems and CSS to find a clear Source of Truth (SoT), we define three primary goals:
Table 4. PG001 - Streamline Design-Development Handoff
Problem Statement
Traditional design-development workflows rely on manual processes that create bottlenecks, communication gaps, and inconsistencies between design and implementation. (PP001 - One-way Synchronization, PP002 - Manual and Fragmented Variable Export).
Solution
Kolibri Sync tries to establish a direct, automated bridge between Figma design tokens and CSS variable, enabling bidirectional synchronization.
Key Objectives
Reduce Communication Gaps: Improve the connection between design decisions and implementation, removing the need for manual handoff documentation.
Improve Collaboration: Enable designers and developers to work with the same design tokens simultaneously, fostering better cross-functional collaboration.
Expected Impact
Reduce design-development handoff time while improving accuracy and reducing the need for iterative corrections.
Table 5. PG002 - Reduce Manual Work and Errors
Problem Statement
Manual design token management can be error-prone, time-consuming, and inefficient, leading to inconsistencies, reworks. (PP003 - Manual Variable & Style Management, PP004 - Inefficient Color Exploration in Native Figma)
Solution
Kolibri Sync intends to improve the entire design token workflow, from creation to export, while maintaining human oversight.
Key Objectives
Eliminate Manual Processes: Replace time-consuming manual copying of design tokens between Figma and code with automated import/export functionality.
Automate Repetitive Tasks: Convert manual color extraction and CSS writing into automated processes that handle hundreds of variables simultaneously
Minimize Human Error: Eliminate mistakes that occur during manual copying of hex values, RGB codes, and other color formats through automated parsing and validation
Increase Efficiency: Dramatically reduce the time required to maintain design system consistency through batch processing and intelligent error handling
Expected Impact
Increase productivity while reducing design token-related errors.
Table 6. PG003 - Establish an Optimal Source of Truth
Problem Statement
Design systems often suffer from multiple sources of truth, where design tokens exist in separate Figma files, CSS files, documentation, and other tools, leading to version drift, inconsistencies, and confusion about which version is authoritative (PP005 - Lack of a Single Source of Truth).
Solution
Kolibri Sync aims to identify the most effective Source of Truth for design tokens, evaluating whether Figma, CSS, or another platform provides the optimal foundation for maintaining design system consistency.
Key Objectives
Evaluate Source of Truth Options: Assess the strengths and limitations of different platforms (Figma, CSS, documentation tools) as potential sources of truth.
Expected Impact
Offer guidance on viable Sources of Truth for design tokens, enabling teams to make informed choices.
Core Functionality (CF)
Kolibri Sync delivers three essential capabilities that help to solve the challenges proposed in our problem statement and pain points.
CF001 - Create Color Palettes
Systematic Palette Generation: Create comprehensive color palettes with systematic variations.
Light/Dark Mode Support: Generate palettes for both light and dark themes simultaneously.
Component Integration: Include example components to demonstrate palette usage.
CF002 - Import CSS Variable into Figma Color Tokens
CSS Variable Import: Convert CSS custom properties into Figma color variables or color styles.
Advanced CSS Support: Handle modern CSS functions including
color-mix(),light-dark(),variable referencesvar()and gradients.Batch Processing: Import multiple CSS variables in a single operation.
Format Flexibility: Support for HEX, RGB, HSL, and other color formats.
CF003 - Export Figma Color Tokens as CSS Variable
Variable Export: Generate CSS custom properties from Figma color variables and color styles.
Modern CSS Generation: Create
light-dark()functions for theme support,color-mix()for blending,var()to reference CSS custom properties and gradients .Multiple Formats: Export in HEX, RGB, or HSL formats following MDN recommendations.
Organized Output: Generate well-structured, commented CSS files ready for production use.
Target Users (TU)
Kolibri Sync is designed for two primary audiences: designers and developers. These user groups are directly affected by the challenges identified in the chapter 3.7, making them the main target users. They also serve as the primary actors in the hypothetical use cases described later in this chapter.
TU001 - Designers
Kolibri Sync aims to address the specific challenges designers face in maintaining visual consistency and ensuring accurate handoff to development teams. The plugin intends to serve:
Designers who need to import/export tokens (colors, typography, spacing) and keep Figma design token aligned with code
Designers who needs quick design iterations to find a suitable color palettes.
Expected key benefits for designers include improving color selection, and improving collaboration with engineering teams.
TU002 - Developers
Kolibri Sync aims to address the challenges developers encounter in receiving a production-ready design tokens from design teams. The plugin intends to serve:
Developers who need up-to-date design tokens as CSS variables to implement designs.
Developers who require an efficient bridge between Figma and code without manual mapping.
Expected key benefits for developers include easier Figma color token ingestion, fewer integration errors, and faster implementation of those tokens.
Last updated