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 ⏩
https://youtube.com/shorts/rAigQ-yjYwk

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?selected=Material+Icons
Article: https://help.figma.com/hc/en-us/articles/14506587589399-Use-variables-in-prototypes
Variables: https://www.youtube.com/watch?v=odg_8TqPXvY

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

Видео Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables канала thejunboy