Figma Variables — some yay and nay

Published in

Bootcamp

4 min readSep 11, 2023

Figma launched their Variables at Config this year and I have now played a bit around with them. I have mainly focused on using them as 1:1 to design tokens. So nothing about making better prototypes.

At my work we build and maintain a design systems for two major brands with +20 sub-skins. So this perspective on variables will be on how the help me maintain a multi-brand design system(yay). And where I am stilling missing some features or refinements (nay).

Lets start with the yay

Multi-branded component library

We have taken a good step in the right direction for enabling multi-branded component libraries with colors and numbers. When typography is there — then it will be super!

Branded Asset Panel

When a mode is applied to a page it allows the user to see the component library in the selected mode. This is very usefull for people working on sub-brand not havving to guess how the component might looked when pulled onto the canvas.

Breakpoint behaviours

It is really nice that we can have simpler components doing more complex behaviours. Example on desktop our buttons hug and on mobile they fill.

Scoping

By scoping (filtering) my background colors to only be showed as an option for fill I can help guide me users to use the current variables when assigning colors and numbers in their components and layouts.

Code Syntax

The custom code syntax allows me to serve my designers in figma easy to read names — while providing the correct css-variables in the developer mode for our developers

and now for some nay

Typography Variables

Until we get Typography tokens — then it is not truly multi-branded components.

Different Auto Modes

I wrote back april about 8 features I wanted for figma and I got about 5.5 of them. But what I called Library level targeting wasn’t one of them. In the new Figma Variables Vocabulary it would be - “having different (auto) modes depending on the team or workspace”. Right now I have to serve the same brand as default to all instead of enabling different brands as default depending on the team or workspace.

Better Labels

The current labels is arranged alphabetically after modes instead by collection making them harder to scan. And variable collections toggle on a page default is not shown.

Better variable management

When creating a new variable you need to fill out the value for each mode. IN our case partners (+20). It would be beneficial to be able to apply a value to all values or simply be blank and inherit from a parent mode unless they have a value that overrides the token.