PROTOTYPE an OTP/PIN Input Validation 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 4/5), I will show you how to create an OTP PIN Input Interaction. This is going to be a very complex video as we will learn to validate and reset the OTP as well.
🔗 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:00 Preview of the Interaction
00:02:39 Creating Components for the OTP Input Field
00:06:39 Defining Logic for Suggestion Bar
00:08:37 Creating Interaction for Suggestion Bar
00:11:38 Defining Logic for Keyboard Input
00:15:56 Creating Interaction for Keyboard Input
00:24:36 Understanding User Flow for OTP Validation
00:27:27 IMPORTANT: Defining Logic for OTP Validation
00:45:38 Creating Interaction for Incorrect OTP
00:56:59 Resetting Error Message
00:57:39 Creating Interaction for Correct OTP
--------------------------------------­---
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

[@AshishMishra-cm1bi]

Hey Chethan, I spent an entire day practicing and working through this exercise, exploring various scenarios and use cases. Your dedication in creating this fantastic series on advanced prototyping is greatly appreciated! ❤

[@davidsampson9796]

Thank you Design pilot for this video

[@Lala-uh9dr]

Hi Chethan, thank you for this video. I could manage to do everything except this: When I type the code manually, it says incorrect, although the code is correct. But when I choose from suggestions, then it goes to the home screen with success. What should I do?

[@haritouzumaki8332]

HI chethan i am hari your Don't be an NPC topic its helps me lot and love to watch viodes like that and can you create new video about ideation section can you have any recipe to add it? and its been long since you posted new problem state meant can you post it? and I thanks for mentoring me!!!! : )

[@nikhil4yourhelp670]

Make one detail video on protopie it is also a very good tool for prototype

[@DesignPilot]

There are plenty of videos online already

[@Charushree-vf2wt]

Hello, Chethan My name is Charushree. I learned a lot about advanced prototyping and variables from the video, which I truly appreciated. Just one little question: although the suggested otp screen seamlessly transitions to the home screen when I click it, I'm not sure why, but when I type the number, an error message is showing after clicking the verify code, even if I am pressing the proper otp on the keyboard.
BTW Thank you for creating such amazing videos.

[@DesignPilot]

It’s very hard to understand the problem like this. Maybe checkout my practice file and compare it with yours

[@Charushree-vf2wt]

@@DesignPilot Okay. Thank you!..

[@manikanta-qy9eh]

@@DesignPilot Im facing the same issue. For the first time when i enter OTP manually with validations its throughing and error message. If you enter the same OTP manually for the second time its validating correctly. Ive checked with your file too. Unable to find the issue, its working fine in your file.

[@DesignPilot]

@manikanta-qy9eh Maybe build it again in the new file.

[@RaufunNur]

🙏💖

[@sktipwr]