Some results from core token experiments in Figma

[vnys]

I’ve looked into how to structure and name colour variables in Figma. To be able to re-use core tokens across multiple files, I propose publishing them from a separate file. Using variables from another file works similarly to styles, in that the name of the file becomes a “header” in the UI. That means that we can omit certain segments from the variable name to reduce complexity, since long variable names will be truncated.

Alternative 1

Using collection for namespace and group for tier.

The following example illustrates this:

Here I have a collection called EDS (since there’s no support for name spacing). The group is called Core. (The word “color” is already omitted since that’s obvious.) But that information is already in the header, for a designer it’s more usable to have only the colour names visible and reduce nesting levels.

Aliasing also becomes unreadable because the variable name gets truncated:

Alternative 2

Using collection for type and omitting token tier since it’s in the file name.

A better approach then is to keep things as easy as possible (but not easier). In this example the set is called Color, and then there’s just one level with colour names and values.

Using a core colour in another file would then look like this:

This looks much cleaner, at least when picking the colour. Some semantics gets lost though, if a product designer mixes EDS colours and their own colours, how would they know which were local and which were from a library? 🤔

When it comes to core colours that might not be a big problem, since we don’t necessarily want to give everyone access to those – but it needs to be solved in the semantic level.

One way to solve that could be to prefix every colour with EDS. That would again lead to superfluous information on one level, but in a table of variables it would be easy to see which colours are from the EDS and which colours are not.

Casing

Variables are normally written without capital letters and spaces. However, it looks better in Figma, so I suggest we just deal with that in code.