4.5 Exporting from Figma to CSS (CF003 )

Exporting Figma color choices to CSS completes the plugin’s bidirectional synchronization, allowing design tokens to move fluidly between design and code. This helps keep experiences consistent across platforms by ensuring tokens remain aligned in both environments.

This feature directly supports the primary goals of Kolibri Sync: streamlining handoff (PG001), reducing manual work and errors (PG002). By exporting Figma variables and color styles as CSS color variables, the export functionality bridges the gap between design and development. Decisions made in Figma can be represented as CSS variables, ensuring that what's designed stays aligned with what's implemented in code.

Note: The step-by-step guide for CF003 is in the Appendix A9.

Export Parameters and Design Choices

The export UI follows the same interaction model as import, using a mutually exclusive source selection with form fields that adapt to the chosen option. This consistency helps avoid confusion and allows users to complete the process more quickly.

1. Source Format

This control specifies the origin of data for export and determines how the exporter maps Figma design tokens to CSS.

Three source formats are supported, each with distinct export behavior:

  • Styles: Exports Figma color styles as CSS custom properties. Suitable for solid paints, variable references, and gradients (linear, radial, conic).

  • Variables: Exports Figma color variables as CSS custom properties. Preserves variable references and supports theme-aware output when multiple modes are present (for example, emitting light-dark(light, dark) if two modes are selected).

  • Figma palette (Kolibri Sync “Create”): Exports color palettes from the Create feature as color-mix() expressions in CSS, reflecting their construction from base, lightening, and darkening colors. This option requires a Color Palette frame to be selected on the Figma canvas.

Radio buttonns for source format

2. Color Format

This control specifies the CSS color format for exported variables. Standardizing on a single format improves readability, makes code comparisons easier, and keeps the codebase consistent by avoiding mixed syntaxes.

Available options:

  • Hex: Outputs colors in hexadecimal format. If an alpha channel is present, an 8-digit hex code is used. Examples: #DDCCFF, #00CC6680

  • RGB: Uses space-separated modern syntax. Alpha values are represented with a slash. Examples: rgb(221 204 255), rgb(0 204 102 / 50%)

  • HSL: Uses degrees for hue and space-separated values. Alpha values are represented with a slash. Examples: hsl(260deg 100% 90%), hsl(150deg 100% 40% / 50%)

The export applies the selected format to all colors. If a color includes an alpha channel, the exporter uses the format’s native alpha representation. Variable references are emitted as var(--token-name).

Radio buttons for color format

3. Collection (Variables only)

Similar to import, a dropdown selects the source collection to export from. This ensures only tokens from the chosen collection are included in the output, while allowing flexibility to export from any available collection.

Dropdown for collection

4. Mode(s) (Variables only)

Specifies which variable mode(s) to read from during export (for example, Light and Dark). Selecting modes before export ensures values are taken from the correct context and allows the plugin to generate theme-aware CSS using the light-dark() function. The dropdown lists all modes in the chosen collection.

Two configurations are available:

  • Single mode: One mode is selected, and all variables are exported from it.

  • Dual Light/Dark: Similar to Import with the + button, another dropdown is added. One is set to Light mode, which contains the values intended for the light theme, and the other is set to Dark mode. The exporter reads each variable’s color from these modes and outputs light-dark(light color value, dark color value) with the resolved values from both themes.

dynamic dropdown

5. CSS Output and Export button

The Export button produces CSS custom property declarations in an output textarea, based on the selected source, color format, and mode configuration. A left-side gutter displays real-time color previews using the same rules as the import section.

In dual-mode export, the plugin outputs light-dark() expressions as described in 4. Mode(s) (Variables only), pairing light and dark values into a single theme-aware declaration. If a token references another token, that relationship is preserved in the output (for example, --accent: var(--primary)).

The output is plain text, ready to copy into stylesheets, and begins with a brief comment header summarizing the export context (with source type, collection name, selected mode configuration, and timestamp). The comment provides essential context, helping developers to understand the origin and configuration of the exported code.

