New Web Development Tool Pulls Design Tokens From Figma
A new open source tool allows web designers to extract CSS design tokens from Figma for developers to use for code creation. It also can be used to automate updates on design changes.
Handoff is designed to let developers work in their own environments without a Figma developer license. The Figma plug-in was built on Figma’s API and allows designers to export design tokens, which are used to manage design properties and values across design systems.
It functions as a sort of extract, transform and load (ETL) process for design tokens, said Brad Mering, a primary contributor to Handoff and a senior developer at Convertiv, a digital marketing agency that built the beta tool. Convertiv saw a gap between developers and designers, each of whom works in their own toolchain, he said. He compared it to the friction that existed between developers and operations before the evolution of DevOps.
“It feels like the same problem that we had between dev and ops 20 years ago — two different groups of highly paid people working in silos and it’s not reasonable to unsilo them. We can’t make our developers magically designers,” he said. “What we need to do is figure out how to build instrumentation and automation between them.”
The Handoff team felt like most solutions were trying to magically eliminate developers by automating code. There are Figma plug-ins that will convert to either Vue or React, as well as other languages such as HTML and CSS. PxCode converts Figma files to HTML code, React and Vue with its Figma to HTML service. Component Inspector, created by a Figma employee, generates React and Vue for components.
While code creation options might work in small doses, it’s not realistic at the enterprise level for the foreseeable future, he said.
“This stuff is too big, it’s too complex, it moves too fast,” he said. “We need instrumentation. We need smart people being able to manage the thing all the way through the pipe.”
One potential competitor is Specify, but it and other competing options require the development team to use a specific SaaS product, Mering said. Handoff does not require it, allowing developers to work within their own IDEs.
The Building Blocks of Design
To understand how Handoff works, it’s necessary to understand the guiding star of modern design, which is that it should be component-based, Mering explained.
“At enterprise scale, what we don’t want designers or developers doing is building one-off things for one-off projects,” he said. “It creates technical debt. It accumulates brand inconsistency. What we should do is have a library of components. That library of components gets built into a library of block-level and then eventually page-level things.”
Figma supports that with its library and style guides. Handoff provides a way to get those elements out as reproducible, consistent machine code that can then be transformed into whatever the developers need downstream. But the challenge is knowing when a component changes and ensuring it’s all translated correctly.
“What we need to be able to do is extract all this stuff out as code that people can use,” Mering said. “Figma has a really robust API, but there’s no way in Figma’s API to tell the difference between what [are] meaningful design decisions — like, this should be a blue color button — and what’s just human-readable text. What our plugin is designed to do is give semantic meaning to the Figma file.”
Handoff’s Figma Plug-in
Creating the Design Tokens for Developers
Handoff’s interface allows a designer or project manager to annotate the Figma files with metadata that the tool can then extract. It finds all the colors, styles, typography and other elements of the design, then automatically generates base tokens for the design.
It goes a step further and extracts component-level tokens, Mering said. It does this by providing the designer with a way to tell the developer what’s important out of each of the layers.
He demonstrated how Handoff might export the design tokens for a button. A single button might have different states, such as the primary default state and the hover state of the button. On top of that, there might be a light and dark theme for the page, each with its own color. The interface lets designers describe the components and metadata.
“This is every token you would need to describe every button that’s here. So this is the button, the label of the button for the primary font family in the dark disabled theme, every possible variant of the button is described here,” he said. “This is more code than you actually need because there’s a lot of reproducing stuff in here. As a developer, that doesn’t bother me, because I’m only going to use the parts I actually want out of this.”
That annotation can be pulled into the developer’s computer as tokenized metadata.
“What we can do as a developer is go ahead and export all of that annotation as code into my local system,” he said. “This is going to go through and look, and it found both alerts and buttons in that Figma file. I had already preset the Figma file ID so that it knew where to get this stuff from, but it basically pulls all this out as tokenized metadata.”
The tokens are generated into a JSON file.
Figma design tokens in an IDE
From Design Token to Code
Developers can transform that file into CSS variables or SCSS for those working in a Sass (Syntactically Awesome StyleSheets) project. Sass is a preprocessor language for writing stylesheets that extends CSS with features like variables, nesting, mixins, and inheritance.
The output can also be pulled into Bootstrap and Tailwind. Handoff can also transform down to AWS style dictionary, Mering said. The files are compatible with the emerging W3C style dictionary standard as well, he added.
Handoff’s hook pattern allows developers to script custom transformations, converting the raw token data to any format needed, according to its documentation.
“We’ve written a bunch of hooks into the CLI and so you can actually add your own JavaScript code to transform it wherever you want,” Mering said. “In 10 or 15 lines of JavaScript, you could say, this is coming in, I only need a subset of this for my project, but I want the variable names in a different order, and I want it to be exported as a Swift header file or something like that. … It’s relatively easy for you to implement whatever you need as a developer.”
Use in CI/CD Pipeline
It also allows Figma to become the single source of truth for the design, Mering said. The token file could be used in a CI/CD pipeline to run whenever there’s a change in the Figma file, then export artifacts for the different development teams, he explained. That would allow a Swift developer to grab one artifact while the frontend developer grabs a different artifact, but the details remain consistent and up to date.
Additionally, Handoff will generate a static documentation site.
Handoff is available under the MIT license via the Figma Marketplace. Its code can also be tested, improved or deployed from GitHub.
