Technologies in this project
This project has been perhaps one of the most important for me. I worked with a designer, Sam Manzano, and I really enjoyed working with him. KUDOS Sam if you are reading this!
The Glue project (the name of the design system) was hard work because in my country, El Salvador, it was the first design system. In the beginning, we were walking in the dark and only had the internet to learn about design systems.
The result was gratifying because now, all Vue components are created within the scope of the design system, and colors, fonts, and sizing come from the design system.
How a token reaches production
Figma is the heart of Glue. A change there travels through six steps before a merchant ever sees it:
- The designer builds the component in Figma and defines its tokens.
- He opens a pull request against the Glue repository.
- CI compiles the new tokens and commits them back.
- I recompile Glue against them and verify nothing broke downstream.
- A new Glue version ships and is installed as a dependency of
glue-components. glue-componentsholds the Vue component library that the dashboards consume.
One definition, four consumers
Glue does not emit a single file. The same tokens come out in four shapes, so a value defined once in Figma is reachable from anywhere in the stack:
- a custom Tailwind plugin
- SCSS
- CSS custom properties, injectable anywhere
- JS exports
That is the part I am proudest of. A designer changes a value in Figma and it lands in Tailwind classes, SCSS, CSS variables and JS imports without anyone copying a hex by hand.