Improving the handover of design tokens at an S&P 500 company

Can you describe your role at your company?

Sarah

Fortunately, we are the same thing. So we are both UI architects.

Alex

Yep, correct. We kind of have the same role, the main difference is that we work on different parts of our application.

What challenges did you face as a team before using Specify?

Sarah

One of the challenges that we face and obviously any design system faces, is the translation between what the designer's eye is in the tool that they are using, down to the translation layer for the developers.

For example, before using Specify, my application had 39 different shades of grey and we were only using 8. I can't help but imagine the efficiency and cohesion Specify would have brought to the initial team that worked on the application before I joined the team.

Alex

In the ideation process, the design part happens before the development. When we were brought on to build this design system, a lot of the ideation had already started. Designers already knew they wanted to use design tokens and they had expectations of how that would be implemented. But from a development standpoint, you have to get into all of the granular complexities of how to use design tokens. We thought about creating our own solution at first until we saw Specify.

We understood Specify was the connective tissue between high level complex ideation and granular implementation. It is an efficient tool that takes complex design rules and turns them into data structure we can consistently use across multiple applications with different technology stacks.

“Specify is an efficient tool that takes complex design rules and turns them into data structure we can consistently use across multiple applications with different technology stacks.”

How does your team benefit from Specify?

Sarah

The fact that we have this “connective tissue”, as Alex called it, and that having it be so easy, especially with the way that your parsers function is working, the way that you guys are always adding new ones and keeping the current ones up to date, and the additional features that you just roll out so frequently. We don’t have a manual process where if somebody's tired, they misalign and they grab the wrong color and then all the tokens are off. Specify just really removes so much of that risk.

Not to mention that as developers we are so accustomed to just running scripts and running code. Instead of having a huge design system update that would take the designers and developers several hours, if not weeks to go through, we just have to run a CLI command and boom, we have everything already updated.

Just to understand how this process is valuable for us, there’s another partner team that does not have Specify. They have a team of five people that work full time in order to do these translations. We're just so much faster to market, faster to version in comparison to where we would be for any major or even minor changes.

“We're just so much faster to market, faster to version in comparison to where we would be for any major or even minor change.”

Alex

That was exactly what I was going to say next. We just have a tool on a CLI, it's a CLI command that's right into our git repository. It saves a tremendous amount of time and it's a tremendous efficiency in that standpoint.

Also, we use the same Tailwind theme for several applications. It’s also convenient to have a one to one mapping on tokens in Figma and all utility classes in Tailwind. It takes all of the guesswork out around. As a developer, knowing that what you see in Figma is exactly what you can use in VS Code with IntelliSense feels like the holy grail. Having the same language consistently used in Figma and in code brings lots of confidence and that just makes us even faster to market and faster in our development time.

You know the saying: “The two hardest things in software development is cache invalidation and naming things”. Specify helps with the latter so much.

“Having the same language consistently used in Figma and in code brings lots of confidence and that just makes us even faster to market and faster in our development time.”

How would you describe the impact Specify had on your team?

Sarah

Night and day. It has removed so much of the manual effort that we're able to focus more on architecture and business features. Our team uses Tailwind and we built a Specify config to generate tokens for us. Since we are working in a large company, there were other teams looking at us. We then got requests from other teams who were using Sass and Sass mixins. We just improved our initial configuration to support all these other formats in a short amount of time.

Alex

Like Sarah said, Specify allows us to focus our efforts on other parts than figuring out how we can transform our tokens for different platforms. We tried using Tokens Studio with Style Dictionary but in the end we wanted to have something as simple as possible.

Also, another thing we took into account is the licensing aspect of tools. Even if some tools are free we’ll still be wondering how often they are going to be upgraded. And since we are working in a large company, continuity is essential. We wanted something we don’t have to keep track of. So it makes it a lot easier for us that we know we have one solid active, continuously growing solution, in a single tool.

“Instead of having a huge design system update that would take the designers and developers several hours, if not weeks to go through. We just have to run a CLI command and boom, we have everything already updated.”

How do you use Specify

Sarah

We have pretty lengthy four different config files we’ve been improving over time to generate 4 different NPM packages teams can consume. So it makes it very easy for us, regardless of our complexity, to be able to generate what we need, have it versioned, and have it easy to distribute.

Alex

After using Specify we knew design tokens were going to work because they would just be like a supplementary item to our agnostic web components library that we were building. We realized design tokens could be an additional layer in our software development life cycle. We improved our design system by making design tokens a standalone artifact that can be imported into multiple web applications.

What made you choose Specify over other solutions?

Sarah

We had a couple of potential products we could use but again we had to daisy chain them together. Also, there was still going to be a lot of manual efforts to parse trough what they came out with. As opposed to other tools, you guys and your documentation were there to support us.

Alex

We had to time box a lot of this work. So one of the most important thing for us was how easy it is to identify the value we’d get from the tool, how it integrates in our architecture, and how easy it is to explain to our team how it works.

Sarah

Actually, Alex, you hit that spot on to the point of the name of your tool. Specify gives us the ability to specify our needs and be able to have things customized to our specifications. It gives us the freedom to pick, choose and truly specify what our team needs.