Hi, I’m a front-end developer (mainly - js/ts) and I was tasked to learn how a design realm can be connected with the development realm. How a design system can be build.

The problem I stumbled upon almost immediately was the inability to parameterize designs. Let me explain.

Figma has variables, that’s cool. Now how to instantiate them? I didn’t find a way except for manually typing them in.

Let’s talk about colors.

Imagine you’re given a brand style with 3 base colors plus one reddish for errors. Each has 10 shades so we get 40 variables that we have to enter manually. But they don’t include the state colors, like hovers. So we go and add another set of variables for state layers. How many their number can reach? Material Theme Builder for example generates more than 1000 styles.

• No one can enter all of them manually.


• No one gonna really use all of them.


• It’s pain to pick a style from a list of thousand other styles.


• It makes UI slow.


• You need to regenerate the entire bunch when you want to change colors - to see how it looks, to try another palette etc. Material Theme Builder for example takes minutes to finish with regeneration (and even that doesn’t update styles properly in Material Design 3 Kit components! which is bummer but that’s - another story)

So why generating them in the first place?

Couldn’t we just calculate them all on-demand instead?

Even 10 shades of a color is just a function result. They are all simply algorithms. For example, Material uses some to create the whole palette for you, right? You feed it with only 1 source color and get the rest.

In our example we have only 4 colors at the input and everything else - are just calculated values, there is no point in storing them. We can always calculate a color when and if we need it on-fly.

So Figma goes currently this road of generation instead of calculation.

Do you folks aware if Figma plans to add functions?

P.S. Thinking about generation a step further: is there a point when we really need to generate things? Theoretically - no. Frontend could easily consume functions as well, there is no need to hard-code ever. But practically, design tokens are expected to be constants, so yes, let them be generated. It can be done automatically while exporting our work from Figma.