Skip to main content
A_Gussenberg
Jul 13, 2023 8:38 AM UTC

Calculation formula within variable input

Hey folks, first of all I love the new variable function. Within the setup of spacings I want to reference my base value (“8”) and do calculations, e.g. (spacing-base)*2". This works fine and the value is calculated properly within the input to add a new variable. But I expected not that the calculation string changes to the absolute value. With this behaviour I loose the connection/ reference to my base value and the calculation is some how obsolete.

Does anybody feel the same?
Will there be an update?

image

Thanks

75 replies

Apr 22, 2024 11:00 AM UTC

This really is a key feature to enable scalable design systems. Would be super grateful if this could be added.

Dave_Curtis
Apr 26, 2024 10:47 AM UTC

When creating variables, it would be really useful to be able to include maths and text when defining a variable, which are kept up-to-date based on current values.

E.g.
With a shopping basket, I have the following variable
• Subtotal# (numeric)
Into which I add the value of each product selected in the basket.

From this value I would like to calculate
• VAT# (numeric) = Subtotal * 20%, truncated to 2 decimal places

And then display these variables in a currency
• Subtotal£ (String) = “£” + Subtotal#
• VAT£ (String) = “£” + VAT#
• Total£ (# String) = “£” + Subtotal#+VAT#

This way, I could just add/remove the product costs from Subtotal#, and use the strings for display in the prototype.

neelts
May 12, 2024 11:52 AM UTC

Hi @Dave_Curtis, my new plugin does exactly what you want, give it a try!
https://www.figma.com/community/plugin/1365339609215368041/dynamic-variables

Here’s the list of your expressions, but with the syntax of my plugin,
just paste these {{ }} expressions into the description fields of the corresponding variables and run the plugin Dynamic Variables → Start Monitoring Changes or Dynamic Variables → Update Once:

• VAT# (numeric) = {{ $Subtotal * .2 }}
• Subtotal£ (String) = {{ "£" + ( $Subtotal ).toFixed(2) }}
• VAT£ (String) = {{ "£" + ( $VAT ).toFixed(2) }}
• Total£ (# String) = {{ "£" + ( $Subtotal + $VAT ).toFixed(2) }}

Hope this helps!

neelts
May 12, 2024 12:06 PM UTC

And here’s the video showing how the plugin works in action based on your request:

neelts
May 12, 2024 12:29 PM UTC

Hey @A_Gussenberg, I just wanted to let you know that my new plugin Dynamic Variables does exactly what you’re looking for!
Here’s a quick video to show you how it works:

https://www.figma.com/community/plugin/1365339609215368041/dynamic-variables

@Josh_Mitchell your request is super close to this one, I posted video there too:

Let me know if you have any questions!

A_Gussenberg
May 14, 2024 5:11 AM UTC

Thanks @neelts - this looks really promising.

Ricardo_Santos
New Member
May 15, 2024 5:13 PM UTC

Please Figma team, add this feature

Ties
Active Member
May 27, 2024 11:34 AM UTC

Basically Excel/Sheets like input possibilities, that would make prototypes more lively and real.

I’d love to see a number to HEX converter (text) “HEX(red-value)” (or something like that) and the possibility to use a text variable as colour. That would be possible if variables would allow formulas as value.

+1

Leon_Wilson
New Member
Jul 12, 2024 7:11 AM UTC

+1 for this for sure…

Ant1
Jul 15, 2024 9:33 AM UTC

+1 for this