Using Conditional Prototyping in Figma: A Figma Calculator Like You've Never Seen Before.
HTML-код
- Опубликовано: 26 июл 2024
- In this video, I will guide you through the process of creating a fully functional calculator prototype using Figma's powerful features that have been released #config2023 , including variables, #expressions, and #conditional prototyping.
Witness the magic as we utilize Figma's variable system to enable dynamic interactions, allowing real-time calculations and updates. I will show you writing and evaluating mathematics, taking the calculator's capabilities to new heights.
Content:
0:00 - Intro
0:23 - What you will see in this video
0:52 - Step one: UI design
3:26 - Step two: define variables
4:32 - Step three: Connect text fields to variables
5:19 - Step four: Expressions and Conditionals
14:41 - Demo
Don't forget to subscribe to my channel if you like the video.
Let's Learn together #UX and #UI , #Design, #xd #prototype #Config2023
Follow me on Instagram: / kimo.artcave
Photography: / kiagraphy.a. .
Twitter: / kiarashmoazzez 
Наука
thx so much
Please complete the tutorial. Try to include all of the functions on a calculator for example you didn’t assign anything for the equal to button :)
this is great but im currently losing my mind trying to make the equal sign work along with the operations :))))))))
Hi there! I understand you, I got many messages regarding this topic. I will publish a video when I find a solution to share. Thanks ❤️
Good job!
❤️❤️
@@Kimoartcave Maybe you know how to make it possible to work with floating-point numbers. I watched a video on LinkedIn which is titled 'Experimenting with Variable Prototyping in Figma' by Zunder Whitehurst, where he is demonstrating how his prototype handles numbers like 12.345. Do you have any idea how he created it?
Cool, I will check it out. Would be good If you share the link here for everyone. Thanks ❤️
Also, what about the local variable "oprational"? Did you use it?
Great video! I've tried to prototype a calculator too, but in a much complex way than you did 😅
The only thing I would try to improve in your solution is to make usefull the " = " button.
For examples, the "display" text might be hidden by default and appear only when tapping the "=" button. You just need to use the boolean variable and apply it on the display text.
What do you think?
Thanks for your comment. I tried to make the "=" button, functional. that is why I created the "operational" variable. Also, I tried another feature that the user even sees the history and the operations that he or she has done before besides the result. I just cut off those parts because the video became so long.
I like your idea, please give it a try and share your learnings with me.♥
Great video! I was wondering if you think it might be possible to prototype a "Select up to (number)" UI pattern with variables. A bit more context, but say I have a screen to mark a user's interests, but they can only select up to 3 interests.
The interactions involved would be: 1) the resting state buttons change to thier variant states of "selected" and 2) once maximum selections are allowed, the other buttons in "resting" state would need to be changed to the "disabled" variant state to indicate that no more selections are allowed. Is something like this possible with the new prototyping capabilities? I tried playing around with this idea, but I was stuck because it seems like you can't relate a variable back onto itself?
Let me know what you think!
My first impression is to use a variable to store the count of user selected items and increase it by each new selected item. And the conditional for navigating the user to another page if that variable gets higher than the specific amount. What do you think? Thanks for your comment. Nice point.
Hello! I'm from Brazil and I follow all your content. I have a question regarding the functionality of the "=" button. Could you describe the step-by-step process for activation? And about the history as well. Thanks!
❤️❤️
Thank you for making this the greatest video. I have a question. How to work with "." and "00" ? is it cannot set less then 0 or more than 10?
Did you try to see if variables only accept integer? If not maybe we can add "." Btn and see how the calculstion works. If I underestood you right.
Share your solution with me if you have done it ❤️
i am not able to set actions like subtract divide or multiply actions in while setting variable, I am only able to add
Hi there! Have you followed the steps in the video? And where did you face the issue? Share it with me that I can help you more. Thank you for watching my video ❤️
Hi, I didn't understand the logic of multiple of 10 to user input can you please explain in detail. Btw it's a nice video. Thank You 😊
So it is just about adding a new digit to our displayed number, so we multiple the user input by 10. Example: user first input=1 and user second input is 2 then 1×10+ 2= 12. Now, the third user input= 1, for example, so 12×10 + 1, which is equal to 121. Is the logic clear now? Let me know if you need more help. Thank you ❤️❤️
This is a great tutorial but for subtraction operation, the output appears with "-" sign e.g 4-2 = -2. How to resolve that. Your methods works only with double digit number like 12
It should work regardless of the amounts of digits. 4-2 should be 2. Can you refer me to the specific part of the video that this issue appears? Thank you ❤
@@Kimoartcave You showed the operation with number tweleve. Also using "=" operator, I tried by parsing if condition for all arithmetic operators. It fail to work for division and multiplication.
This is all great but I have no idea what this has to do with design, it more logic and programming?
Well, you are right! We might not need same trick so often. However, in some cases we might need to use more complex logic to create realistic prototypes depending many parameters. This video is just an example to show how we can use variables to make those complex prototypes. So I would say, it is more about prototyping phase.
how to do it with single text field
I used two text field to show current state and user input. I assume we can combine them and use one variable to connect it to final text field. In this case caculation happens in background and when ever user enter new number, text field should show that number. It needs more complex logic, but it should be possible.
Share your solution if you tried it out ❤️
what if i want decimals?
Seems that, for now, variables can not accept decimal values, which is very needed. I see it is a common request in the Figma community, and I hope Figma adds it in the next updates.
There might be some ways to fake it. However, it will be very costly in terms of time that you need to spend, to make it happen.
@@Kimoartcaveyeah I figured.. I so wish there were decimals support :/ anyway, thanks bro. Your videos have been helping me a lot
This is really informational. I however have an issue : After entering certain number of characters eg: 77777 it starts generating a weird number eg:777776 , 7777792, -2147483648 and stops. Can you please help here.
I have experienced the same issue sometimes as well. I assume it is about the way Figma handles different variables. I could not understand the reason. Maybe it is worth opening a thread for this topic in Figma community.
@@Kimoartcave Even I am confused, as I have revalidated it leaving no room for error, but the issue persists. I'll be taking it with the community then. Appreciate the prompt response :)