Figma Variables Pt1 ⚡ - Login screen prototype with string and boolean variables
Вставка
- Опубліковано 27 лип 2024
- 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
Bro, you save my life. Amazing video, thanks a lot!
Glad it helped!
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!
Glad to hear it was useful for you!
I've been searching for days on how to do this! I'm so glad I saw your video! Thanks so much!
Glad I could help!
This is incredible. Thank you!
You're very welcome!
Many thanks for sharing this useful video (Prototype). I enjoyed your explanations.
You are so welcome! Appreciate the feedback!
Terrific tutorial! Thank you
You're very welcome!
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 ♡
You are so welcome! Any questions just reach out, always happy to assist.
thankyou bro
Happy to help
amazing. is there a way i can type real in inputbox using variables?
do you mean type live in the prototype? i don't think so. treat your prototypes as a way to communicate your ideas and storytell what is going on and how a user would go through an experience.
@@thejunboy it is possible i try it from what other channel share for it but the problem the backspace key is not yet working or no equivalent string to get the key when pressed.
I would love to see if you have a link. The only thing I have seen, is someone creating a UI keyboard and creating a variable for every individual letter.
I would question what value there is in creating a prototype to this much detail. I have never required to build one for work as the prototypes are mainly used as conversational tools to share an idea or concept to our clients.
@@ytRap007
for some reason this is not working for me, i have some problems in Input1 (for password)
do you have your file accessible?
Hello - it would be too much hassle for me to release public files for all these videos, but happy to workshop the problem with you. What exactly is not working?
@@thejunboy i made it work, maybe i miss something for first time when i made conditional variables, tnx for video it helps a lot
I am glad you worked it out! All the best with your Figma journey :)@@SvjetlanaZajec
I got to be honest… I don’t Iike the variables feature that much
fair enough! it is quite useful and hopefully they keep developing it as the industry is more and more reliant on design systems and component libraries, but if the feature is not useful for your workflow thats totally fine too
You put a great effort really appriciate it 👍
Thank you leaving a supporting message! All the best with Figma!