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.
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.
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.]
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.
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.
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
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
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.
Source: specifyapp.com
Supernova is a platform that links design and coding while also enabling you to concurrently create documentation for your design system. As a result, it serves as the design system's single source of truth.
Getting started on the platform requires that you link your Figma file there. You will then be able to push modifications to the code after that point.
The potential of design tokens as a design-to-code tool does not stop here. In collaboration with SCB TechX, Richard suggested that the concept of design tokens could also be adapted for text copy in design pieces.
The message and tone of voice are important parts of the user experience but are often left out of the design system. With the correct wording, we can create meaningful interactions, point users in the right direction, make materials simple to digest, and lower human error rates. Accordingly, good text copy is an essential tool for helping users to achieve their goals.
That’s the story of how copy tokens were invented. The copy tokens hold a value for components in a text copy instead of a design foundation. Like design tokens for a design foundation, we may construct copy tokens by adopting a naming standard for content.
The development of copy tokens can be particularly useful for changing or adding new languages to a design. In addition, it can eliminate guesswork and serve as a single content source.
Copy tokens can even consist of an entire copy library, a single place for all text components to be used from design to production. For example, language localization can be controlled and attached directly from all the text files inside the copy library.
By using a copy library system for components, it will be easier to change a microcopy in a quick and easy manner. Designers may be able to maintain tone-of-voice consistency, streamline developer handoff, and update all instances simultaneously.
Design tokens are quickly evolving to become the new standard for design systems in the near future. Integrating design tokens into your design tools can improve maintenance, reliability, organization, and scalability in your design system. On top of that, the transition from the design process into front-end development can be achieved easier and faster.
Moreover, the introduction of copy tokens is going to be an important addition to the design system, especially for the localization process. Going forward, when design tokens become widely adopted, the development of digital product design will be unified in one place for all stakeholders.
Jeremie Tisseau
Chief Design Officer
As a thought leader in UX design in Thailand with over 17 years of experience, Jeremie turned a small web design agency into one of the leading UX design consultancies in Thailand, offering diverse services including product design, design thinking, user research, UX/UI design, conversion optimization, SEO, and copywriting for a wide range of international and local clients, including Mastercard, Agoda, Prudential, BCG, Bitkub, Luma, Central Group, JP Morgan, SCB, KerryExpress, FoodPanda, Ascend, and many more.