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: https://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 with Figma Varia...
🔗 Figma File - https://www.figma.com/community/file/...
🚀 The Ultimate Guide to Become a Product Designer: https://learnproduct.design
🚀 The Super Ultimate Guide to Design Systems: https://learnproduct.design/designsys...
🚀 Create an account on Mobbin for free:
https://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 Design (UI/UX) Cours...
Webflow Course for Beginners:
• Webflow Course for Beginners
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutorials
UI Design Tutorials:
• UI Animation/Interaction Tutorials
Design Resources, Tools and Softwares:
• Design Resources, Tools and Softwares
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [email protected]
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#figma #prototyping #productdesign
