Skip to content

The Case for Variables

Wow, it is Config 2023 this week, and there are a ton of new features coming from our (not mine) favorite design tool Figma. One of them being Figma Variables. It is a big step forward for Figma and the feature looks very promising, but it generated a little bit of grunts among designers, mainly due to why it wasn’t called Design Tokens. What do you think? Let me lay down some facts for you before you chime in.

Before Figma Variables

Let’s take a look at some existing ways that we can create variables.

SCSS Variables

$token: value;

  $off-white: #f4f4f4;

CSS Custom Properties

--token: value;

  --off-white: #f4f4f4;

JSON

{

    "token": "value",

    "offWhite": "#f4f4f4"

  }

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

$prefix: "superawesome";

Booleans with CSS Custom Properties

--off: 0;

  --on: 1;

JSON Component Schema

{

    "name": {

      "type": "string",

      "description": "Name of Icon",

      "enum": [

        "briefcase",

        "bullseye",

        "calendar",

        "certification",

        "check"

      ]

    }

  }

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 string and 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.

#NamingIsHard

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.