Communicating Tokens in Figma for Hand-Off to Developers
How the IBM Security design team used Figma to communicate our design language’s spacing tokens to developers
Figma: It’s a collaborative, web-based tool to design flows, mockups, prototypes, and more. Designers and developers can edit and comment on any part of the design at the same time. It offers a powerful solution to allow cross-functional teams to work jointly on designs, but, in practice, our team was running into some blockers — especially for our developers on the team.
Earlier in the year, the IBM Security team started the process of migrating to Figma. We established design/dev workshops with a team of Figma ambassadors to consult with developers to ensure they can do their best work in Figma. As a member of the IBM Security design team and a front-end developer, I was excited to be one of the ambassadors to tackle this challenge.
Different teams within IBM Security have their own variations of the design/dev process, but I’ll summarize how the process worked on my team. Before Figma, our designers worked mainly in Sketch. Once the design was ready for hand-off to the dev team, screenshots and videos of the designs were uploaded to Github Pages with detailed documentation for each story. Within these visuals, designers often drafted redlines (redlining here refers to annotations within a design).
Our redlines included details of the components used and, importantly, the names of colors and spacing tokens being used.
Tokens are ready-made, determined values of approved colors and spacing sizes that follow IBM’s Carbon Design System. Tokens are also not present in Figma. Herein was the crux of our dilemma.
For color tokens, we quickly set up a Figma library for the colors in our design language. In Figma, spacing between and around elements, etc., are communicated in pixel values.
Through a series of brainstorming meetings, we established the following possibilities:
Option 1: Manual conversion
The simplest solution was for designers to make sure the spacing in their designs used pixel values that correspond to an existing spacing token, and for developers to manually convert the pixel values to the tokens they need.
However, this requires a lot to go right and could be a hassle if something went wrong. Designers needed to always be accurate with the spacing in their designs and constantly refer to the spacing guidelines for every element they create. If they were off by even one pixel somewhere, it could cause confusion down the line with developers not sure which token to use. Developers also needed to constantly refer to IBM guidelines when manually converting pixels into tokens. Overall, this was an unpopular solution.
Option 2: Redlines in Figma
Designers could include redlines in their designs within Figma. This was the favorite solution among our developers according to an informal poll. Developers were already familiar with the concept of redlines. However, designers would need to do a little extra work to create and overlay redlines on their designs in Figma. This is somewhat mitigated, though, because unlike with other solutions, designers would not have as strict of a need to be pixel-perfect with the spacing as long as the token name is communicated.
Option 3: Create a plugin
Finally, we could create a plugin to automatically calculate the name of the token that corresponds to a given space.
This was where our team had to conduct further research. Third-party libraries were already available (such as this Figma Tokens plugin), but establishing that they were safe and compliant with IBM standards would be a lengthy process. A better solution would be to create our own lightweight, minimal plugin tailored to our needs.
Plugins in Figma can be limited. Ideally, we wanted the names of spacing tokens to appear in the sidebar or design itself, but we discovered that plugins must be run in their own window and cannot alter the design view or sidebar data. A few of our developers quickly created a private plugin for our team that converts pixels to Carbon tokens. It requires the user to first select two elements then run the plugin to receive the names of the tokens in a separate window. Not ideal for developers, as it doesn’t allow an at-a-glance view of the token names and instead forces them to go through a separate window. If the design was off by a pixel or so, the plugin can recommend the closest option, but that may not be enough to mitigate confusion. Also, all our developers would need Figma edit access to access plugins.
Our working solution?
We explored our options and eventually decided on the standard of using redlines within Figma. A redlining library was created for designers to drag and drop the appropriate spacing redline into their designs for hand-off to developers. The plugin we created is still available, in beta, for teams that prefer to go that route as well.
Design challenges will always be present in any sort of big-scale migration, and our brainstorming and research led us down different paths until we arrived at our current solution. Hopefully our tale of trial and error can help other teams wanting to communicate spacing tokens in Figma for hand-off to their developers.
Lily Peng is a front-end developer at IBM based in New York City. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
