Before Figma Variables
Let’s take a look at some existing ways that we can create variables.
CSS Custom Properties
I am giving 3 examples but there are more formats, and they existed way before design tokens. As you can see above, you can definitely use them to represent design tokens, but SCSS variables, CSS custom properties, or JSON does not equal design tokens. They can do much more!
Text String as a SCSS Variable
Booleans with CSS Custom Properties
JSON Component Schema
"description": "Name of Icon",
Now with Figma Variables
Figma’s video actually does a really good job at justifying the feature’s name, pay attention to the opening 15 seconds even if you don’t watch the whole thing.
Note that the types of variables include
boolean. Sounds familiar? Read the examples above again. Figma Variables is just another way to represent design tokens! Figma Variables do not equal design tokens, or vice versa.
Whether you like the name or not, it is what it is. We designers have much better things to debate about. Let’s move on.