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: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#figma #prototyping #productdesign

[@sharpmw]

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.

[@clavasconcellos1712]

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!

[@pabitrashow9748]

My brain😵‍💫🤯
But, thanks man for educating us❤
And it tooks 2 hrs to understand the whole thing

[@AshishMishra-cm1bi]

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❤👏

[@Fabi-Moreno]

Great video! ty! Greetings from Argentine!

[@Jizansanu]

I wish you could explain, how to prototype backspace button as well.

[@DesignPilot]

Unfortunately that’s not possible to create

[@Jizansanu]

@@DesignPilot yeah, but I’m so happy that I got a reply from you. 💕

[@tochidioka6019]

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]

Make sure you have all the variables setup

[@unsa101]

If you follow the same steps and it doesn't work just refresh the tap than it will work fine

[@KartikeyMehta-py7ri]

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]

That’s not possible in Figma yet

[@KartikeyMehta-py7ri]

@@DesignPilot Ok.. and again thanks for such amazing content

[@night_slider]

your the best one woooow

[@suryanshkaushik9272]

As always🔥

[@prajwalsharma2794]

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.

[@mohammed-rb5ko6lv1f]

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

[@manikanta-qy9eh]

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??

[@DesignPilot]

That functionality is not there in Figma yet

[@abhinavrv0092]

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]

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]

@@DesignPilot thank you for replying so quickly. 👏👏

[@dayal_v]

At 14:02 For now I can't keep it blank, Figma is Forcing me to keep atleast something

[@guillaumegoulet1480]

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]

Unfortunately not

[@subashc1843]

Is it not possible to set a text variable to an empty string?

[@DesignPilot]

Yes, it it possible

[@bangthemonsters]

how would you delete one character from the list?

[@DesignPilot]

That’s unfortunately not possible yet

[@orishinaogunro]

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]

Add the empty quotes ‘’’’

[@orishinaogunro]

@@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]

@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]

@@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]

Use space key... Then enter... Then click again and delete the space...😊

[@Itachis_bro]

🎉🎉

[@vibhabhardwaj3892]

Variable Blank is not accepting

[@DesignPilot]

Try it a few times. It should work, there seems to be a bug

[@mohammed-rb5ko6lv1f]

Press on space button and the “string value” will be blank

[@ankitapatil1173]

@@mohammed-rb5ko6lv1fthis works, thanks 😊