{"id":89981,"date":"2023-10-23T20:42:51","date_gmt":"2023-10-23T17:42:51","guid":{"rendered":"https:\/\/www.orfium.com\/?p=89981"},"modified":"2023-10-25T16:09:05","modified_gmt":"2023-10-25T13:09:05","slug":"how-we-implemented-design-tokens","status":"publish","type":"post","link":"https:\/\/www.orfium.com\/design\/how-we-implemented-design-tokens\/","title":{"rendered":"How our team adopted Design Tokens (And how your team can do it too)"},"content":{"rendered":"\n

As of the writing of this article, the<\/em> W3C Design Tokens Standard<\/em><\/a> is still in development. Its goal is to establish a universal framework for using tokens that will be compatible with any tool or platform. This has the potential to be a game-changer and is worth keeping an eye on.<\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n

If you want to integrate design tokens into your design system<\/strong> but don\u2019t quite know where to begin, you’re not alone. Adding design tokens to an existing system calls for good organization and consistent use. This already challenging task is not made any easier by the lack of standard naming conventions.<\/p>\n\n\n\n

In this article, we’ll delve into how our team integrated design tokens into our design system, Ictinus. We’ll discuss the challenges we encountered, the solutions we came up with, and the impact design tokens had on our workflow. Finally, we’ll share insights gained from our experience.<\/p>\n\n\n\n

<\/div>\n\n\n\n

What are design tokens?<\/strong><\/h2>\n\n\n\n

A design token is a piece of data that encapsulates a single design decision.<\/strong><\/p>\n\n\n\n

The term \u2018design token\u2019 was first coined by Jina Anne<\/a> at Salesforce in 2014. They can represent a wide range of properties and link (‘alias’) to other tokens, making them scalable by nature.<\/p>\n\n\n\n

Sound familiar? It\u2019s similar to how programming variables work: you declare a specific value which is then propagated to many different instances. These values and relationships can be represented in JSON format.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"
Color tokens from<\/sup> Lightning<\/sup><\/a>, the Salesforce design system, encapsulate individual design decisions. In this example, each color token represents a single color code.<\/sup><\/figcaption><\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

What are the benefits of design tokens?<\/strong><\/h2>\n\n\n\n

In our preliminary research, we analyzed the approach of other Design Systems (e.g. Polaris, Carbon, etc.) and read up on token literature and best practices. Our early findings were enough to convince our team: tokens were worth the time, cost and effort of integration. Our biggest challenges at the time were gaps in communication and insufficient change tracking. Tokens promised to help with these issues as well as do the following:<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Resolve gaps in communication<\/strong><\/h3>\n\n\n\n

Design decisions often got ‘lost in translation’ due to inadequate documentation and time pressure. Discrepancies between design and implementation were not just common but expected<\/em>. This translated to much more time and effort spent in QA \u2013 and still, mistakes could slip through.<\/p>\n\n\n\n

2. Fix issues with change tracking<\/strong><\/h3>\n\n\n\n

This gap in communication had a ripple effect. Changes in design documentation were not always reflected in current implementation. That made it hard to confirm whether a specific section of documentation was updated or not. When should we implement QA?<\/p>\n\n\n\n

As a result, we had to freeze our design system to a specific version (V4); a last resort solution that opened a whole new can of worms. Last but not least, our current workflow all but ensured that the team ran at different speeds.<\/p>\n\n\n\n

The more we learned about tokens, the more they seemed like a winning bet. They would help us resolve some of our biggest issues, become more efficient and enrich our design language.<\/p>\n\n\n\n

<\/p>\n\n\n\n

3. Improve efficiency<\/strong><\/strong><\/h3>\n\n\n\n

Before Figma (our tool of choice) introduced variables, there was no way to natively link styles. Design tokens would allow us to mass-update multiple styles by editing a single aliased token. This would simplify maintenance and reduce cognitive load, allowing the team to focus on the bigger picture instead.<\/p>\n\n\n\n

4. Extensive customization support<\/strong><\/h3>\n\n\n\n

Design tokens can represent a wide range of properties beyond the usual color, typography, and layer effect styles. Tokens also support the following:<\/p>\n\n\n\n