Welcome back with part 3 of my series of blogs about design systems. In this blog we will talk about tokens in design systems.
What are design tokens?
Design tokens are naming and alignment for small and repeatable elements throughout the design system. These elements include colors, fonts, spacing, sizing, etc. belongs to. As a simple example, tokens in the design replace the colors represented by hex codes with self-explanatory names. (Figure 1)
As can be seen from Figure 1, tokens are written in code-like naming. This, in turn, enables the designer and developer to easily read these tokens and more precisely use the appropriate elements in different places.
But why are these tokens important?
Tokens create a place in design systems that everyone can trust and feel confident in using. That is, developers and designers can easily use it here. In addition, tokens enable system elements to be updated and changed from one point throughout the system. A kind of*. We can think of base components* as a style variant. 🌝
Token types in design
Different types of tokens can be used in different systems. They mainly depend on the designer himself and the areas where the design system will be used. Based on this, tokens are divided into 2 main types:
1 — Global tokens (Choice tokens)
2— Component-specific tokens (Decision tokens)
Global tokens (Choice tokens) — these are tokens designed for general use, and mainly colors, font size, paddings, etc. belong to
Example of global tokens (Figure 2)
Component-specific tokens (Decision tokens) — these tokens are tokens used for specific purposes. For example:
color.button.accent.defaultdefault
Here:
color - the color
button - which component it belongs to,
accent - which color it should be,
default - which state it should be in
The following example (Figure 3) shows the use of Global tokens (neutral-700) and Component-specific tokens:
Use of tokens
If we use tokens, we must use them appropriately for the content. Otherwise, it may cause us problems during future updates or other unforeseen circumstances.
An example ✨
Let's assume that in your team development work is done by outsourced developers, all the work is done in this way. After some time, a decision is made and it is decided to assemble a new development team. In this case, how will new developers use the design system?
Option 1: No design tokens 🥹
In this case, new developers should be trained by old developers, designers should explain the design system to them, and then work on the project should begin. If a design system is used in several projects, this in itself creates an additional problem and workload.
Option 2: We have tokens 🫦
At this time, the tokens (the naming structure) are simply explained to new developers, and developers can easily start their new work.
Finally…
Summarizing the data, design tokens allow design systems to be easily used by the entire team (whether developers or designers), updates are quick and easy, design systems can be easily integrated into multiple projects, etc. is an ideal tool for Of course, not everyone has to use tokens, you can if you talk to your team and come to a mutual agreement. 🏄🏻♀️
Have a nice day and see you in the next blogs 💜
All visuals are made by me and must be credited when used.
And if you've come this far, here's a gift from me to you ❤️🔥 in this music