A1 - User Test Tasks

The following tasks were prepared to guide participants through the core functionalities of the Kolibri Sync plugin during user testing. These tasks were used to observe user interaction with the plugin’s features for creating, importing, and exporting design tokens and styles. The tasks were not shared with participants in advance; instead, participants were encouraged to think aloud and share their impressions as they explored the plugin. If a predefined task was missed during the session, we would guide the participant to complete it.

---

1. Create Section

UTTC001 | Create a Color Palette

1. Select a base color.

2. Optionally, adjust the lightening and darkening colors to fine-tune the palette.

3. Rename your base color.

4. Choose the number of color variants to generate.

5. Review the preview and make adjustments if necessary.

6. Click "Create" to generate the palette.

Figure X: Create-Section in light mode

Figure X: Create-Section in dark mode

---

2. Import Section

UTTI001 | Import CSS Variables as Figma Styles

1. Go to the "Import" tab.

2. Set the target to "Styles".

3. Paste the following CSS into the input field:

   --primary-blue: #0066FF;   
   --secondary-green: #33CC33;  

4. Click "Import".

5. Verify that local styles have been created in Figma.

Figure X: Import-Section Style in light mode

Figure X: Import-Section Style in dark mode

UTTI002 | Import CSS Variables as Figma Variables

1. Go to the "Import" tab.

2. Set the target to "Variables".

3. Select a collection.

Importing CSS as variables only works if a collection with a mode already exists.

1. Select a mode.

2. Paste the following CSS into the input field:

--brand-red: #FF0000;   
--brand-blue: #0000FF;  
--primary-color: #FF0000;  
--secondary-color: rgb(0, 255, 0);  
--accent-color: hsl(240deg 100% 50%);  
--mixed-color: color-mix(in srgb, #FF0000, #0000FF 50%);  

1. Click "Import".

2. Verify that variables have been created in the selected collection and mode.

Figure X: Import-Section SingleMode Variable in light mode

Figure X: Import-Section SingleMode Variable in dark mode

UTTI003 | Import CSS Variables as Light and Dark Mode Variables

Importing Light/Dark Mode variables is only available with the Figma Pro version.

1. Go to the "Import" tab.

2. Set the target to "Variables".

3. Select a collection with both Light and Dark modes.

Importing CSS as variables only works if a collection with two modes (light and dark) already exists.

1. Select the light mode.

2. Select the dark mode.

3. Paste the following CSS into the input field:

--text-color: light-dark(#000000, #FFFFFF);   
--bg-color: light-dark(#FFFFFF, #000000);  
--green-100: light-dark(#CCEBCC, #D4E5D4);  
--green-200: light-dark(#99D699, #AACBAA);  
--green-300: light-dark(#009900, #2A7E2A);  
--green-700: light-dark(#0D6E02, #2A5B20);  
--green-900: light-dark(#1A4205, #2B3716);  

1. Click "Import".

2. Verify that variables with different values for Light and Dark modes have been created.

Figure X: Import-Section LightDarkMode Variable in light mode

Figure X: Import-Section LightDarkMode Variable in dark mode

---

3. Export Section

UTTE001 | Export Local Styles as CSS

1. Go to the "Export" tab.

2. Set the source format to "Styles".

3. Choose a color format (HSL, RGB, or HEX).

4. Click "Export".

5. Verify that CSS variables appear in the output field.

6. Copy the output and check that it is valid CSS.

Figure X: Export-Section Style in light mode

Figure X: Export-Section Style in dark mode

UTTE002 | Export Single-Mode Variables as CSS

1. Go to the "Export" tab.

2. Set the source format to "Variables".

3. Choose a color format (HSL, RGB, or HEX).

4. Select a collection.

5. Select a target mode.

6. Click "Export".

7. Verify that CSS variables appear in the output field.

8. Copy the output and check that it is valid CSS.

Figure X: Export-Section SingleMode Variable in light mode

Figure X: Export-Section SingleMode Variable in light mode

UTTE003 | Export Light/Dark Mode Variables as CSS

Exporting Light/Dark Mode variables is only available with the Figma Pro version.

1. Go to the "Export" tab.

2. Set the source format to "Variables".

3. Choose a color format (HSL, RGB, or HEX).

4. Select a collection with both Light and Dark modes.

5. Select Light mode and Dark mode.

6. Click "Export".

7. Verify that CSS variables with light-dark() functions appear in the output.

8. Copy the output and check that it is valid CSS with light-dark() syntax.

Figure X: Export-Section LightDarkMode Variable in light mode

Figure X: Export-Section LightDarkMode Variable in dark mode

UTTE004 | Export from the Figma Canva Palette as CSS

Exporting from the palette (UTTC001) allows you to see how the variants are generated. Here, colors are exported using the color-mix function.

1. Go to the "Export" tab.

2. Set the source format to "Figma".

3. Choose a color format (HSL, RGB, or HEX).

4. Select the Figma Canva Palette created in the Canva section. You can select both modes to export as a light-dark function, or just one mode to export only that mode.

5. Click "Export".

6. Verify that CSS variables appear in the output field.

7. Copy the output and check that it is valid CSS.

Figure X: Export-Section via Figma in light mode

Figure X: Export-Section via Figma in light mode

---