Design Tokens: Tools to Improve Designer-Developer Collaboration

Are you often frustrated by the tedious collaboration between design teams and software engineers? In this article, we are going to introduce you to a new approach on how to improve the hand-over between design and engineering by using ‘Design Tokens’, one of the most effective systems built to translate design foundation to code and to improve the design process in a surprisingly easy way.

Current Challenges

The major struggle of designers and developers working together can be a time-consuming process of converting design files into front-end code. Especially when changes are made to the design and developers need to be told about the change. Then a software quality assurance engineer is needed to review the changes once the codes are updated which delays the process and becomes “an endless cycle of changes going back and forth.

However, design tokens, are the ultimate design-to-code tools that can easily translate design pieces into coding languages. It will help store all the styling components and transfer them to other foundations in the project, no matter the usage, context, or even platform. 

“A Design Token is the smallest building block in a design system that unifies the foundation between design and code to ensure consistent and unified product experiences.” - Richard Persson

The concept of design tokens is similar to that of a variable in coding. You put in a value, and the variable carries that value to wherever it is placed. When changes are made to the variable, its value automatically updates everywhere.

In a design system, a designer normally places entities like font styles, font sizes, line heights, border styles, background colors, gradients, box shadows, text colors, etc. into tokens. These entities, which we call "design tokens," store design decisions. They are presented as key-value pairs in file formats such as JSON and SCSS. Later, these files are used as input files, which are then processed and turned into different output files.

To put design tokens into practice, the diagram below reflects what an ideal workflow looks like. A designer first makes a design decision in the design tool he uses (scroll down to see suggested design tools you can use). The tool features a plugin and an API that gives us key/value pairs in SCSS or JSON format. The file made by the design tool will then be sent to a developer with dynamic values. The developer will use these values to build a product that can work with a wide range of devices.

[diagram shows how design tokens work/ ref.]

Design to Code Tools: How Do They Work?

The future of design and development lies in the use of design tokens. Although it is clear that design tokens are necessary, many design teams find it difficult to adopt. It could be a result of designers' and developers' knowledge gaps, business constraints, excessive implementation costs, and other factors.

Moreover, design tools do not 100% support the job yet. They are just tools that help designers outline and draw their ideas. They don't connect the design to the programming. However, a lot of technologies have been developed recently to address these issues.

The following are some tools that will assist you in making a stronger connection between your design and your code:

1. FigmaTokens

Source: figmatokens.com

This is the most innovative solution to support design tokens for Figma. FigmaTokens is a plugin that allows you to manage design tokens in Figma files. This plugin makes it easy to standardize design across a wide range of identities, due to the fact that it can be used for a wide variety of purposes.

2. Design Tokens plugin

This is another simple plugin for Figma that can generate a JSON file or sync to Github. The plugin has several options that let you include or leave out certain tokens, and it is very easy to use. You can either synchronize the plugin with the GitHub repository, or do it manually by delivering the JSON file to the developers so that they can add it to the code.

Source: figma.com

3. Style Dictionary

While managing user experiences, it can be difficult to maintain styles to be consistent and synchronized across numerous development platforms and devices while also keeping team members up to date on these changes. Style Dictionary eliminates obstacles, inaccuracies, and inefficiencies in your workflow by automatically generating style definitions across all platforms from a single source, eliminating inaccuracies and inefficiencies in your workflow. It is a system that allows you to build and change your styles across the entire design with ease. With one command, you can export these rules to all the places you need them, such as to iOS, Android, CSS, JS, HTML, sketch files, style documentation, and more.

Source: style-dictionary-play.dev

4. Specify

You can think of Specify as a library where all the design tokens in the system are kept. This enables developers and designers to access their data and make changes to the code directly from within Specify. The app has a source side and a destination side. The Figma file serves as the source, while the code serves as the destination. 

After Figma is connected to the tool, Specify gets the information from there, for example with Figma styles and other assets such as icons, and then stores it. The next thing to do is for the developer to set up a link between the app and Git. After everything is finished, the designer will be able to update the tokens in Figma and send them to Specify. Once the developers have given their stamp of approval, the designers can push the code changes.