Include expressions within variable definitions

I would very much like to have the ability to add/subtract/divide/multiply variables (or a given value) to other variables to create new variables.

See the examples below.



This would add so much more flexibility as it would add a level of flexibility to design systems while at the same time maintaining consistency across designs. It also means that you can change just a few “master” variables rather than having to update everything.



While I think this would of course be good, it would be even better to put this kind of functionality at a more useful level: where the interactions themselves happen.

Replacing things with variables is OK, but it would be a lot easier to have logic like this on the object(s) in question. So “OnClick, add [n] to VariableName, and go to Object/LayerName” or “OnHover, if VariableName = [n] then go to ObjectName” or whatever.

Putting logic into the variables themselves seems a bit too hard to manage as you have to keep track of everything using those variables (and there’s nothing in the UI that gives you a list of that either).

I agree… however I am not talking about interactivity at this level, but to set the styles and style variations that will be associated with a particular project. At the moment I am putting together a design system template that I can use right across all of my projects as a starting point and I can now design “the look” of apps and websites by setting variables without even going into the components themselves. This means that things like spacing could be relative to the sizes and proportions of other elements within the design.

1 Like

Oh OK. So a bit like modes but in a more granular/controllable way?

:+1: Precisely. More granular/controllable, but in conjunction with the current mode method now.


Very much agree!!! Would really need this to use variables in an enterprise level project.

1 Like