List of Figures

Figure 1: Example design token workflow (Figma, n.d.-b)

Figure 2: Interaction between the plugin’s sandboxed main thread and the UI iframe. (Figma, n.d.-h)

Figure 3: Demonstration of variable dependency updates in the plugin.

Figure 4: Collection with Groups and two Modes

Figure 5: Variable setting with description input field

Figure 6: Available types for variables in a collection

Figure 7: Demonstrates how a color style can reference a color vairable

Figure 8: Example of style groups in Figma

Figure 9: A Rectangle filled with a gradient style

Figure 10: Figma Text Styles panel

Figure 11: Figma effect style set with two drop shadows

Figure 12: Layout Grid effect style

Figure 13: Itten’s Color Wheel (CMYKtastic, n.d.)

Figure 14: RGB Color Model (Seif, n.d.)

Figure 15: CMYK Color Model (Schmid-Fehr, 2023).

FIgure 16:Hue distribution in the HSL model (Mateusz, 2020)

FIgure 17: The HSL color model is represented as a cylinder (Jacob, 2010)

FIgure 18: The HSV color model represented as a cylinder (Jacob, 2010)

Figure 19: Color Schemes (Mueller, 2020)

Figure 20: Example illustrating a gray square surrounded by orange adapted from (Stokely, 2018)

Figure 21: Example illustrating the same colored square surrounded by different color value adapted from (Stokely, 2018)

Figure 22: Example illustrating the same colored lines with different background (Stokely, 2018)

Figure 23: Mono Color Palette

Figure 23: Mono Color Palette

Figure 24: Primary Color Palette (Purple)

Figure 25: Secondary Color Palette (Blue)

Figure 26: Success Color Palette (Green)

Figure 27: Error Color Palette (Red)

Figure 28: Complete Color Palette of Kolibri adapted from Kolibri

Figure 29: Color Palette of Named Variants for Special Purposes adapted from Kolibri

Figure 30: Kolibri's Semantic Colors adapted from Kolibri

Figure 31: Visualization of the color space of sRGB and Display P3 (Figma, n.d.-f).

Figure 32: Linear Gradient with three evenly spaced color stops (W3Schools, n.d.-a)

Figure 33: Radial Gradiant with evenly spaced color stops (W3Schools, n.d.-b)

Figure 34: Conic gradient with three colors (W3Schools, n.d.-c)

Figure 35: Step 1 – Arranging base colors in Figma

Figure 36: Color Picker Modal

Figure 37: Style Modal

Figure 38: Variable Modal

Figure 39: Color palette saved as styles

Figure 40: Color palette saved as variables

Figure 41: dist folder

Figure 42: Options available to open the plugin

Figure 43: Kolibri Sync in plugin Test Report

Figure 43: Demonstration of how colors update