Design Tokens: How to adopt Design Tokens from 0 to 1
Design tokens are shared languages between Designers and Developers to keep their works connected and consistent.
What’s your collaboration with Designers/Developers look like?
👩🏻🎨
As a designer, I create UI styles in Figma. Once I decided to update a colour value from one to another, I can only change the value in Figma. After I have done the update, I will go to Slack and report this change to my Develop Team and announce these changes in Figma.
🧑🏻💻
As a Developer, I create UI styles in coding files. Once designers create UI styles, I just inspect the CSS codes in Figma and hardcode the styles in my coding files. I assume UI styles won’t change often as it is chaotic to find a small line about radius . When the designer update a colour value they tell me in Slack, I will go to Figma → find the changes → open VS code → fiiiiinnnnnd the colour codes→ update → push to Github → create pull request …
Working in this way, designers and developers were not connected. Therefore, both sides spent a lot of time on getting news → finding sources of truth → keeping UI styles in sync.
Guys, we can make it very easy and efficient
— How?
Depending on the situation of your team, you may find a level of strategy is more useful for your team.
Level 1: keeping Design and Implementation connected using Design Tokens
The Marvellous Design Token
Your parents want to show you and your siblings are from the same family but with unique names. They gave all of you different first names with the same family name.
By adopting Design Token, we connect the UI styles in Figma and the UI styles in code files by using the same tokens (names/languages), because they are the same person. They just need to travel from Figma to VS code from time to time.
Let’s take a closer look at what is Design Token
Design token is used for Designers to control the Styles, i.e. colours, radius, typefaces, spacings etc.
Developers use tokens as the names of style variables.
Finally, the implementation of applications shows the UI styles.
For example, a Button as a component is made up of an icon and text, both the elements inside one Button have attributes: colours, size, and typeface.
When we use Design tokens:
Tokens store the values of colours and typeface of the elements inside the button, they can be reused in Figma as well as CSS code (or other code files).
You may think Design tokens are just names?
You are right, but you are also wrong.
In Figma, they are UI styles.
In code files, they are variables.
You can reuse the UI styles in some other places.
For instance, a component’s surface colour is #FFD953 , you can reuse {token.sys.color.teriary } to keep colours connected and in sync.
e.g. Design token: token.sys.color.teriary
Read more about Design tokens in Material UI
level 2: Designer push UI updates to Github directly from Figma
It really happens…
But, you should make sure that you have already implemented the #Level 1 in your team.
And, the UI languages are collectively created by Designers & Developers from the start or NOW!
Then, you can uplift your team to the next level. I.e., this level :)
The workflow you want to have
Basically, Designers update UI styles in Figma (that means, Figma is the source of truth).
Then, they push the updates to their branches on Github. They can make this magic thing happen in Figma by using the Figma Tokens plugin or Figma REST API.
Finally, the Designer creates a pull request and waits for Develop team to validate the changes and adopt the updates in code files.
The checking flow really depends on your team’s working fashions.
How does it look like?
#Step 1 → update Local Styles
#Step 2 → Push to Github
#Step 3 → Create a pull request
Then, you can create the request on your Github :)
Values to adopt the Design Tokens
- Boost teamwork efficiency
- Improve outcome quality
- Work harmoniously
- Maintain consistency
- Build seamless connection between the Design Team and Development team
Read more about how to use Figma Tokens from:
#Jan Six presentation in 2022FigmaConfig
# Design tokens in Figma by Jan Six:
