Kolibri Sync

About this plugin

Kolibri Sync is designed to streamline the workflow between design and development by enabling synchronization of color styles and variables. The plugin allows generating color palettes directly within Figma, importing CSS color variables into Figma as design tokens, and exporting Figma variables and styles as CSS variables.

What You Can Do with Kolibri Sync

Kolibri Sync provides three main actions:

1) 🎨 Create color palettes in Figma:

Rapidly generate structured color palettes right inside Figma. When a palette is created, Kolibri Sync sets up a new collection in Figma variables, organizing both light and dark variants for each color (e.g., purple-100, purple-500, purple-900). Each color is shown as a pair of rectangles, a base color and an overlay for lightening or darkening, simulating the CSS color-mix()function.

Step-by-step: How to Create a Color Palette

2) ⬇️ Import CSS color variables as Figma color tokens:

Bring CSS color variables into Figma. Kolibri Sync maps your CSS variables to Figma design tokens (variables and styles), supporting solid colors, gradients (linear, radial, conic), resolved color-mix()functions, and the modernlight-dark()CSS function for dual-mode color tokens.

Step-by-step: How to Import CSS Variables

3) ⬆️ Export Figma color tokens and color palettes as CSS variables:

Export your Figma design tokens, including variables, styles, and generated color palettes, as CSS custom properties. Kolibri Sync supports exporting both solid colors and gradients, and can generate CSS using the light-dark()function to represent light and dark mode color values for modern CSS workflows.

Step-by-step: How to Export as CSS

---

Limitations

1. Currently supports only color variables and styles.
2. Color styles support only solid colors, gradients, and references.
3. Diamond gradients are not supported.
4. Gradients using CSS variable references (e.g., var()) are not supported for import.

About This Plugin

Kolibri Sync was developed as part of a bachelor thesis at the University of Applied Sciences and Arts Northwestern Switzerland (FHNW). The plugin will continue to receive updates and improvements, with new features planned for future releases.

Feedback and suggestions are welcome - send feedback via this form or see the Kolibri Sync GitBook for more detailed examples.