Figma tokens automatically turned into code: how we kickstarted our design system
Part 1: Down the rabbit hole
This article is the first of a series of two discussing the extraction of design tokens using Figma’s API. Before we dive into the technical side of token extraction and the generation of a versioned library, let’s first discuss why we built this tool and why you might need it too.
At the end of 2019, we were at a crossroads here at iAdvize. The design team was moving from Sketch to Figma to make collaboration easier. As the engineering team, we had built a React component library in JS but were then moving all our apps to TypeScript.
The design team’s example and TypeScript were certainly part of our motivations to change things, but our component library had other issues, both technically and conceptually. Some of its flaws were due to lack of maintenance. Some components were simply broken. We have many teams at iAdvize working on different apps and each has its own concerns. Yet we all used the components library to build our apps upon, without any sort of collaboration or direction. Components had sometimes been built with one single purpose by one team, but had ballooned into something else after another team’s intervention. Components often handled more and more use cases due to a lack of well defined scope. Each need was stacked one above the other making things go crazy.
At this point, teams started dropping the library altogether simply to escape that complexity.
We wanted to take control back. We decided to build a Design System based on an atomic approach. We wanted to be more opinionated, to do more with less. As Runar Bjarnason explains in a Scala talk: “Constraints Liberate, Liberties Constrain”. We wanted to have very constrained and typed components to make composition possible. We also wanted to have basic elements to build more complex ones. We stole the idea of Harry Roberts on ITCSS to shape our system by reach, explicitness and specificity. With that blueprint in mind, the first elements of our Design system needed to be the Tokens. They are the smallest part but have the biggest impact. Since everything is built upon them, changing one makes everything in the apps change. A token is only ever a variable, a key-value pair but it is available everywhere the Design System is. If you want to know more about tokens here is a link for you.
We used a request from the design team to start the move. They wanted to change a color value across all our apps. They had already done it on their end, since Figma provides ways to share a single source of “styles” across files. It makes it very easy to change one value across every single component exploiting it.
We wanted to have the same mechanic on the developers side. In place of the numerous variables we had spread around, we wanted a single source of truth. We even wanted this source of truth to come from the designers in an automated way. We felt like this was the core of their ownership. To do that, we set out to use the Figma API and retrieve those tokens from its files. That’s what we will focus on in the second part.
