Gosumbe

A Figma plugin for exporting color tokens to JSON, CSS, and PostCSS

Keywords

Color theoryFigma plugin development

Tools used

FigmaTypeScriptMaterialUI

Background

Gosumbe was created as a sort of 'sibling' to Huey. At the time, Turntide was focused on building and maintaining color palettes so that the web applications could be sold as whitelabel solutions for enterprise customers. Building palettes was made easy with Huey, and Turntide's codebase could load color dynamically, but in those early days the color palettes only existed in Figma. We needed a way to export each client's colors to Material UI quickly.

Gosumbe exports Figma color palettes to Material UI code

Process

Plugin development was an entirely new pursuit for me. Thankfully, Figma has a thriving community of both designers and developers, and to that end the documentation for the Figma API is pretty extensive and easily digestible. I was also fairly new to TypeScript when I wrote this, and given that this was a smaller project I felt it the perfect time to glean new insights from statically-typed JavaScript.

Takeaway

Gosumbe was my first foray into developing Figma plugins, and was a great excuse to dive a little deeper into TypeScript. Even though I had no experience with the Figma API, the resources available to developers—most notably the documentation and the Discord channels—helped me get up to speed quickly. I managed to deploy Gosumbe quickly and share it with the design and development teams.