Design Tokens as a Powerful Design System Engine

7 Minutes time to read
Design_Tokens_Ester_Digital

In today’s hyper-competitive market, companies try to enroll as many digital channels to promote their products as possible. And it seems to be quite a rational strategy, but not always. The reason is that the more web platforms a business runs, the more inconsistencies and confusing deviations its customers may face. Luckily for both parties, with the advent of the design system, that issue became less challenging.

But what about the other, internal side of the process, namely design and development? Is the design system enough to achieve a holistic provision of all channels involved? Well, it is not. Employing a design system is half the way since it has its own pitfalls that can become especially visible when the design transfers to the front end or undergoes changes. How to escape that discrepancy? The answer is to employ design system tokens. Therefore, in this article, our user experience company will share with you our knowledge about this phenomenon.

What are design tokens in a design system

You’ve probably heard about non-fungible-tokens (NFT) that are strikingly invading digital space. We won’t bother you much with details ‒ just say that behind all this, there was tokenization, and it also found its way into web design, introducing the concept of design token.

So, what are design tokens? Basically, design tokens are the style values of UI elements, like color, typography, spacing, animation, etc., needed to construct and maintain a design system. They’re used instead of hard-coded values, and they are capable of being converted to any format ‒ be it website, web application, or iOS application. How is that?

Each token is given a name that refers to a certain design decision and the defined value. Let’s say your brand’s primary color is Ultimate Gray #939597 (color of the 2021 year by Pantone). The design token will be primary.color = #939597, where “primary.color” stands for the name, while “#939597” represents its value. And if you break your digital product, you can see the following pattern ‒ feature-interface-component-design token. Here, the most important thing is that design tokens are dynamic, not static values. Then, if you want to alter your color to Very Peri #6667AB since trends have changed and apply this primary color for different environments together, you can do it simply by changing the value to #6667AB. Thus, it is easily transformed everywhere it’s used, following the scheme in vice versa: design decision-design token-component-interface-feature (on all platforms and frameworks). Looks impressive, yet why shift from hard-coded values to design tokens? 

Design tokens vs. regular variables 

To find an answer to that question, first, you need to realize the difference between the regular variable and the design token. The color property in a regular variable will look like $gray = #939597 (if used in a CSS preprocessor like SaaS). Although it helps structure the design option, it doesn’t say anything about its usage compared to the design token (primary.color = #939597, it’s clear you use gray as the primary color of your applications). It signifies that design system variables don’t bridge the gap between naming and design property usage, while design tokens do. 

Furthermore, design tokens are platform-agnostic, which means they are far more flexible when it comes to the scalability of the design. Instead of storing the value in a CSS file and copying it in every app or website, usually kept in a separate file like JSON, design tokens can be read into any codebase. So, you can use them on your website, your Android, or your iOS app together. 

Don't know how to start your design system?

Ask us

Explore

How design tokens leverage the design process

If not being dramatic, updating a single value is not time-consuming and painful. But when it comes to real large-scale projects that involve dozens of design components, it takes a lot of time to adjust/change the values manually. And what if you accidentally miss some of them as we all make mistakes? That’s why in contrast to these drawbacks of hard-coded values, design system tokens offer many more benefits. And if you still doubt it, look how design tokens can leverage the design process and even more: 

  • Advance flexibility and automation in design

As a rule, every design system includes a series of reusable elements that can be considered flexible since they are changeable and can fit different environments. Yet, design tokens go far beyond and push that flexibility onto a new level. What does it mean? For instance, you need to improve visibility on all your website pages and higher the contrast without entirely changing your color scheme. If you work with design tokens, you need to alter their values, which will be enough for deploying those changes to a whole set of web pages and even assets (website, app, etc.). In other words, when designers update the value in one place, the new change automatically applies to all designs in different places. That flexibility advances automation that can be a strong plus of using design system tokens. 

  • Speed up the hand-off

