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 ⏩

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 📌

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:

#ui #userinterface #figma

[damoonarabali]

Many thanks for sharing this useful video (Prototype). I enjoyed your explanations.

[kanabiZDes]

A big thanks from a struggling guy who could not know how to connect these variables and make them work! Your vid really save my ass, bro. Very appreciate what you did!

[gokulraj]

I have just started my freelance career and this helped me a lot.. thanks very much for the scratch to final result tutorial, u will get more views and subs. u deserve

[RoseAngelieParagsa]

I've been searching for days on how to do this! I'm so glad I saw your video! Thanks so much!

[kidstoysvideosofficial]

You put a great effort really appriciate it 👍

[nikhildhaka]

You save my life. Thank you very much. Please make a playlist of tutorial of beginner prototyping or advance prototyping.

[ChooaBunny]

Thank you for sharing this with us! Your teaching methods work really well for me and your video was so easy to follow and understand. I'm trying to learn how to use figma because it looks pretty cool and videos like yours help a lot ♡

[axelnsosa]

Bro, you save my life. Amazing video, thanks a lot!

[PaiPassakorn]

Thank you for good video. This video is super useful.

[ameliaposiadaa]

to be honest, vdeo is good, but I got lost in, some things do not work in my version and I do not why.. I hate that Figma change its appearance so often and tutorials are not up to date and I lost my time looking for features instead of making actual stuff.

[marzuqsyed]

I am currently in an iOS programme, I was bummed when I couldn't get the premium version but i gotta deal with it.. Overall great video :))

[sychunya]

Hello! I have a question. Is it possible to make a code confirmation in the authorization form? Not just in the design, but in reality? For example, I enter my email and a code comes to my email, I enter it and register in this way. It seems that this is working with a code, right? Sorry for my English.

[sharonedwin]

I couldn't access condition as I am using the free plan. What do I do?

[ytRap]

amazing. is there a way i can type real in inputbox using variables?

[SvjetlanaZajec]

for some reason this is not working for me, i have some problems in Input1 (for password)
do you have your file accessible?

[feelerino]

I got to be honest… I don’t Iike the variables feature that much