A9 - Step-by-Step Export Process

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

Exporting Figma Styles as CSS

1

Open Kolibri Sync and go to the Export tab.

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

2

Select "Style" as Source

1. In the Export tab, locate the "Source" section

2. Select the "Styles" radio button

3. The interface will automatically show the variables export section

3

Select Export Format

1. Choose your preferred color format: HEX, RGB or HSL

2. Consider your project requirements when selecting format

4

Click "Export" Button

1. Click the "Export" button to generate the CSS

2. The plugin will process all color styles in the selected collection and mode

5

Copy CSS Output

1. The generated CSS will appear in the output textarea

2. Review the CSS for accuracy and organization

3. Copy the CSS to your clipboard

4. Paste the CSS into your project's stylesheet

Exporting Figma Variables as CSS

1

Open Kolibri Sync and go to the Export tab.

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

2

Select "Variables" as Source

1. In the Export tab, locate the "Source" section

2. Select the "Variables" radio button

3. The interface will automatically show the variables export section

3

Select Export Format

1. Choose your preferred color format: HEX, RGB or HSL

2. Consider your project requirements when selecting format

4

Select a Collection

1. Choose the variable collection you want to export from the dropdown

5

Choose the specific mode within the collection

• For single mode: Select one mode (e.g., "Default", "Light", "Dark")

• For multiple modes: Click on the + button and select both light and dark modes for theme support

6

Click "Export" Button

1. Click the "Export" button to generate the CSS

2. The plugin will process all variables in the selected collection and mode

7

Copy CSS Output

1. The generated CSS will appear in the output textarea

2. Review the CSS for accuracy and organization

3. Copy the CSS to your clipboard

4. Paste the CSS into your project's stylesheet

Exporting in Figma created Color Palette as CSS

1

Open Kolibri Sync and go to the Export tab.

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

2

Select "Figma" as Source

1. In the Export tab, locate the "Source" section

2. Select the "Figma" radio button

3. The interface will automatically show the variables export section

3

Select Export Format

1. Choose your preferred color format: HEX, RGB or HSL

2. Consider your project requirements when selecting format

4

On the Figma Canvas, select the desired color palette for export

• Export options include selecting either the light mode or the dark mode individually.

• Alternatively, both light and dark modes can be exported together.

5

Click "Export" Button

1. Click the "Export" button to generate the CSS

2. The plugin will process all variables in the selected collection and mode

6

Copy CSS Output

1. The generated CSS will appear in the output textarea

2. Review the CSS for accuracy and organization

3. Copy the CSS to your clipboard

4. Paste the CSS into your project's stylesheet