I Built a Functional Calculator in Figma

I'll admit straight off the bat that I followed a tutorial. But as soon as I read the prompt "calculation", I thought it would be a perfect opportunity to spend some more time working with variables in Figma. YouTube quickly delivered the goods and I got to work on the UI.

The UI is my take on the iOS calculator

I decided not to reinvent the wheel here, and instead focus on the functionality (despite this being a UI challenge). I'm a self-confessed tinkerer, and tinkering with variables and calculations as part of an interface I've built is right up my street.

Redesign Notes:

I hate the Orange used in the iOS calculator. Why did Apple pick that? After creating the base for the buttons, this was the first thing I worked on - getting rid of that Orange and finding something less garish. I tried a few colours and gradients (https://uigradients.com), nothing was sticking, then I decided to use the Purple colour of the new iMac; it felt fitting to use an Apple colour. It actually ended up being too pale, so I landed on a slightly darker shade as the base.

The layout is great, so I copied it 1:1, creating each component and element myself and using auto layout to align everything perfectly. I created the calculation icons myself as vectors, since pre-made icon libraries either didn't match my design or didn't have all the icons I needed.

All the buttons got a hover effect and a light gradient stroke, then it was time to implement the functionality.

Functionality Demo:

Link to Prototype:

Try it yourself here:

https://www.figma.com/proto/4CQGo8SHjTVRvJs6b8w1Eg/Daily-UI-challenge?type=design&node-id=74-1900&t=0Hen0b8mv9So9lh9-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=39%3A374&mode=design

There are some caveats:

If you didn't notice from the demo video, the calculator isn't perfect in its functionality. The way Figma's variables/conditionals/interactions work limits calculations like this. The calculation is applied at the time of clicking the function button, and applies the currently entered value to it:

For example, at the start of the video I entered 10 + 10. This only displays "10" in the main display, and "10" in the user-entered variable above. It's not until I click the '+' function again that the two values are added together. This is the same for all the functions, although it does technically work, and the maths is correct.

The equals key doesn't work - again, this is due to a limitation of how Figma's variables work. Someone who understands programming logic better than I do can likely come up with a way to make this functional, but I wasn't able to.

Same goes for the decimal, it's simply not possible at this time.

What I added that wasn't in the tutorial was the '+/-', '%', and 'C' buttons functionality. They were fairly straightforward once I understood the other calculations, but I'm glad I was able to bring some new functionality outside of the tutorial to prove to myself that I learned something!

Video tutorial credit

Thanks, Kimo, this was super clear and helpful.

https://www.youtube.com/watch?v=Fk2NBF-Le7U