I'm going to give a simplified explanation of what I understand.
Tokens = variables
In programming, a variable is a container where you store a value. A design token is simply a variable by another name.
You use tokens to represent a property. For example, if I wanted to attribute a background color to my button I'd create this token:
I'd like to attribute a certain blue value to it:
But instead of doing it directly (because who knows by heart what color is #2680EB? I might also have other colors in my design system) I create a variable describing this color a bit better:
$blue-400 = #2680EB
Then I'd apply this variable to my button:
$button-cta-background-color = $blue-400
This token would be placed in a list, together with other tokens forming the design system.
What does this tokenization accomplish here?
- it describes what attribute is that (the background color of a cta button)
- it's easier to tell what color it is using (blue-400)
- the next time I need to change the color theme of all my cta buttons, it's easier: I only have to change the value once in the token definition. All buttons using that token to define its color would be automatically updated.
- it makes developers lives easier, they also don't have to go hunting all over to find all properties of all elements, it's all organized already.