LogoLogo
search
⌘Ctrlk
LogoLogo
  • hand-waveSynchronization of Design and Implementation of Figma Design Systems.
  • Abstract
  • Acknowledgements
  • Table of Contents
  • 1. Introduction
  • 2. Methodology
  • bridge3. 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
  • puzzle-piece-simple4. 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
  • leanpub5. Discussion
    • 5.1 Discussion of Results
    • 5.2 Outlook
  • 6. Conclusion
  • file-linesReferences
    • 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
gitbookPowered by GitBook
block-quoteOn this pagechevron-down
  1. file-linesReferences

Appendix

A1 - User Test Taskschevron-rightA2 – User Test Results: Participant P1chevron-rightA3 – User Test Results: Participant P2chevron-rightA4 – User Test Results: Participant P3chevron-rightA5 - User Tests Summarychevron-rightA6 - Project Descriptionchevron-rightA7 - Step-by-Step Create Processchevron-rightA8 - Step-by-Step Import Processchevron-rightA9 - Step-by-Step Export Processchevron-rightA10 - Figma Exports of the Kolibri Sync Plugin Interfaceschevron-right
PreviousBibliographychevron-leftNextA1 - User Test Taskschevron-right