A3 – User Test Results: Participant P2

Context

• Role: CS student; part-time backend developer

• Prior Experience: Figma moderate, CSS advanced

• Environment: Laptop, Figma Desktop app

• Session Setup: Same protocol as P1

• Date: 29.08.2025

---

Ratings: Tasks across three features: Create, Import, Export. Ratings reflect perceived understanding on a 0–5 scale.

• 0 = No understanding; unable to proceed

• 1 = Very limited; requires continuous guidance

• 2 = Partial; significant confusion; completes only with help

• 3 = Moderate; completes with some hints

• 4 = Good; minor confusion; completes mostly independently

• 5 = Complete; independent and confident

---

Section Create

Result of Create a Color Palette (UTTC001)

Task	Understanding (0–5)	Notes
Choose a base color	4	Wants a Figma-like Color Picker. Missing opacity and RGBA/HSLA selection in our picker. Labels feel duplicated; unclear what is editable. UI not intuitive.
Adjust Lighten/Darken color	3	Effect unclear; suggested renaming.
Name base color	1	Did not realize it was editable without being told; layout/UI could better signal editability.
Choose number of variants	5
Preview clarity	2	Played with the Color Picker to create different colors rather than variants of one palette. Expected standard palettes (e.g., grayscale). Would keep experimenting here.
Edit Dark Mode preview	2	Lightness and saturation meanings/effects unclear.
Understanding of result	4	Liked components. Did not realize a variant color equals two stacked rectangles. Wants variables linked directly to components. Wishes for a Material Theme–like testing tool. Engineering of a color variant not clear at first glance. Overwriting existing collection is good, but add a warning. Wants to choose target location for palette generation. Notes: repeatedly closed/reopened plugin; state reset each time (frustrating).

Section Import

Result of Import CSS Variables as Figma Styles (UTTI001)

Task	Understanding (0–5)	Notes
Choose destination: Styles	5	Suggest ordering with Variables first (higher priority).
Import	4
Understanding of result via CSS	4

Result of Import CSS Variables as Figma Variables (UTTI002 & UTTI003)

Task	Understanding (0–5)	Notes
Choose destination: Variables	4
Select input format: CSS	5
Choose target collection	3	Would like to create a new collection inline, useful on first run/new project.
Choose single target mode	1	Should be autofilled; unclear why manual.
Choose target mode (light, dark)	3	Confused by required selection; suggests auto-selecting first and second detected modes.
Import	5	Grouping mirrors CSS syntax, makes sense.
Understanding of result via CSS	5

Section Export

Result of Export Local Styles as CSS (UTTE001)

Task	Understanding (0–5)	Notes
Choose source: Styles	5
Choose output color format	5
Export	5
Understanding of result	5

Result of Export Figma Variables as CSS (UTTE002, UTTE003)

Task	Understanding (0–5)	Notes
Choose source: Variables	5
Choose output color format	5
Choose target collection	5
Choose single target mode	5
Choose target mode (light, dark)	4
Export	5
Understanding of result via Variables	5	Clear; noted scrollbar bug.

Result of Export Color Palette as CSS (UTTE004)

Task	Understanding (0–5)	Notes
Choose source: Figma	5	Recognized link between Create palette and exporting variables.
Choose output color format	5
Select Figma Color Palette	5	Wants granular selection of groups to export (because it’s a palette). Labels vs. selection caused some confusion about outcomes.
Export	5
Understanding of result	5	Understood color-mix; recognized link between Create and Export.