PROTOTYPE a Phone Number Input Interaction using FIGMA VARIABLES | Advanced Prototyping
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video (Part 2/5), you will learn to prototype a phone number input interaction with a dynamic character limit using Figma Variables. We will also understand how the order of the conditions can affect your prototype.
🔗 Full Playlist - • Advanced Prototyping w...
🔗 Figma File - www.figma.com/community/file/...
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 The Super Ultimate Guide to Design Systems: learnproduct.design/designsys...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Preview of the Interaction
01:26 Understanding the User Flow
02:41 Animating the Keyboard
05:50 Logic for Inputting Numbers
29:43 Logic to Activate the Button
34:19 How the Order of the Conditionals matters
43:00 Logic for Character Limit based on Country Code
-----------------------------------------
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#figma #prototyping #productdesign - ภาพยนตร์และแอนิเมชัน
At 27:25, by pushing the no. of digits statement into the conditional action block you can freeze the counting at 11. It won't go more than that.
My brain😵💫🤯
But, thanks man for educating us❤
And it tooks 2 hrs to understand the whole thing
THANK YOU SO MUCH!!! I've been researching everywhere on how to input a value with commas and dots, and I've been able to do it thanks to your tutorial!
Hey Chethan, thanks for the great explanation! I really enjoyed the decision making iterations for the different scenarios and you have done a great job explaining it all in a logical and simple manner❤👏
Great video! ty! Greetings from Argentine!
I wish you could explain, how to prototype backspace button as well.
Unfortunately that’s not possible to create
@@DesignPilot yeah, but I’m so happy that I got a reply from you. 💕
As always🔥
I can't keep the value of my string literal as blank. The moment I backscape whatever the value there is and press enter, instead of clearing up it reappears.
Hi Chethan, thanks for this very solid tutorial as always👏👏👏
But I'm finding it hard to copy and paste my interaction on element "1" to the other numbers, like 2, 3,4 etc
Make sure you have all the variables setup
If you follow the same steps and it doesn't work just refresh the tap than it will work fine
your the best one woooow
I need a logic of delete button of keyboard like example If I click on it for one time that means deleting one character but clicking for tow times that means deleting tow characters
It’s not there in Figma yet
As by pressing "1" we are setting varaible Phone number to phone number + "1" . This is to add clicked number to created variable string phone number. Same way if an user clicks on clear arrow, is there any way to clear an entry from string??
That functionality is not there in Figma yet
Great explanation as always Chethan❤. Between,
from where did you learn about variables and this advanced prototype so early? I'm highly interested and want to learn more about these new figma features.
I watched a few tutorials and sat down to understand. Took me a week to figure it out by playing around. Asked a few pros on social media and clarified them
@@DesignPilot thank you for replying so quickly. 👏👏
This video is really amazing and helpful. Just wanted to know how to set conditions for the 'Backspace' key to make the prototype more realistic. In the current scenario, I have to either go back or restart the prototype if I entered a wrong number. Please help with that.
That’s not possible in Figma yet
@@DesignPilot Ok.. and again thanks for such amazing content
At 14:02 For now I can't keep it blank, Figma is Forcing me to keep atleast something
Hi Chethan, 👋
I was wondering if there was anyway to do the same thing for desktop screen i.e a responsive search bar using a computer's keyboard rather than an onscreen keyboard?
Unfortunately not
Is it not possible to set a text variable to an empty string?
Yes, it it possible
how would you delete one character from the list?
That’s unfortunately not possible yet
For the string variable. I have been trying to delete the “string value” and leave it blank, but it keeps reappearing. I can’t find videos on how to.
Add the empty quotes ‘’’’
@@DesignPilot that doesn’t work. Let me explain better. When I try to create a string variable and try to leave the (mode/input) empty/deleted, the “string value” reappears back.
@orishinaogunro Just tried it on my account. I seem to have the same problem. Try to press backspace a few times when it’s empty and try to do remove it a few times if it appears again.
Looks like there is a bug
@@DesignPilot Same issue. I have done this input with another design and it worked. But this time, it’s frustrating. Thought it was only from my end, but If it’s general, than it’s from Figma. But I’ll retry it again later. Thanks for the help.
Use space key... Then enter... Then click again and delete the space...😊
🎉🎉
Variable Blank is not accepting
Try it a few times. It should work, there seems to be a bug
Press on space button and the “string value” will be blank
@@mohammed-rb5ko6lv1fthis works, thanks 😊