Using expression as a variable's value

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.

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

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

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.

Adding expressions when applying variables opens ups charting options as well. Hope figma will add them soon.

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.

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!

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.

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.

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. 🤷

Would be nice to be able to compute % widths and heights for fluid designs… Especially for padding and min/max width computation.

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

Would really like to see this added.

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! 🫶🏻

This is what brought me here. Calculating a value based off the viewport width would be game changing.

+1 for this. I love variables as a feature for many reasons in part because it allows you to see set values in an organized way, and in one-ish place. Feels very hinky to have so much definition/declaration of variables going on only within these small pop-up windows for prototyping. Both tedious and ephemeral compared to being able to set permanent expressions in a database setting.

Having this feature in combination with more available modes, and the ability to change modes conditionally, would be heavenly.

For example, trying to prototype three inter-connected filters menus has been especially frustrating as I need to provide an exhaustive list of if statements covering each combination of filter selection on every menu variation in order to have different options disappear or change with the flexibility of a real menu.

On the other hand, if I was able to create a “mode boolean” whose value was set based on other contingent factors, the only action I would need to define in prototyping on the click of a filter button would be to set that filter to on or off, and the built-in definitions would ensure its effects propagated throughout the environment.

Keeping the conversation alive and confirming I still would like to see this functionality. Today’s case I would like to be able to handle is showing the current year across copyright, publish dates, and last updated text strings. I’d like to set a variable called Year and if I update that in my design system, I want all the dates to show 2024 (where before, it might have been 2023).

Is this still not available ? in 2024

This would be immensely valuable, especially for organizations that want to align their design system between Figma and the codebase.

Still looking for this functionality as I am setting up a type ramp based on rems.