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: fonts.google.com/icons?select...
Article: help.figma.com/hc/en-us/artic...
Variables: • Study Hall: Using vari...
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:
paypal.me/thejunboy
#ui #userinterface #figma
Негізгі бет Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables
Пікірлер: 28