Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables

Опубликовано: 28 Август 2023
на канале: thejunboy

20,059

496

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 protot...

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