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
Select a base color.
Optionally, adjust the lightening and darkening colors to fine-tune the palette.
Rename your base color.
Choose the number of color variants to generate.
Review the preview and make adjustments if necessary.
Click "Create" to generate the palette.
2. Import Section
UTTI001 | Import CSS Variables as Figma Styles
Go to the "Import" tab.
Set the target to "Styles".
Paste the following CSS into the input field:
--primary-blue: #0066FF; --secondary-green: #33CC33;Click "Import".
Verify that local styles have been created in Figma.
UTTI002 | Import CSS Variables as Figma Variables
Go to the "Import" tab.
Set the target to "Variables".
Select a collection.
Importing CSS as variables only works if a collection with a mode already exists.
Select a mode.
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%); Click "Import".
Verify that variables have been created in the selected collection and mode.
UTTI003 | Import CSS Variables as Light and Dark Mode Variables
Go to the "Import" tab.
Set the target to "Variables".
Select a collection with both Light and Dark modes.
Select the light mode.
Select the dark mode.
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); Click "Import".
Verify that variables with different values for Light and Dark modes have been created.
3. Export Section
UTTE001 | Export Local Styles as CSS
Go to the "Export" tab.
Set the source format to "Styles".
Choose a color format (HSL, RGB, or HEX).
Click "Export".
Verify that CSS variables appear in the output field.
Copy the output and check that it is valid CSS.
UTTE002 | Export Single-Mode Variables as CSS
Go to the "Export" tab.
Set the source format to "Variables".
Choose a color format (HSL, RGB, or HEX).
Select a collection.
Select a target mode.
Click "Export".
Verify that CSS variables appear in the output field.
Copy the output and check that it is valid CSS.
UTTE003 | Export Light/Dark Mode Variables as CSS
Go to the "Export" tab.
Set the source format to "Variables".
Choose a color format (HSL, RGB, or HEX).
Select a collection with both Light and Dark modes.
Select Light mode and Dark mode.
Click "Export".
Verify that CSS variables with
light-dark()functions appear in the output.Copy the output and check that it is valid CSS with
light-dark()syntax.
UTTE004 | Export from the Figma Canva Palette as CSS
Go to the "Export" tab.
Set the source format to "Figma".
Choose a color format (HSL, RGB, or HEX).
Select the Figma Canva Palette created in the Canva section. You can select both modes to export as a
light-darkfunction, or just one mode to export only that mode.Click "Export".
Verify that CSS variables appear in the output field.
Copy the output and check that it is valid CSS.
Last updated