4.4.1 Use Cases for Import
This section presents real-world scenarios in which Kolibri Sync’s import functionality works.
Table 11. UCI001: Moving from CSS-Only to a Figma-Integrated Design System
Scenario
A development team has been maintaining design tokens in CSS files, but designers need to work with these tokens in Figma to create consistent designs.
Challenge
The team has hundreds of CSS variables, and manually recreating them in Figma would be time-consuming and error-prone.
Kolibri Sync Solution
CSS variables are imported directly into Figma as variables and/or styles based on the selected destination. Variables are grouped hierarchically (for example, Red/500, Blue/500) to mirror design token structure and improve discoverability. Naming and category are preserved to maintain parity between code and design.
Impact
Ensures consistency between design and implementation by aligning Figma variables with existing CSS color tokens.
Reduces manual effort by automating the creation and organization of variables and styles.
Table 12. USI002: Bulk Import of Complex CSS Color Functions
Scenario
A design team needs to import a large CSS file containing complex color functions, gradients, and variable references that would be time-consuming to recreate manually in Figma.
Challenge
The CSS contains advanced features like color-mix(), var() references, light-dark() and complex gradients that Figma doesn't natively support for bulk import.
Kolibri Sync Solution
The full CSS is pasted into the import input, where it is parsed to resolve variable references and supported color functions. The plugin then creates organized variable collections and style according to the chosen destination.
Impact
Accelerates setup by importing complex color systems in minutes rather than manual reconstruction.
Ensures fidelity by preserving variable names and references consistently.
Reduces errors by parsing and translating supported functions systematically instead of manual copy-paste.
Last updated