Tokens Studio → Figma variables

[vnys]

I’ve done some tests on creating variables with Tokens Studio¹. This is currently the best way to create variables in Figma and to also be sure that they can be extracted easily. Tokens Studio can not import variables, so it’s a one way street – which means variables shouldn’t be edited in Figma, because they risk getting overwritten.

Here’s what happens during variable creation/syncing:

• Theme groups become collections
  • Themes within a theme group becomes modes (columns in the variables table)
• Dots create groups

Simplicity

We should keep the variable names in Figma as easy to use as possible. I suggest publishing core and semantic variables as separate libraries. Core will probably only be used by the EDS Core Team. We’ll have to look into what happens if we reference core tokens and a designer only imports the semantic tokens. Will they get the actual values, or just a broken reference to a core token?

How do we add the “missing” levels to the tokens in code? Use description?

Multi-dimensionality

Density and color schemes can be combined for multi-dimensional themes. It’s also possible to use modes on layers, so we could look into using variants too as modes which would greatly reduce the complexity when creating variants.

Composition tokens

Composition tokens don’t sync, so they’re out for now.

Dimensions

Dimensions need units in Tokens Studio, but they’re removed when syncing to variables. I suggest using dimensions as the token type for simplicity’s sake whenever possible, since we won’t use tokens from Tokens Studio directly on layers anyway.

Footnotes

1. Have a look at What's New in Tokens Studio 1.37: Figma Variables support for a demo by Jann Six. ↩