Please add support for math operations for setting variables’ values like we do in Tokens Studio for Figma plugin. This would allow to build presets based on a common base value and therefore easily switch between e.g. standard and dense layouts.
43 Likes
It would be awesome to be able to reference parent size and write an expression to adjust var to a percentage of that.
The use case is to be able to set and adjust bars in a chart according to available space.
2 Likes
This would be super powerful.
Thinking of a shopping list this could allow the calculation of the total price without needing to put this calculation in everything that can can influence the price.
Showing hiding parts based on an amount would also be easier because you could add a boolean variable that uses an expression like amount > 0.
The idea reminds of computed properties in Vue.
These are automatically re-calculated when any of the variables it uses (dependencies) are changed.
Similar suggestion (with less traction): Expression Based Variables
4 Likes
Yes, ran into this need almost right away when exploring Figma variables. A couple of my use cases (not unique to me):
- number variables which are all multiples of a single variable (for example spacing multiples).
- a color variable that references another color variable but is a different opacity
5 Likes
An absolute need. Ran into it. Searched online and landed here as already suggested. Defined a variable “#rounding = 15”. Thank wanted a new one based on the original, so wanted to do “#roundingTaller = #rounder * 1.5”. That’d be really cool, so I’d only edit the base “rounding” value where the need arises.
2 Likes
Adding expressions when applying variables opens ups charting options as well. Hope figma will add them soon.
1 Like
related, but technically a different feature sort off… just being able to perform math operations in the properties panel on variables. So a layer’s border radius could be {borderRadius} * 2.
3 Likes
Yes, ran into this issue with my first experiment to use variables. My use case was around creating string variables that could be a combination of multiple variables and/or additional modifier text. For example, define a variable for an email subject that could be “Re: Hello " + {person_name_variable} + {subject_text_variable}”. I would then reuse the {person_name_variable} in the email message body as well. This would be super helpful!
1 Like
Absolutely agree with this. Another example of uses would be to create consistent typographic scales. If I want to use different scales for different devices, I would rather have to change or add a single variable base_ratio that would propagate through all my headers than manually enter every value with no relation to one another.
4 Likes
please do this figma, i assumed it was possible since you can do this in prototypes, was disappointed to find out it doesn’t work elsewhere
Going to throw my vote in for this as well.
A few use cases that I’ve run into where this would be extremely helpful:
- Using a set multiplier for font size aliases from a design system that have different bases at varying Modes (i.e. Desktop, Tablet, Mobile)
- Using set sizes for an avatar component with varying heights across modes (i.e. Desktop, Tablet, Mobile) and needing to set the height to be half in different scenarios.
- Applying aspect ratio for images based upon fixed widths or heights stored as aliased variables.
1 Like
You can do this now with a plugin, it’s not expressions but node graphs, but the plugin has to be open for it to work. 
3 Likes
Would be nice to be able to compute % widths and heights for fluid designs… Especially for padding and min/max width computation.
4 Likes
Customized prototyping for moderated tests…
I know this can be done with a prototype interaction, but it would be awesome if this could be done within the variable set so I could get the numbers presented right away.
Var number “Value” = 100
Var number “Tax” = 1.2
Var number “Total” = Value * Tax
4 Likes
Would really like to see this added.
1 Like
Design system manager here. I’d like to see this as well.
That would be very useful. Pls make it happen!
This would be sooooo helpful. I hope to see this available soon.
This would be huge…
I mean it would simplify setup in such an extreme way.
Figma, please get this in there, it’s surely a fairly easy one, and it’s been baked in to the regular number input in the app since forever.
Let’s do this! 🫶🏻
1 Like