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 b…