result of export in the text area

CSS Output Syntax

Kolibri Sync exports Figma color data as standard CSS custom properties, ensuring compatibility with existing development workflows. To maintain scope, only MDN-standard modern syntax is supported rather than every possible CSS color syntax. The plugin generates the following syntax for variable declarations:

--variable-name: value;

Each exported variable starts with -- and ends with a semicolon ;.

Variable Naming Conversion

When exported from Figma, variable names are transformed for CSS compatibility. Forward slashes / in Figma variable names are converted to hyphens -, and the CSS -- prefix is added automatically. This maintains the hierarchical structure while ensuring valid CSS syntax (e.g., color/blue/500 becomes --color-blue-500).

Color Value Formats

Kolibri Sync exports colors based on the selected color format, ensuring accurate color representation using MDN-standard modern syntax. This is available for style, variable and color palette export.

:root {
  /* Hex Colors (6-digit, 8-digit with alpha when needed) */
  --hex-solid: #00aaff;      
  --hex-with-alpha: #00aaffcc; 
  
  /* RGB */
  --rgb-solid: rgb(0 170 255);
  --rgb-with-alpha: rgb(0 170 255 / 80%);
  
  /* HSL */
  --hsl-solid: hsl(200deg 100% 40%);
  --hsl-with-alpha: hsl(200deg 100% 40% / 80%);
}

var() Function (Variable References)

Kolibri Sync preserves CSS var() references on export. Both variables and styles that reference other tokens are emitted as var(--token) rather than inlined values, reflecting Figma’s dependency. This applies to exports from styles, variables, and color palettes. If any referenced identifier cannot be resolved at export time (for example, deleted), the export fails in full to prevent inconsistent output.

--primary: #0066CC;
--accent: var(--primary);

Gradient

Kolibri Sync exports Figma gradients from styles into standard CSS, matching Figma's dev mode output for consistency.

Linear Gradient

Linear gradients are exported with an angle and color stops. The angle is in degrees (deg), measured clockwise from the right. Each color stop includes a percentage offset (0%-100%).

/* Angle and color stops */
--gradient-1: linear-gradient(127deg, hsl(0deg 100% 71%) 0%, hsl(176deg 56% 55%) 35%, hsl(191deg 60% 55%) 100%);

Radial Gradient

Radial gradients are exported with size, position, and color stops. Size is given as percentages (rx ry) and position is in percentages (x% y%). Each color stop has a percentage offset.

/* Size, position, and color stops */
--radial-1: radial-gradient(92.20% 92.20% at 30.00% 40.00%, hsl(35deg 100% 64%) 0%, hsl(2deg 100% 71%) 60%, hsl(207deg 40% 35%) 100%);

Angular Gradient

Angular gradients (also called conic) are exported with a starting angle, center position, and color stops. The starting angle is in degrees (deg). The center position is in percentages (x% y%). Stop positions are in degrees.

/* Starting angle, center position, and color stops */
--conic-1: conic-gradient(from 45deg at 50% 50%, hsl(0deg 100% 71%) 0deg, hsl(41deg 86% 77%) 108deg, hsl(176deg 56% 55%) 252deg, hsl(188deg 56% 23%) 0deg);

Diamond Gradient

Figma’s “Diamond” gradient is not exported by Kolibri Sync. Although a similar visual effect can be created in CSS by combining multiple linear gradients, Kolibri Sync's export focuses on single, standard gradient types. Therefore, Diamond gradients are skipped.

Gradient Limitation

  • No color-mix() inside gradients. If any gradient stop uses color-mix(), the gradient is skipped during export.

  • No var() inside gradients. If any gradient stop references a variable via var(--token), the gradient is skipped during export.

Export Variable with light-dark() function