Since there are fewer efforts and less time required to modify numerous elements, design tokens can significantly speed up the hand-off from design to development. And that can be a deciding factor for most professionals as long as projects take time, and why not save space and dedicate it to creativity rather than sinking in monotonous work. 

  • Simplify the development process

Let’s say a font size needs to be updated. For that, designers should make an adjustment in the design tool and then share it with developers to alter the value in the code. With tokens integrated into the design system, developers can retrieve already updated files and use them in the project. That is because the design tool updates token files according to targeted platforms. And rather than the developers having to look through their codebase everywhere the specific font size is used, they go to the typography tokens and make the updates easier and quicker.

  • Boost consistency

Design tokens are all managed from one place, then distributed to other, different environments at once. Not only does it minimize the risks of accidental errors during manual changes, but it also provides a way to maintain complete control over the values. That for sure drives consistency and ensures holistic design deployment across all platforms.

  • Establish a single source of truth

Design tokens enable the design and development teams to have a single source of truth. It’s a kind of repository of all style choices and changes so that responsible parties can refer to it when needed. That significantly leverages communication between both teams, which results in a more smooth workflow. 

How to manage design tokens

Once you know the ins and outs of design tokens in a design system, it’s time to explore how to use tokens to tip the scales to effectiveness and proficiency. 

  • Decide if they are right for you

Although tokens have numerous benefits, and it may seem they’re essential to your design and development processes, the truth is that it’s vital to decide whether you really need them. Without considering multiple points, employing tokens can bring disparity rather than consistency. So, when to use design tokens:

– you want to update your product’s design with a design system and make it quickly and effectively

– your design system covers more than one product or web platform and app

– you want to streamline any future updates

Tokens may be less helpful when: 

– you don’t have a design system

– your design and development team uses hard-coded values, and that won’t change soon

Considering all these in advance can save you much time and effort in dealing with troubles after the spontaneous decision. And you don’t want to face rough going as well as your design and development team, right? 

  • Perform interface inventory

If you decide to enable tokens, the first thing to do is to deconstruct your product down to the components and categorize them. You should receive a comprehensive collection of the pieces that make up your interface, either large or small, including color, typography, spacing, etc. This practice will allow you to develop tokens properly since you can see every atom of your design, which then will be easily optimized. 

  • Define criteria for developing tokens

Having clarified criteria for style options tokenization is the only way to achieve consistency and promote a smooth transition. For instance, if a style option is used only in one place, there is probably no need to create a token, escaping futile effort. Tokenization is applicable when the options are many and spread all over your product so they can be managed from one place together. Ultimately, it is the purpose of designing tokens ‒ to simplify, not mess up and clutter. 

  • Define naming conventions

The effectiveness of design system tokens comes from clarity between the name and the usage. To ensure that, it’s essential to know how to apply context to options and define naming conventions applicable to the tokens. 

Take Category/Type/Item (CTI) naming conventions that optimize tokens hierarchically for ease of use. CTI allows for more clarified and accurate design decisions deployment. However, to use that way of naming, you need to know that it uses two types of tokens: global tokens that cover all instances of a particular style option and alias tokens, which cover more specific uses of options. 

An example from the above primary.color = #939597 is a global token that covers all uses of that option. You change its value to #6667AB, and it is applied to all instances where that primary color appears, including icons, buttons, or text heading. Whether you want to change certain elements, you need to enable an alias token that would be the following: background.icon.primary.color = #6667AB, where primary.color is the category, background is the type, while icon is an item. And the distinction between global and alias tokens helps achieve responsive and agreeable deployment. 

  • Adhere to JSON format

JSON can be an efficient asset for encoding values so that it will be easier to adjust design options for multiple preprocessors, including SaaS. The format is primarily used for data interchange between a web application and a server, so the token in JSON file is a smart solution for those who want fast yet qualified transmission. Once again, tokens are proposed to streamline, optimize, and speed up ‒ that is why this practice is worth considering.

  • Take responsibility 

