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

  • @clavasconcellos1712
    @clavasconcellos171216 күн бұрын

    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!

  • @sharpmw
    @sharpmw16 күн бұрын

    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.

  • @AshishMishra-cm1bi
    @AshishMishra-cm1bi10 ай бұрын

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

  • @pabitrashow9748
    @pabitrashow974810 ай бұрын

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

  • @Fabi-Moreno
    @Fabi-Moreno10 ай бұрын

    Great video! ty! Greetings from Argentine!

  • @prajwalsharma2794
    @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.

  • @KartikeyMehta-py7ri
    @KartikeyMehta-py7ri2 ай бұрын

    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

    @DesignPilot

    2 ай бұрын

    That’s not possible in Figma yet

  • @KartikeyMehta-py7ri

    @KartikeyMehta-py7ri

    2 ай бұрын

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

  • @guillaumegoulet1480
    @guillaumegoulet148010 ай бұрын

    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

    @DesignPilot

    10 ай бұрын

    Unfortunately not

  • @night_slider
    @night_slider3 ай бұрын

    your the best one woooow

  • @mohammed-rb5ko6lv1f
    @mohammed-rb5ko6lv1f2 ай бұрын

    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

    @DesignPilot

    Ай бұрын

    It’s not there in Figma yet

  • @Jizansanu
    @Jizansanu10 ай бұрын

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

  • @DesignPilot

    @DesignPilot

    10 ай бұрын

    Unfortunately that’s not possible to create

  • @Jizansanu

    @Jizansanu

    10 ай бұрын

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

  • @suryanshkaushik9272
    @suryanshkaushik927210 ай бұрын

    As always🔥

  • @tochidioka6019
    @tochidioka601910 ай бұрын

    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

    @DesignPilot

    10 ай бұрын

    Make sure you have all the variables setup

  • @unsa101

    @unsa101

    3 ай бұрын

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

  • @abhinavrv0092
    @abhinavrv00929 ай бұрын

    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

    @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

    @abhinavrv0092

    9 ай бұрын

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

  • @subashc1843
    @subashc18436 ай бұрын

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

  • @DesignPilot

    @DesignPilot

    6 ай бұрын

    Yes, it it possible

  • @bangthemonsters
    @bangthemonsters10 ай бұрын

    how would you delete one character from the list?

  • @DesignPilot

    @DesignPilot

    10 ай бұрын

    That’s unfortunately not possible yet

  • @orishinaogunro
    @orishinaogunro7 ай бұрын

    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

    @DesignPilot

    7 ай бұрын

    Add the empty quotes ‘’’’

  • @orishinaogunro

    @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

    @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

    @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

    @kingoslo7024

    5 ай бұрын

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

  • @Itachis_bro
    @Itachis_bro10 ай бұрын

    🎉🎉

  • @vibhabhardwaj3892
    @vibhabhardwaj38922 ай бұрын

    Variable Blank is not accepting

  • @DesignPilot

    @DesignPilot

    2 ай бұрын

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

  • @mohammed-rb5ko6lv1f

    @mohammed-rb5ko6lv1f

    2 ай бұрын

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

  • @ankitapatil1173

    @ankitapatil1173

    Ай бұрын

    @@mohammed-rb5ko6lv1fthis works, thanks 😊

Келесі