A2 – User Test Results: Participant P1

Context

• Role: UX Designer

• Prior Experience: Advanced Figma, familiar with CSS

• Environment: Laptop, Figma Desktop app

• Session Setup: Intro to the thesis (syncing Figma design systems and CSS). Participant A explored without help first; we only intervened if they asked or were directed to the Help icons.

• Device/Figma: Notebook and the desktop app of figma.

• Date: 28.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	Understood the Color Picker.
Adjust Lighten/Darken color	3	Did not understand what Lightening/Darkening Color changes tried to rename the Lightening/Darkening Color suggested renaming these controls.
Name base color	5
Choose number of variants	5
Preview clarity	2	Tried generating different colors via the Color Picker instead of variants of one palette. Color steps clear; opacities unclear. Info icon looks like a button; should be clickable. Preview text color not accessible. Preview appreciated overall.
Edit Dark Mode preview	1	Unclear what the input does/changes. Suggested replacing the input with a recommended range control.
Understanding of result	4	Liked the created components. Did not realize a variant color represents two stacked rectangles. Wants components directly linked to variables. Suggested a Material Theme, like Code Playground to test and pick colors. Figma notification “created Variable Collection” was too brief and easy to miss.

Section Import

Result of Import CSS Variables as Figma Styles (UTTI001)

Task	Understanding (0–5)	Notes
Choose destination: Styles	2	Destination vs. source format unclear. Checkmarks on the radio buttons suggest multi-select; confusing. Difference between Variables and Styles unclear; when to use which not obvious.
Import	4	Clear that something was imported.
Understanding of result via CSS	4

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

Task	Understanding (0–5)	Notes
Choose destination: Variables	5	Still unclear when to use Styles vs. Variables.
Select input format: CSS	5
Choose target collection	5
Choose single target mode	1	Unsure why a mode must be specified.
Choose target mode (light, dark)	3	Single mode clear. Dual mode also clear, but lacks workflow guidance on when to use dual mode.
Import	4
Understanding of result via CSS	4

Section Export

Result of Export Local Styles as CSS (UTTE001)

Task	Understanding (0–5)	Notes
Choose source: Styles	4	Misses an overview about Styles vs. Collections.
Choose output color format	5
Export	5
Understanding of result	5

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

Task	Understanding (0–5)	Notes
Choose source: Variables	4
Choose output color format	5
Choose target collection	4
Choose single target mode	5
Choose target mode (light, dark)	5
Export	5
Understanding of result via Variables	3	Unable to evaluate the code quality.

Result of Export Color Palette as CSS (UTTE004)

Task	Understanding (0–5)	Notes
Choose source: Figma	4
Choose output color format	4
Select Color Palette	5
Export	5
Understanding of result	3	Recognizes color-mix but not code quality.