LogoLogo
Ctrlk
  • Synchronization of Design and Implementation of Figma Design Systems.
  • Abstract
  • Acknowledgements
  • Table of Contents
  • 1. Introduction
  • 2. Methodology
  • 3. Theoretical Background
    • 3.1 Design System and Design Tokens
    • 3.2 Figma
    • 3.3 Key Concepts of Color
    • 3.4 Working with Color in UI Design
    • 3.5 Colors in CSS
    • 3.6 CSS Custom Properties
    • 3.7 Existing Approaches and Pain Points
  • 4. Solution
    • 4.1 Bridging CSS and Design: Our Solution
    • 4.2 Plugin Architecture
    • 4.3 Creating Color Palettes (CF001)
    • 4.4 Importing CSS into Figma (CF002)
    • 4.5 Exporting from Figma to CSS (CF003 )
    • 4.6 Results and User Tests
  • 5. Discussion
    • 5.1 Discussion of Results
    • 5.2 Outlook
  • 6. Conclusion
  • References
    • Declaration of Authenticity
    • Bibliography
    • Appendix
      • A1 - User Test Tasks
      • A2 – User Test Results: Participant P1
      • A3 – User Test Results: Participant P2
      • A4 – User Test Results: Participant P3
      • A5 - User Tests Summary
      • A6 - Project Description
      • A7 - Step-by-Step Create Process
      • A8 - Step-by-Step Import Process
      • A9 - Step-by-Step Export Process
      • A10 - Figma Exports of the Kolibri Sync Plugin Interfaces
Powered by GitBook
On this page
  1. References

Appendix

A1 - User Test TasksA2 – User Test Results: Participant P1A3 – User Test Results: Participant P2A4 – User Test Results: Participant P3A5 - User Tests SummaryA6 - Project DescriptionA7 - Step-by-Step Create ProcessA8 - Step-by-Step Import ProcessA9 - Step-by-Step Export ProcessA10 - Figma Exports of the Kolibri Sync Plugin Interfaces
PreviousBibliographyNextA1 - User Test Tasks