Design Tokens and Variables
They both serve as symbolic references to specific values but have different scopes.
A common misunderstanding is that variables and design tokens are the same thing.
Nothing could be more wrong.
It mainly originates from the relationship between the design tokens used in the design tools and the variables (CSS, Sass) used in the front-end.
“Design tokens?
You mean variables, right?
We have got variables 🤓”
What is the difference?
A variable in programming is essentially a denomination or a label assigned to a storage location or memory space. This space is designed to hold a value that can be known or unknown, data, or even an object. The value assigned to this variable can change over time, reflecting the dynamic nature of programming.
On the other hand, a design token is not just a simple association between a name and a value. It represents a design decision, a choice made by designers tht is meant to be applied consistently across various platforms and design tools. This ensures a uniform look and feel throughout the design, regardless of the platform on which it is being used.
What do they have in common?
Interestingly, it is the association of a name with a value that creates a common ground between design tokens and variables.
They both serve as symbolic references to specific values, forging a connection between the name (designed to be easily understood and used by developers) and the value it stands for (which can represent a specific size, color, shading, and more).
This link allows developers to use these names in their code, ensuring consistency across the design and making it easier to maintain and update the design as required.
Variables in Figma
While Figma variables can be used to implement design tokens in your projects, it's important to remember that they are not the same thing.
Design tokens are a broader concept that can be used across your entire design system, while Figma variables…well, they are specific to Figma (and before, there were Sketch variables too!).
Adopting a specific technology always poses risks. What happens when it becomes obsolete? The costs associated with switching to a new tool or technology are certainly high.
Be agnostic
Design tokens must be technologically agnostic.
They should exist outside of any specific design tool, acting as a stand-alone source of truth that can be consumed by any tool or platform.
This ensures consistency across all platforms and prevents the risk of obsolescence associated with tying your design system too closely to a specific tool or technology.
This scheme — created by the Atlassian Design System team — effectively illustrates this concept: each visual foundation is linked with design tokens, which are then distributed and utilized by various tools.
Environment variables (Figma, Code, Production or whatever) are useful as they enable communication between the source of the design tokens and the technology that uses them.
Manage design tokens in a simpler way
Design Tokens Manager is a powerful Notion database that provides a large set of ready-to-use global and semantic tokens. Easily customize each design token using a professional taxonomy.