What if the team can’t decide upon naming conventions or simply doesn’t know what is right for its design system in general? Here, it’s critical to have someone responsible for token provision. That person will review, evaluate all suggestions and decide whether they are applicable, then curate tokens at all stages of the process. Surely, teams can decide collaboratively, but at the end of the day, we all need an outside perspective to make rational decisions. 

  • Guarantee accessibility

No doubt, the design should be accessible for all users. And design tokens being part of it should be the same. That’s why it’s necessary to test them for accessibility and make audits of your design system on a regular basis. That will help keep your design system and design tokens relevant to meet the latest standards.

Seeking qualified development services?

Contact us

Explore

Examples of design tokens being used in design systems

Creating a tokenized design system is challenging. Yet, there are several successful examples to inspire you and drive your teams to shift to tokenization. 

Salesforce Lightning Design System

Being originators of design system tokens, the Salesforce team uses them in their Lightning Design System. Here, tokens are seen as the visual design atoms and named entities with visual design attributes. Salesforce employs tokens in place of hard-coded values, maintaining the scalability of their design system, and does it quite successfully. 

Spectrum

One of the biggest design system examples is Adobe’s Spectrum. At Adobe, design tokens are represented as visual data. Although Adobe uses design tokens only for basic building blocks of the design, its tokens can guarantee systematically unified and cohesive product experiences.

US Web Design System

Finally, the US Government also realizes the power of tokenization and adapts it to the design. It uses design tokens in its US Web Design System to maximize design efficiency. By establishing a solid base for all visual design decisions, its design system tokens help the US Government look holistic and coherent across all numerous platforms and assets it runs. 

On a final note

Though tokens have been around for only a few years, they have already gained an important role in design systems since tech leaders became heavily picking them up in their performances. Acting as powerful leverage for the design process, tokens also help with development. They are so-called universal and multipurpose tools for bringing design-design and design-development communications to a more prolific level. 

Despite the consistency design tokens bring to the designs, they ensure your design system is scalable and flexible enough to adjust new changes without ruining the previous progress. And we all know that being able to adopt changes effectively is one of the most vital skills either for the design and development and business environments nowadays. 

If you still doubt the power of design tokens or don’t know how to start with them, contact us. We will do our best to help you manage that issue and provide all the information needed to master the theme.

    No problem!

    Enter your email adress below. We’ll shoot you a link.

    Thank you! The link to the article is already in your email inbox.

    Well sometimes it is quite complicated to explain simplicity!

    We let our work speak for itself.

    Explore
    How_To_Create_A_Personal_Website_Ester_Digital

    How to Create a Personal Website

    Without any exaggeration, people look things up on the Internet every single day. Whatever you do, you can find a lot of users interested in your products online, but you’ll need an excellent personal website to become truly successful.  Websites can offer you any type of information, products, or services. If you want to efficiently...

    10_Benefits_of_CRM_System_Ester_Digital

    10 Benefits of CRM System

    In the previous article, we explored the importance of CRM, and today it’s time to unfold its benefits so you can be sure it leverages your performance no matter the business size and industry. CRM, or customer relationship management, is a perfect tool to collect and store all the necessary information, monitor customer communication and...

    CRM_Ester_Digital

    What Is CRM and Why Is It Important for Your Business

    Have you ever had trouble managing all your conversions with clients and leads and not missing a single detail? If so, then you must have pored over mountains of spreadsheets or databases that take a lot of time and require full concentration. Disorganization, in its turn, makes everything even more difficult. Fortunately, there is a...

    Headless_CMS_Ester_Digital

    Top 7 Headless CMS Benefits

    To make their business profitable and popular in today’s world, companies enter the global market. Here, they design their sites, launch numerous applications, attract customers through various social networks, etc. However, the matter of being introduced online is just half a job. It’s also crucial to choose how to present your brand. Accordingly, there are...