Kolibri Sync generates CSS light-dark() when a dual-mode configuration is selected and a variable has values in two modes. The function pairs the values in a fixed order: Light first, Dark second. This behavior applies to exports from Variables and Color Palettes; Styles are not mode-aware and do not use light-dark().

In single-mode export, a single value is emitted. In dual‑mode export, light-dark(light color value, dark color value) is emitted. Values inside light-dark() follow the selected color format and preserve references (for example, var(--token)) or functions (for example, color-mix()) when present in the source.

Dual‑mode export requires both Light and Dark to be selected within the same collection; if either mode is missing or cannot be resolved for any required variable, export fails to avoid partial or inconsistent output.

When light-dark export is used, the exporter adds a comment noting feature availability and sets color-scheme: light dark; at :root to signal theme support.

/*
 * Color Variables from Collection: Kolibri_Sync_UI_Palette
 * Light Mode: light mode
 * Dark Mode: dark mode
 * Generated by Kolibri Sync Plugin
 * 2025-08-14T10:11:23.646Z
 */

:root {
   /* The light-dark() function is newly available as of June 2025 */
   color-scheme: light dark;

   --green-100: light-dark(hsl(120deg 44% 86%), hsl(120deg 25% 86%));
   
   ...

}

Export Color Palettes with color-mix() Function and light-dark()

When exporting from color palettes created via Kolibri Sync, the output always expresses variants with color-mix() to reflect the palette’s generative logic. The CSS mirrors the Variants Frame construction to preserve intent and traceability from design to code.

--blue: hsl(203deg 100% 50%);
--lightening: hsl(0deg 0% 100%);
--darkening: hsl(0deg 69% 10%);

--blue-100: color-mix(in srgb, var(--blue), var(--lightening) 80%);

Mode selection is controlled by the canvas selection. Selecting only the light sub‑frame exports light values; selecting only the dark sub‑frame exports dark values; selecting the full palette frame exports both modes wrapped in light-dark(light, dark). This pathway operates only when a Kolibri Sync–generated Color Palette frame is selected on the canvas. Palette structures modified outside Kolibri Sync are not supported; if the structure deviates, export fails.

The output begins with a comment header summarizing context (source: Color Palette from Figma Selection; timestamp) and sets color-scheme: light dark; when light-dark() is present, accompanied by a short comment noting feature availability.

/*
 * Color Palette from Figma Selection
 * Generated by Kolibri Sync Plugin
 * 2025-08-14T09:05:02.170Z
 */

:root {
  /* The light-dark() function is newly available as of June 2025 */
  color-scheme: light dark;
  --blue: light-dark(
    hsl(203deg 100% 50%),
    hsl(203deg 50% 55%)
  );
  --lightening: light-dark(
    hsl(0deg 0% 100%),
    hsl(0deg 0% 100%)
  );
  --darkening: light-dark(
    hsl(0deg 69% 10%),
    hsl(0deg 69% 10%)
  );
  --blue-100: light-dark(
    color-mix(in srgb, var(--blue), var(--lightening) 80%),
    color-mix(in srgb, var(--blue), var(--lightening) 80%)
  );
  --blue-200: light-dark(
    color-mix(in srgb, var(--blue), var(--lightening) 60%),
    color-mix(in srgb, var(--blue), var(--lightening) 60%)
  );
  --blue-500: light-dark(
    var(--blue),
    var(--blue)
  );
  --blue-700: light-dark(
    color-mix(in srgb, var(--blue), var(--darkening) 30%),
    color-mix(in srgb, var(--blue), var(--darkening) 30%)
  );
  --blue-900: light-dark(
    color-mix(in srgb, var(--blue), var(--darkening) 60%),
    color-mix(in srgb, var(--blue), var(--darkening) 60%)
  );
}

The purpose of exporting color-mix() is to give developers insight into how the color palette was created, not just to provide the final solid colors. This allows them to see the mixing logic behind each color and understand the design intent.

Previous4.4.1 Use Cases for ImportNext4.5.1 Use Cases for Export

Last updated