Chapter 4
Design Tokens
Design Tokens
Design
Tokens
LET'S START SIMPLE
LET'S START SIMPLE
LET'S START SIMPLE
Design tokens, what?
Design tokens, what?
Design tokens, what?
Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”
Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”
Imagine you own a cat. Your cat’s name is “Lola.” But you also call her “Lolita,” “Loly,” and “Cutie.”
original name
original
name
the same cat
the same
cat
button-primary-background-color
button-primary-bg-color
original name
original
name
Think of design tokens like nicknames for your design elements.
Instead of using hard codes like color hex codes or pixel sizes, we give them names. These names, or 'tokens', store design details in a simple, easy-to-read way. They work with all style files in your system, making your design consistent and easy to scale.
These tokens can be linked to create a theme. This makes it easy to grow your design and keep it consistent across all platforms, like Web, iOS, and Android.
The idea of design tokens started with Salesforce’s Design System in 2014. Now, they're the smallest but most important part of any design system. They're like the building blocks of your design language, making sure your brand looks the same across all platforms.
In short, design tokens are the backbone of your design system. They keep your brand's visual style consistent and easy to manage.
Think of design tokens like nicknames for your design elements.
Instead of using hard codes like color hex codes or pixel sizes, we give them names. These names, or 'tokens', store design details in a simple, easy-to-read way. They work with all style files in your system, making your design consistent and easy to scale.
These tokens can be linked to create a theme. This makes it easy to grow your design and keep it consistent across all platforms, like Web, iOS, and Android.
The idea of design tokens started with Salesforce’s Design System in 2014. Now, they're the smallest but most important part of any design system. They're like the building blocks of your design language, making sure your brand looks the same across all platforms.
In short, design tokens are the backbone of your design system. They keep your brand's visual style consistent and easy to manage.
SAVE TIME, HAVE MORE CONTROL
SAVE TIME, HAVE MORE CONTROL
SAVE TIME, HAVE MORE CONTROL
Benefits
Benefits
Benefits
With design tokens, we achieve:
With design tokens, we achieve:
With design tokens, we achieve:
Use of the same language.
Improved communication between teams.
Synced files.
One source of truth, consistency on all platforms.
Solid foundations.
Steady design system brings value.
Easy maintenance.
Edit in one place, update all at once.
Less design and technical debt.
Fewer resources are spent.
Brand consistency
Creating new products, maintaining uniformity, and managing a brand are becoming more accessible, faster, and cheaper with a transparent visual hierarchy system.
It becomes more accessible, faster, and cheaper with a transparent visual hierarchy system.
ONE STANDARD, UNLIMITED APPS
ONE STANDARD, UNLIMITED APPS
ONE STANDARD, UNLIMITED APPS
Standard, where are you?
Standard, where are you?
Standard, where are you?
No matter what, we need a standard if we want to adopt design tokens in multiple apps.
No matter what, we need a standard if we want to adopt design tokens in multiple apps.
No matter what, we need a standard if we want to adopt design tokens in multiple apps.
The good news is that W3C Design Tokens Standard is coming up! Soon-ish.
When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. Exciting times. 😅
If you want to learn more about the standard, you can visit the Official Design Tokens Community Group.
The good news is that W3C Design Tokens Standard is coming up! Soon-ish.
When the standard is published, it will allow other tools to communicate in the same “language.” Imagine taking colors from the Figma Tokens plugin and plugging them into Adobe Illustrator or Pitch. Exciting times. 😅
If you want to learn more about the standard, you can visit the Official Design Tokens Community Group.
ONE STANDARD, UNLIMITED APPS
ONE STANDARD, UNLIMITED APPS
ONE STANDARD, UNLIMITED APPS
Design Token Types
Design Token Types
Design Token Types
These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.
These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.
These categories are now your guidance for naming. However, you can use a different logic, as long as others will understand it too.
"Global tokens" or "Core tokens"
are the primitive values.
Alias tokens
relates to specific context.
Component-specific tokens
relates to a component.
button-cta-background-color
MAKE IT consistent
MAKE IT consistent
MAKE IT consistent
Naming Conventions
Naming Conventions
Naming Conventions
Naming takes time. Usually, teams spend a lot of brain power finding the perfect logic. You can find inspiration in other open design systems, but that doesn’t mean it will work for you. I recommend a workshop to find the most optimal structure for your use case.
Naming takes time. Usually, teams spend a lot of brain power finding the perfect logic. You can find inspiration in other open design systems, but that doesn’t mean it will work for you. I recommend a workshop to find the most optimal structure for your use case.
Names should be:
short
meaningful
easy-to understand
modular
consistent
Let's go through some basic examples for naming colors, typography, and levels.
Let's go through some basic examples for naming colors, typography, and levels.
Colors
Some teams love names like mystery blue, fresh pink, and sunshine yellow, but this only works when you have a limited set of colors. It is memorable and easily understood by non-designers, but it is tough to memorize 50+ crazy names.
The solution is to use abstract names based on tonal values and then combine them with semantic, component-specific tokens (remember the cat above 😅).
Some teams love names like mystery blue, fresh pink, and sunshine yellow, but this only works when you have a limited set of colors. It is memorable and easily understood by non-designers, but it is tough to memorize 50+ crazy names.
The solution is to use abstract names based on tonal values and then combine them with semantic, component-specific tokens (remember the cat above 😅).
Global names, no context
Naming colors with values from 1-100 (or 1-9). Every tone value between 0 and 100 expresses the amount of light present in color. The 100 tone is always 100% white, the lightest tone in the range; the 0 tone is 100% black, the darkest tone in the range.
Naming colors with values from 1-100 (or 1-9). Every tone value between 0 and 100 expresses the amount of light present in color. The 100 tone is always 100% white, the lightest tone in the range; the 0 tone is 100% black, the darkest tone in the range.
Example
blue-400
blue-500
blue-600
Strive for a simple, minimal palette.
Please remember that this doesn’t mean
you should add all the colors in the world. 😅
Strive for a simple, minimal palette.
Please remember that this doesn’t mean you should add all the colors in the world.
Alias names, some context
Here we are using a combination of descriptive (specific) tokens with a purpose (color name –color-blue-400).
These two examples can serve as connectors and are a reference to the colors above.
Here we are using a combination of descriptive (specific) tokens with a purpose (color name –color-blue-400).
These two examples can serve as connectors and are a reference to the colors above.
Names should be:
primaryBgColor:
primaryBgColor:
--color-blue-400
--color-blue-400
primaryTextColor:
primaryTextColor:
$white
$white
Component-specific names
$color-link:
#ffffff
Or with alias tokens:
colors.button.primary
blue-400
colors.card.background
white
You can use alias tokens and create different themes if you have a multi-brand design system. For example:
You can use alias tokens and create different themes if you have a multi-brand design system. For example:
BRAND A
color.card.background
white
BRAND B
color.card.background
grey-400
Sizes
The easiest way for technical or non-technical person is using T-shirt sizes. We all heard about small, medium, large. The default size is always medium.
The easiest way for technical or non-technical person is using T-shirt sizes. We all heard about small, medium, large. The default size is always medium.
xx-small
x-small
small
medium
You can also use numeric scales, for example, 0-1000, 1-10, etc. The easiest way is to follow same pattern and steps between numbers once you decide on multiplayer.
For example: If you use number 1 for 2px, and you want to multiply it by 2, then number 2 should be 4px.
You can also use numeric scales, for example, 0-1000, 1-10, etc.
The easiest way is to follow same pattern and steps between numbers once you decide on multiplayer.
For example: If you use number 1 for 2px, and you want to multiply it by 2, then number 2 should be 4px.
States
Levels
Now that you understand the basics, we can move on to the more sophisticated names. Complex, multi-brand design systems need many levels for naming because they need to include multiple themes.
Now that you understand the basics, we can move on to the more sophisticated names. Complex, multi-brand design systems need many levels for naming because they need to include multiple themes.
2 level naming:
category
concept
$color-action
3-level naming:
category
component
variant
$background-button-primary
4-level naming:
category
component
variant
state
$background-button-primary-hover
If you want to go deep on naming conventions, I recommend you to read the blog post from Nathan Curtis, “Naming Tokens in Design Systems.”
If you want to go deep on naming conventions, I recommend you to read the blog post from Nathan Curtis, “Naming Tokens in Design Systems.”
PS. Nathan is one of the pioneers in the design systems space.
THE BEST OF THE BEST
THE BEST OF THE BEST
THE BEST OF THE BEST
Tools
Tools
Tools
Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool comes with its own set of features, so it's important to understand what each offers and how it can benefit your design process.
Design tokens can be managed and distributed with the help of various tools and technologies. It's crucial to select tools that best fit your team's workflow and the platforms you're designing for. Each tool comes with its own set of features, so it's important to understand what each offers and how it can benefit your design process.
Token Studio
Token Studio
With a simple GUI and powerful features, the Tokens Studio plugin for Figma is one of the easiest to set up. It generates a JSON file so you can manage your tokens outside Figma. However, this is not a hub for documentation; you will have to set it up separately. I will write more about this in the following chapters.
With a simple GUI and powerful features, the Tokens Studio plugin for Figma is one of the easiest to set up. It generates a JSON file so you can manage your tokens outside Figma. However, this is not a hub for documentation; you will have to set it up separately. I will write more about this in the following chapters.
Style Dictionary
Style Dictionary
If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values.
Style Dictionary translates raw JSON data into a platform-specific format. It is available as a CLI through NPM, but can also be used like any normal node module if you want to extend its functionality. It can generate different output formats like variables for the common CSS preprocessors like Sass, Stylus, and Less. But it also generates an XML version for Android or a JSON version for iOS (which you don’t get by using only the Figma Tokens plugin).
For example, you will use Style Dictionary, when you want to translate values from RGB in .css (web) to RGBA in .json (iOS) to 8-digit Hex AARRGGBB as .xml (Android).
If you want to use design tokens across all the platforms, you will need a token transformer to transform design tokens values.
Style Dictionary translates raw JSON data into a platform-specific format. It is available as a CLI through NPM, but can also be used like any normal node module if you want to extend its functionality. It can generate different output formats like variables for the common CSS preprocessors like Sass, Stylus, and Less. But it also generates an XML version for Android or a JSON version for iOS (which you don’t get by using only the Figma Tokens plugin).
For example, you will use Style Dictionary, when you want to translate values from RGB in .css (web) to RGBA in .json (iOS) to 8-digit Hex AARRGGBB as .xml (Android).
Zeroheight
Zeroheight
Zeroheight is one of the most popular apps for creating a central hub for designers, engineers, product and marketing teams.
Zeroheight is one of the most popular apps for creating a central hub for designers, engineers, product and marketing teams.
Backlight.Dev
Backlight.Dev
Backlight empowers front-end teams to build and ship great design systems. A unique, all-in-one design system solution. For developers, loved by designers.
Backlight empowers front-end teams to build and ship great design systems. A unique, all-in-one design system solution. For developers, loved by designers.
Specify
Specify
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
Supernova
Supernova helps you build, mature, and scale your design system with ease. From powerful documentation to efficient design system management, it's the ideal end-to-end platform that grows with your design system.
Supernova helps you build, mature, and scale your design system with ease. From powerful documentation to efficient design system management, it's the ideal end-to-end platform that grows with your design system.
Knapsack
Knapsack
Knapsack unites your design, code, and content in a central source of truth for your entire product team.
Knapsack unites your design, code, and content in a central source of truth for your entire product team.
Visualizing token structure
Visualizing token structure
Visualizing token structure
If you have difficulty understanding the hierarchical structure of your design tokens from .json, you can use this tool to see the connections (even if you are entirely non-technical.)
How to do it?
1 Open jsoncrack.com
2 Copy your .json file to the editor.
3 Voilà, you can see the whole structure.
If you have difficulty understanding the hierarchical structure of your design tokens from .json, you can use this tool to see the connections (even if you are entirely non-technical.)
How to do it?
1 Open jsoncrack.com
2 Copy your .json file to the editor.
3 Voilà, you can see the whole structure.
PS. If you want to get more hints on what you can achieve with the Figma Tokens plugin, you can read the whole article Design Tokens 101 on my blog.
Enjoy the design token magic.
Don’t overcomplicate.
Enjoy the design token magic.
Don’t overcomplicate.