I need assistance with formatting numbers in Figma and would like to build a prototype to demonstrate this.
Please create a Figma prototype with the following requirements:
-
Add two number variables:
NumberVar1 set to 5678.45NumberVar2 set to 7890.55
-
Implement an onclick event:
- When triggered, this event should sum
NumberVar1 and NumberVar2.
-
Display the result:
- The result should be formatted as
$13,569.00 and shown on the page.
This prototype will help us understand what we’re missing and how to handle number formatting effectively.
Kind of hard to go ahead and make it for you.
But the concept here is pretty basic after you understand how the interactions work.
Literally you have everything you need. All you need now is the equation.
-
Set variables for both NumberVar1 and NumberVar2.
-
Create a number variable for Sum. Just leave that value at 0.
-
Create your interface. Maybe make it like a math problem.
NumberVar1
NumberVar2 [“+” button]
Sum
-
You can apply the variables to the text with the hexagon icon in the sidebar text panel.
- Then you have to create a math problem in an interaction.
Set the interaction onClick to “set variable” and choose the variable “Sum.”
Then set your “to” statement to “NumberVar1” + “NumberVar2”
That is literally all there is to it.
You just have to think through how the math problem works and get used to finding in the interactions how to write the equation. I am really bad at that part and always have a hard time figuring out complex equations. But the interface will kind of walk you through it.
Once you choose “set variable” it just lets you choose one. Then it tells you flat out…“to”…meaning that onclick, the variable “Sum” will be changed to whatever. In this case, tell the interaction that it should be set “to” NumberVar1+NumberVar2.
When you run the presentation, you will click the button and the math will happen.
Hope this gives you some insight into HOW to do it.
1 Like
Let me know if it does not come together for you.
If you try and it does not work, post the file or a link to it and we will see where it got hung up!
As for formatting…
Figma does not support a dollar sign OR a .00 variable.
So you have to trick it with a frame and auto layout.
Create a frame around a $ and the “Sum” variable.
Align everything right and add auto layout to hug the contents.
You won’t get the .00 to display. BUT if you change your math variables, it WILL show the cents values above .00.
Until Figma adds better support for more text variable options, this is our hack we must bear.
Also suppose user can enter any number on prototype so how we can go with fix. I put number for an example only.
@KennLucas, Could you please share the Figma file? I’ve been stuck on a task since this morning and need your assistance to proceed.
Thank you!
I cannot make a fresh file until after work tonight. But might be able to look over your work at lunch.
Send me your working file and let’s see where you are.
Hi @KennLuca, thanks for the quick response. I really appreciate you taking the time during your lunch break to look at this.
Here you go:
https://www.figma.com/design/uTtPhHPfHwbOzEzeNGrfNt/Variables-Test
If you need access to the file, please send me a request.
LOTS of questions here about what you are really trying to accomplish.
Why are you making multiple components to set up your math problem? This feels like you will end up with a lot of messy components to manage. I would see more making a component that serves the purpose, but then either making the variants in that component or else maybe making the guts of the component that you need to manage with variables as separate components and slot them in as needed. This would make it so that your instance is where decisions are made rather than making manty individual components.
That part there seems like something I would focus on before I started delving into trying to get further.
Not sure I will be of any help. This would require some tutoring and time that unfortunately I do not have as I work full time. 
Biggest question is are you trying to make a field where you ENTER a value of text to set the variable for txt-input1?
If that is what you are after, your whole initial explanation left that part out. We assumed that you just have values and you want them added when you click a button.
Which is the thing you are trying to create?
If you are just trying to add the two variables to get a third value, you were close. You seem to have created and then deleted the input-result variable. That was the right path…all you had to do was create the equation as in my image.
I am GLAD to look further and try to get you a better file this weekend. Sorry I cannot sooner.
The first thing is to get a better understanding of how you want this interface to work.
As a follow up, Figma does not have a way to create a form field that you can enter a text value. It just does not work that way.
Yes, @KennLucas, that was indeed my challenge. Unfortunately, Figma does not support real-time dynamic calculations natively. Thank you for your efforts in addressing it.
Gotcha.
As for the formula, I can help you with that if you follow the instructions I provided.
I can make you a file. Just not immediately.
I cannot solve your want to be able to type into a form. That is just not what Figma is designed to accommodate.
Let me know if there is more I can be a sounding board for or help.
