PROTOTYPE a Phone Number Input Interaction using FIGMA VARIABLES | Advanced Prototyping
Фильм және анимация
🚀 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
Пікірлер: 44
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!
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.
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❤👏
My brain😵💫🤯 But, thanks man for educating us❤ And it tooks 2 hrs to understand the whole thing
Great video! ty! Greetings from Argentine!
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.
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.
@DesignPilot
2 ай бұрын
That’s not possible in Figma yet
@KartikeyMehta-py7ri
2 ай бұрын
@@DesignPilot Ok.. and again thanks for such amazing content
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?
@DesignPilot
10 ай бұрын
Unfortunately not
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
@DesignPilot
Ай бұрын
It’s not there in Figma yet
I wish you could explain, how to prototype backspace button as well.
@DesignPilot
10 ай бұрын
Unfortunately that’s not possible to create
@Jizansanu
10 ай бұрын
@@DesignPilot yeah, but I’m so happy that I got a reply from you. 💕
As always🔥
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
@DesignPilot
10 ай бұрын
Make sure you have all the variables setup
@unsa101
3 ай бұрын
If you follow the same steps and it doesn't work just refresh the tap than it will work fine
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.
@DesignPilot
9 ай бұрын
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
@abhinavrv0092
9 ай бұрын
@@DesignPilot thank you for replying so quickly. 👏👏
Is it not possible to set a text variable to an empty string?
@DesignPilot
6 ай бұрын
Yes, it it possible
how would you delete one character from the list?
@DesignPilot
10 ай бұрын
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.
@DesignPilot
7 ай бұрын
Add the empty quotes ‘’’’
@orishinaogunro
7 ай бұрын
@@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.
@DesignPilot
7 ай бұрын
@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
@orishinaogunro
7 ай бұрын
@@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.
@kingoslo7024
5 ай бұрын
Use space key... Then enter... Then click again and delete the space...😊
🎉🎉
Variable Blank is not accepting
@DesignPilot
2 ай бұрын
Try it a few times. It should work, there seems to be a bug
@mohammed-rb5ko6lv1f
2 ай бұрын
Press on space button and the “string value” will be blank
@ankitapatil1173
Ай бұрын
@@mohammed-rb5ko6lv1fthis works, thanks 😊