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)
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)
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)
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)
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,)
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)
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.
Last updated