We designed various tools to maintain streamlined design workflows for multiple clients. While there isn’t an existing a single suite of tools to fully automate our design systems pipeline, we can manage repetitive, error-prone jobs through low-level automation.
Design tokenization: colors are abstracted at a global level to maintain control over brand colors. For organizations with multiple brands, this will allow for easier theme control. Using a HSL color model, base colors can be modified using the ‘Lightness’ attribute.
Contrast heat map: for every theme, we can generate a contrast heat map that shows multiple levels of accessibility or inaccessibility for every pair of colors. We experimented with an ‘a11y’ prop in our code that would automatically choose the appropriate font color based on background color and contrast level, otherwise an error would be thrown.
JSON Export Script: there are many tools for connecting Google Sheets to Figma, but none provide a private key. Instead we built a nested JSON compiler that could compile our latest token directory—often upwards of 100s to 1000s of tokens.
Figma Tokens Plugin: using the Figma Tokens plugin, we are able to maintain our nested token hierarchy and use them directly in Figma. Updates to any token value would be reflected with every new compiled token directory. Additionally, experimenting with Style Dictionary, we are able to transform our tokens into nearly any major platform format. In doing so, the Token Directory becomes the only source-of-truth.
