4.6 Results and User Tests
This chapter presents the results of our Figma plugin development and the user testing. Our plugin successfully addresses the synchronization challenges between Figma color systems and CSS, providing a robust solution for designers and developers working with color tokens.
Plugin Results
Our Figma plugin successfully implements three main features that form the foundation of color system synchronization:
Create Section: Generate comprehensive color palettes from a single base color with real-time preview, light/dark mode support, and customizable parameters.
Import Section: Import CSS variables and Figma styles with dual-mode support, collection management, and advanced CSS function handling.
Export Section: Export to multiple formats with source flexibility, mode-aware functionality, and frame selection support.
A complete gallery of the plugin’s user interface, states, and flows is provided in Appendix A10: Figma Exports of the Kolibri Sync Plugin Interfaces.
The UI of the Plugin embraces the color aesthetics from Kolibri web UI toolkit.
Light and Dark Mode Support
A significant achievement of our plugin is the comprehensive light and dark mode support. We utilized our own Figma plugin during development to design the interface in both modes, demonstrating the practical application of our tool.
Resizable Interface
The plugin interface is now resizable, improving usability across screen sizes and workflows. We moved from a fixed view to a scalable layout as features grew and we aligned the UI with Kolibri’s CSS architecture (responsive tokens and layout constraints). This is especially helpful in the Import and Export sections, where the code textarea is intentionally compact by default, stretching the window shows more lines, reduces scrolling, and improves review accuracy. The result is a layout that adapts and preserves readability as it stretches, and maintains consistent spacing and hierarchy. The resize behavior follows the resizable UI recipe from the Create Figma Plugin documentation (Yuan, n.d.) and the official Figma Plugin API.
Publishing of the Figma Plugin
The plugin is fully functional and has been submitted to Figma for marketplace review; we are currently awaiting approval. The branding aligns with the Kolibri framework to reinforce credibility and recognition. We obtained permission to use the Kolibri logo, which will appear in the published version. The plugin icon combines the Kolibri bird with a circular sync arrow motif to communicate “Kolibri Sync” at a glance.
User Testing Results
As described in the Methodology, we conducted exploratory, think‑aloud sessions with three participants: one engineer (Participant A), one UX designer (Participant B), and one full‑stack developer (Participant C). Detailed results for each participant are provided in the Appendix A2, A3, A4, alongside the user tasks.
Table 16. Participant profiles
A
UX Designer
Advanced
Familiar
B
CS student; part‑time backend developer
Moderate
Advanced
C
Computer Science graduate; full‑stack developer
Moderate
Advanced
Create Results
Table 17. UTTC001 | Create a Color Palette
Select base color
4
4
3
3.67
Adjust lightening/darkening
3
3
5
3.67
Name base color
5
1
1
2.33
Choose variant count
5
5
5
5.00
Preview understanding
2
2
2
2.00
Edit dark mode preview
1
2
3
2.00
Result understanding
4
4
4
4.00
Average score was 3.67/5 (normalized 73%; n=3). The lowest-scoring tasks were “Preview understanding” and “Edit dark mode preview” (2.00). The highest-scoring task was “Choose variant count” (5.00).
Import Results
Table 18. UTTI001 | Import CSS Variables as Figma Styles
Choose destination: Styles
2
5
5
4.00
Import
4
4
3
3.67
Understanding of result via CSS
4
4
5
4.33
Average score was 4.00/5 (normalized 80%; n=3). The lowest‑scoring task was “Import” (3.67) and the highest-scoring task was “Understanding of result via CSS” (4.33).
Table 19. UTTI002 | Import CSS Variables as Figma Variables and UTTI003 | Import CSS Variables as Light and Dark Mode Variables
Choose destination: Variables
5
4
5
4.67
Select input format: CSS
5
5
5
5.00
Choose target collection
5
3
5
4.33
Choose single target mode
1
1
3
1.67
Choose target mode (light, dark)
3
3
2
2.67
Import
4
5
5
4.67
Understanding of result via CSS
4
5
5
4.67
Average score was 3.95/5 (normalized 79%; n=3). The lowest-scoring task was “Choose single target mode” (1.67). The highest-scoring task was “Select input format: CSS” (5.00); “Import” and “Understanding of result via CSS” also scored high (4.67).
Export Results
Table 20. UTTE001 | Export Local Styles as CSS
Choose source: Styles
4
5
5
4.67
Choose output color format
5
5
4
4.67
Export
5
5
5
5.00
Understanding of result
5
5
5
5.00
Average score was 4.83/5 (normalized 97%; n=3). The lowest‑scoring items (4.67) were “Choose source: Styles” and “Choose output color format.” The highest-scoring tasks were “Export” and “Understanding of result” (both 5.00).
Table 21. UTTE002 | Export Single-Mode Variables as CSS and UTTE003 | Export Light/Dark Mode Variables as CSS
Choose source: Variables
4
5
5
4.67
Choose output color format
5
5
5
5.00
Choose target collection
4
5
5
4.67
Choose single target mode
5
5
5
5.00
Choose target mode (light, dark)
5
4
5
4.67
Export
5
5
5
5.00
Understanding of result via Variables
3
5
5
4.33
Average score was 4.76/5 (normalized 95%; n=3). The lowest-scoring task was “Understanding of result via Variables” (4.33). The highest-scoring tasks (5.00) included “Choose output color format,” “Choose single target mode,” and “Export.”
Table 22. UTTE004 | Export from the Figma Canva Palette as CSS
Choose source: Figma
4
5
5
4.67
Choose output color format
4
5
5
4.67
Select Color Palette
5
5
5
5.00
Export
5
5
5
5.00
Understanding of result via Variables
3
5
1
3.00
Average score was 4.47/5 (normalized 89%; n=3). The lowest-scoring task was “Understanding of result via Variables” (3.00). The highest-scoring tasks were “Select Color Palette” and “Export” (both 5.00).
Note: An export failure occurred for one participant during the session. We investigated, reproduced the issue, and implemented a fix; the export flow now works reliably. To further improve resilience and user understanding, we are adding clearer, actionable error feedback (what failed, why, and how to resolve or retry) for any future edge cases.
Table 23. Overall results by section
Create
4.00
80%
Import
3.98
80%
Export
4.69
94%
Interpretation
Scores indicate the Export flow is strong (avg 4.69/5; 94% normalized), while Create and Import are acceptable but leave room for improvement (around 4.0/5; 80% normalized). Given the small sample (n=3) and the exploratory nature of the study, these results highlight priorities rather than final judgments.
Last updated