Skip to main content

I'm building a CGPA calculator in Figma using variables, but it’s giving strange results—any idea why?

Hey everyone! 👋

So I’m working on a simple CGPA calculator prototype using Figma variables (just for demo purposes, not full logic), and I’ve run into an odd issue. I've set up number keys from 1 to 9, and I'm using a variable called #Result to store and display the user's CGPA or input.

Here's the interaction logic I’m using:

Every time a number key (say 7) is clicked, I update the variable like this:
Result = Result * 10 + 7
So, ideally, the input flow should look like: 0 → 7 → 77 → 777 → 7777 → …

But what’s happening instead:

After a few clicks, it suddenly turns into: 77777776 → 777777792 → -2147483648 😩
…and then it stops responding.

I got the answer from one of my friend. He says that:
 

You're encountering integer overflow because Figma likely uses 32-bit signed integers for its variables. The max value for such an integer is 2,147,483,647. When you keep multiplying and appending digits (like Result = Result * 10 + 7), the value eventually exceeds this limit, wrapping around to a negative number like -2147483648.

To fix it:

  • Limit the number of digits—CGPA doesn’t need more than 4-5 digits anyway.

  • Consider storing input as a string, like Result = Result + "7" if Figma supports it.

  • Or reset the value if it exceeds a threshold using a conditional check.

This will keep your prototype accurate and responsive!

I think he is right. He is a back-end developer who develop websites and custom tools like CGPA calculator and more. Thanks to him.

Reply


Terms & ConditionsCookie settings