A4 – User Test Results: Participant P3
Context
Role: Computer Science graduate, full-stack developer
Prior Experience: Figma moderate, CSS advanced
Session Setup: Same protocol as P1
Date: 30.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
3
Tried editing via hex; attempted to change via keyboard in hex display.
Adjust Lighten/Darken color
5
Clear and worked well.
Name base color
1
Did not know how; suggested placing the cursor in the field by default and clearer hint text.
Choose number of variants
5
Preview clarity
2
Liked that preview updates with variants. Asked how to view only light or only dark palette.
Edit Dark Mode preview
3
Lightness/saturation unclear initially; learned by trial. Requested step size 0.1 instead of 0.01 to see an immediate effect.
Understanding of result
4
Understood color-mix. Recommended making the three key colors (base, lighten, darken) explicit above the palette; consider droplet icons instead of squares. Wanted more labels. Wanted control over where the palette is added.
Liked the Layer of the 2 rectangle to show the color-mix.
Section Import
Result of Import CSS Variables as Figma Styles (UTTI001)
Choose destination: Styles
5
did already new the diffrence between styles and figma
Import
3
color-mix didn’t work; wants better error messages, also for light-dark(). Unsure why gradients are included.
Understanding of result via CSS
5
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
Clear that you can only have CSS. Asked whether other formats are also supported, such as JSON
Choose target collection
5
Selected without issues.
Choose single target mode
3
If only one mode exists, auto-select and hide the “+”.
Choose target mode (light, dark)
2
If modes are named “light”/“dark,” auto-select them.
Import
5
Naming convention makes sense. Asked if entire stylesheet import is supported or only CSS snippets.
Understanding of result via CSS
5
Section Export
Result of Export Local Styles as CSS (UTTE001)
Choose source: Styles
5
Clear (similar to Import).
Choose output color format
5
Asked if a favorite color format can be saved in settings so it doesn’t need re-selection each time.
Export
5
Asked if it can be downloaded as file or synchronised with a existing stylesheet
Understanding of result
5
Very clear; var() understood.
Result of Export Variables as CSS (UTTE002, UTTE003,)
Choose source: Variables
5
Choose output color format
5
Choose target collection
5
Choose single target mode
5
Choose target mode (light, dark)
5
Export
5
Understanding of result via Variables
5
Very clear; var() and light-dark() understood.
Result of Export Color Palette as CSS (UTTE004)
Choose source: Figma
5
Choose output color format
5
Select Color Palette
5
Export
5
Understanding of result
1
Did not work with any of the three variants.
Last updated