Enter number and then show 25% of this number

Is there a way we can prototype allowing a user to enter a number i.e. £10,000 and then for Figma to calculate 25% of this and display this on the screen?

I want a user to be able to type any amount and have the percentage of that amount show on the screen. Im looking at variables and numbers but cant work out how to achieve what I need.

Hi Luke,
I tried to recreate what you asked for the calculation part:

  1. First I created a number variable set to 0
  2. I attached the variable to a text object
  3. In prototype mode, I wrote the math to multiply by 25% when clicked. The number variable will store the result, which is reflected on the text object.

Hope this helps give you a starting point!

1 Like

Hi Calvin

Thanks for your help. Thats really intesting and works!

Theres something also very similar im trying to do…

I want a user to be able to enter any amount i.e. ‘How much do you have saved in your pension’ - and then depending on the amount they add… they will be taken to different pages with different options i.e. if they have under £10,000 then they get taken to ‘Small Pot page’ but if they have over £10,000 then they get taken to a ‘Flexi-access drawdown’ page.

I wanted the user to type in manually how much they have. Rather than use a drop down menu with broad categories… as this will help to make the experience and the amount they have saved feel more real / customised.

Can you think of how I can do this? I see we can get an interaction where a user can type a number / any key… but not a long number like for example they could type £8,987.98 which could be the precise amount they have saved…

Can you think of how I would build this as a prototype?

Thanks for your help again! Really appreciate that!

Luke

Hi Luke,

I think it is currently not possible to type into an input in a Figma prototype, at least not a long string or number. Maybe you can “fake” the experience by having them type the first digit, which will then fill in the rest of the amount.