Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables
Follow this login screen build as we explore prototyping with string and boolean variables
1️⃣ 19:13 Error message - Colour, string and boolean variables
2️⃣ 23:58 Text fields - String variables
3️⃣ 36:01 Log on CTA - String variables
watch the tl;dr version ⏩
• A login prototype #figma
Key takeaways
• String can be used to change text and change variants in other component sets
• Ensure the variant value matches one variant name in the component set
• Boolean is true and false; it can be used to control visibility of other elements
Time Stamps ⏱️
00:00 Showcase
00:17 Introduction
00:44 Why variables?
02:05 My thought process
08:59 Creating the components
19:13 Setting up colour and boolean variables
21:37 Assigning variables to the error message
23:58 Setting up string variables
26:20 Setting up the base prototyping actions
30:24 Creating the first set of conditional statements
33:39 Assigning variables to the text fields
36:01 Assigning variables to the Log on button
43:51 Like, comment, subscribe fam
Resources 📌
Icons: https://fonts.google.com/icons?select...
Article: https://help.figma.com/hc/en-us/artic...
Variables: • Study Hall: Using variables in prototypes 101
Got a question about figma, or the UX/UI industry?
Any suggestions for topics you would like me to cover?
Leave a comment below.
Support my work at:
https://paypal.me/thejunboy
#ui #userinterface #figma
On this page of the site you can watch the video online Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables with a duration of hours minute second in good quality, which was uploaded by the user thejunboy 28 August 2023, share the link with friends and acquaintances, this video has already been watched 33,001 times on youtube and it was liked by 722 viewers. Enjoy your viewing!
