List of Tables

Table 1. General abbreviations used in this thesis

Table 2. Overview of Figma Variable Types

Table 3. Comparison of Figma Variables and Styles

Table 2. Project-Specific Codes used in this thesis

Table 3. Glossary used in this thesis

Table 4. PG001 - Streamline Design-Development Handoff

Table 5. PG002 - Reduce Manual Work and Errors

Table 6. PG003 - Establish an Optimal Source of Truth

Table 7. UCC001 - Rapid Design System Setup

Table 8 UCC002 - Light/Dark Mode Prototyping

Table 9. UCC003 - Color Playground for Rapid Exploration

Table 10. Overview of Kolibri Sync supported CSS syntax

Table 11. UCI001: Moving from CSS-Only to a Figma-Integrated Design System

Table 12. USI002: Bulk Import of Complex CSS Color Functions

Table 13. UCE001 - Design System Handoff to Development

Table 14. UCE002 - Color Concept Update and Theme Refresh

Table 15. UCE003 - Component Library Distribution

Table 16. Participant profiles

Table 17. UTTC001 | Create a Color Palette

Table 18. UTTI001 | Import CSS Variables as Figma Styles

Table 19. UTTI002 | Import CSS Variables as Figma Variables and UTTI003 | Import CSS Variables as Light and Dark Mode Variables

Table 20. UTTE001 | Export Local Styles as CSS

Table 21. UTTE002 | Export Single-Mode Variables as CSS and UTTE003 | Export Light/Dark Mode Variables as CSS

Table 22. UTTE004 | Export from the Figma Canva Palette as CSS

Table 23. Overall results by section