A8 - Step-by-Step Import Process

This section provides detailed, step-by-step instructions for importing CSS into Figma using Kolibri Sync. The process differs depending on whether you want to create Figma color styles or variables, and whether you're working with single-mode or light/dark mode variables.

Importing CSS as Figma Styles

1

Open Kolibri Sync and go to the Import tab.

• In this tab, you’ll see the import settings.

2

Select "Styles" as Destination

1. In the Import tab, locate the "Destination" section

2. Select the "Styles" radio button.

3. The interface will automatically show the styles import section

3

Paste CSS Variables into the Input Field

1. Locate the "CSS Input" textarea in the styles section

2. Paste your CSS variables using CSS custom properties, like --variable-name: value;

:root {
    /* Color Variable */
    --primary: #0066CC;
    --secondary: blue;
    --gradient-1: linear-gradient(127deg, #ff6b6b 0%, #4ecdc4 35%, #45b7d1 100%);
    --radial-1: radial-gradient(circle at 30% 40%, #ffb347 0%, #ff6f69 60%, #355c7d 100%);
    --conic-1: conic-gradient(from 45deg at 50% 50%, #ff6b6b 0%, #f7d794 30%, #4ecdc4 70%, #1a535c 100%);
}

4

Click "Import" Button

1. Click the "Import" button to begin the import process

2. The plugin will process each CSS variable and create corresponding Figma paint styles

5

Review Results and Notifications

1. Check the notification that appear after the import completion

2. The notification will show:

   • Number of styles successfully created/updated

   • Number of errors (if any)

3. Verify the new styles appear in your Figma file's Styles panel

GIF | Import CSS as Figma Style

---

Importing CSS as Figma Variables

Prerequisites: To import variables with Kolibri Sync, you need an existing Figma variable collection that has at least one mode. If you're importing for light and dark themes, ensure your collection already includes "Light" and "Dark" modes. If these aren't set up, you'll need to create them in Figma beforehand for a smooth import.

1

Open Kolibri Sync and go to the Import tab.

• In this tab, you’ll see the import settings.

2

Select "Variables" as Destination

1. In the Import tab, select "Variables" as the destination

3

Choose an existing variable collection from the dropdown

• If no collection exists, create one first to organize related variables.

4

Select Target Mode(s) within the collection

Remember that modes represent different states or themes (e.g., “Default”, “Light”, “Dark”).

• If your CSS uses single values (no light-dark function)

  1. Select one target mode from the dropdown.

• If your CSS uses two values via the light-dark() function

  1. Click the “+” to add another mode selector

  2. Choose the corresponding Light and Dark modes.

5

Input CSS Variables

1. Paste your CSS variables into the textarea using one of the supported formats:

   • Single mode example:

     :root {
       --primary: #0066CC;
       --secondary: blue;
     }

   • Light/Dark paired example using CSS color-function notation:

     :root {
       --primary: light-dark(#0066CC, blue);
       --secondary: light-dark(blue, #0066CC);
     }

2. Ensure the format matches the supported syntax.

6

Click "Import" Button

1. Click the "Import" button to begin the import process

2. The plugin will parse the CSS and create or update variables in the selected collection and mode(s).

3. For light/dark pairs, values will be mapped to the corresponding Light and Dark modes.

7

Review Results and Notifications

• Check the notification that appear after the import completion

• The notification will show:

  • Number of variables successfully created/updated

  • Number of errors (if any)

  • Number of skipped items (e.g., gradients when importing as variables)

• Verify the new variable appear in your choosen collection