Design Tokens are the building blocks of any design system. They are variables that store color, typography, and sizing values. Instead of using hard-coded values, tokens are used to promote scalability and adaptability as the design system evolves.
To a developer, a design token might look like this:
To a designer, they might look more like this:
These two examples show exactly how design tokens were organized for developers and designers, respectively, using Carina, Cvent's design system. There is no obvious link between the two systems. Firstly, they were using a completely different naming convention. Second, the colors were organized in completely different ways.
On the very first day of my internship, my manager explained the following problem that I would have to tackle, leading me to dive deep into the world of design tokens and developer-designer communication at Cvent:
Designers were not using tokens, and developers were frustrated that they had to open Sketch files to figure out what colors to use when coding Carina components. On the other hand, designers didn't understand how tokens worked, or why they couldn't just give the RGB color code.
This was becoming more of a problem with the introduction of Carina Ambassadors — non-design system designers who helped contribute components to Carina. They weren't technically on the design systems team, but they were still contributing to it, and it was important for them to be in sync, without having to spend hours learning about tokens.
How might we bridge the gap between designers and developers when it comes to using design tokens?
I conducted user research by interviewing my users: Cvent designers and developers. I met and talked to 2 developers, 2 designers within the design system team, and 2 designers working on other projects.
After learning about their frustrations and confusion with design tokens, I started to explore different methods to integrate tokens into their respective workflows. I started with a brute-force method of adding them straight into the Sketch layer styles, replacing the names like "Blue 45" with "Background > Interactive > Fill > Base", but designers said it would be too disruptive to their workflow.
I also tried the opposite approach. I went to the developers and asked if they could re-architect the token system to fit the design usage. They said it would take way too long to refactor everything.
After setting up several meetings weekly with designers and developers, and drawing inspiration from how non-Carina designers handled the hand-off process, I realized the real problem was that designers were handing off their designs without understanding how the devs would develop them. Furthermore, the designers had a completely different color system from the developers. Developers were using a hierarchical color system based on interaction states, while designers were using a color palette based on color variations.
I found there were two parts to the problem. First, we needed to teach designers about design tokens. Second, we needed to make sure they incorporate it into their design process, and don't just leave it off until the design handoff.
A design system is only effective if people are willing to adopt it. Creating a successful design system isn't just designing components and choosing colors. It also involves the documentation, promotion, and education of the design system. This principle guided my solution, which came after many rounds of iterating on different ideas.
My background as an engineer and my role as a designer put me in a unique position to tackle this problem. Before I joined the team, there wasn't a consistent template for handing off designs. As a result, developers were either building components with a lot of guesswork, or they had to spend time following up with designers. To the developers, it was just a matter of designers not using tokens. However, based on my "user" interviews (other Cvent designers and developers), I learned that the real issue was that there wasn't any clear guideline for handing off designs.
My discovery and design work led to the first handoff template for the Carina Design System and all future designs using Carina components, and a handoff template is as vital to a design system as a button design or icon library. Although the result of my work wasn't a polished wireframe or interface design, it definitely laid the groundwork for better designer-developer collaboration at Cvent.