Connect Figma Variable to Variant | Connect a component to a variable | Prototype with Variables
Vložit
- čas přidán 12. 06. 2024
- 🚨Follow along → www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Language change with variables - • Figma variables to cha...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Hey!
00:04 Simple Method
02:50 Intermediate Method
09:39 Advanced Method
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes - Jak na to + styl
YESSS!!! You saved me such a headache lol. I created a wishlist feature for my prototype and I wanted the "heart" component to fill in when I clicked it on the product page as well as the cart page. Thanks so much for the tutorial!
yay I'm glad it helped! you're welcome ☀️🙏🏻💛
This was so useful!! I could finally do what I needed after searching solutions for almost 6 hours THANK YOU!!!
You're welcome! I'm glad it was helpful! ☀️🙏🏻
Your practically teaching habit makes you on top of all tutorials on CZcams. Please keep it free always
Thanks! ☀️🙏🏻
This came along right when I needed it. Thanks for explaining things!
Ah yay! Happy to help 🙏🏼🤗☀️
I've been looking for these solutions for weeks. Congratulations for making them so simple.😻
You're welcome! ☀️🙏🏻💛
I'm glad I found this video. I love the simplicity on how you explain things
aww thanks! ☀️🙏🏻💛
You are so good; I had to like and subscribe. Well done!
Thanks! 🙏🏼☀️
Thanks for the tutorial, easy to understand and good examples.
Thanks! You're welcome ☺️☀️💛
Your videos are on top of the list of the most useful and practical Figma tutorials. 👏💚
thank you so much! 🙏🏻☀️
Great video! Truly a talent to be able to explain these confusing topics in a simple way. Totally subscribing. Thank you!
Thank you!! 🥹💛🙏🏼☀️
Subscribed! Subscribed! Subscribed! 😍You are amazing. I needed clarification about the variable, and then you came; you just saved me.
aww yay! I'm glad it helped ☀️🙏🏻💛
that's i'm looking for, thank you for the help, keep pushing yourself and also teaching us,
cheers from Portugal
Happy to help! Thanks! ☀️🙏🏻💛
Beyond helpful, thank you so much for sharing your knowledge!
You’re welcome 💛🙏🏼☀️
2:30 For those wondering: "Set Variable" in prototypes is NOT a free feature. It is hidden behind a paywall
Yes prototyping variables is only available on the professional plans and "upwards" ☀️🙏🏻
Thank you a lot, this tutorial is just what I needed today 🎉❤❤❤
You're welcome! ☀️🙏🏻💛
I barely subscribe any CZcams channel but you've got my subscribe ma'am. A true master of Figma.
Aww thanks! 🙏🏻☀️💛🤗
Awesome video, I can't wait to try all these out.
Thanks! 🙏🏻☀️
I've been binge watching your videos on creating a design system and it helped me learn how to make pretty much an entire app interface (that's saying a lot since I didn't study UX/UI in uni), today I was looking to to exactly this, what are the odds! Thank you for you amazing learning material I really feel like stepping up with my skills. 👑
Happy to hear they help! 🙏🏼🤗☀️💛
as usual amazing tutorial with full energy you are the best teacher with good examples 👃
Thank you! 😃☀️
Thank you very very much this peerless information
You're welcome! ☀️🙏🏻
Too easy process. Thanks a lot you saved my day.... ❤
You're welcome! ☀️🙏🏻💛
Thank you Miss Sunshine 🙏
You're welcome! ☀️🙏🏻💛
you are so good on explaining but so fast for me as a non English speaker so I had to replay on some parts of them :')) but thank you so much!
ugh sorry! I always get told I speak too fast and I'm trying to work on it but Im glad you still managed to enhoy it! ☀️🙏🏻
I ❤ how you go the extra mile to explain the little details that save you time (shortcuts, tips and tricks). Learned a lot in this video thank you so much! 🙏
Thanks! ☀️💛🙏🏻
@@TDSunshine Of course! =)
So, quick question actually....
I was able to follow along your Intermediate example but when I tried to make it so that clicking on the "I accept the Privacy Policy" part will do both
1) enable the Continue button and
2) change the checkmark variant to True,
it works but then when I tried to do the same sort of thing for the "I would like to subscribe to all promotional emails", it affects BOTH checkboxes.
Do you know what I'm missing? How do I craft the interaction so that only a specific instance of the checkbox component is affected?
@@teegees it’s all about the variables so if you are using the same variable to control both the cells then they will both disappear so just make sure to split them up to separate ones and it should work! I hope this helps 🙏🏼☀️
@@TDSunshine Ah I see! Thank you 🙏
Thank you so much! You are Great and so helpful!
Like your energy!
Subscribed to your channel!
aww thanks! ☀️🙏🏻💛
So Informative Dear... 🥰🥰🥰🥰🥰🥰
🙏🏼☀️
It was very useful!!!
Glad to hear that! ☀️🙏🏻
I just leveled up! Thank you!
Glad I could help! ☀️🙏🏻
Great tutorial
Thanks! 🙏🏼☀️
TD, great advance tutorial, thanks!. One more thing... I've been using all those useful shortcuts you mention all the time. My new fav is Command/Control+Shit+R. Keep rocking!
Thanks! Paste to replace is such a lifesaver I love it! 💛☀️
Better Shift than Shit tho 😜
@@vladimirdursel 😂😂😂😂 I didn’t even notice! 🙈
You are REALLY GOOD at explaining this stuff fast and easy to understand! I really need help. I'm trying to make a single choice toggle where it is scalable, you can add several buttons and when you click only one with be selected. I don't want to do this with a pasta salad, I want to find a way to use booleans, strings etc conditionals whatever it takes to set this up so that when one button is selected all the others toggle off and only the main selection is highlighted. Any thoughts on how to do this?
Thanks! you can use the same method I used in the intermediate example where I use a boolean to change the variant of an instance. I use a mixture of variants and boolean variables that control eachother and turn things on and off. Remember you can connect multiple elements to the same variable so one can for sure turn off all your toggles. I hope that makes sense! ☀️🙏🏻💛
Thank you, thank you, thank you!! This is the video of the year for me. Helps so much! This helps make prototypes so much more interactive. These variables and variants are crazy. I have another question for you. I set up the prototyping for the buttons. Currently, if the user clicks on the disabled state of that button it will take the user to the next page. Once the button is clicked I only want it to take the user to the next page IF the button is enabled. Is that possible? Or is this getting too deep? Feel free to let me know it's too much. Just wondering! Thanks again for your work on this!
You’re welcome! Yes you can for sure do that 🤗🤗 as with everything- there are a few ways. If there is a variable controlling the variant than you can add a conditional like on click IF variableME = true THEN … so it only does it if that is the variable. If you only use the button in one place you can also set the action on the variant itself in the main component as well :) there’s probably a few other ways around this too 🤗 I hope that helps ☀️
Thanks, I like you.
☀️🙏🏻
Thanks for you video! Despite burning my head off but trying to implement the technique into a multi checkbox(that gives different results) Wish me luck hahahaha
Ooooo love this idea! Best of luck! I believe in you 💛🙏🏼☀️
Thank you so much for all your wonderful tutorials! They've really made my work files a lot cleaner and work better than they did when I would plug things together manually. I have a question: Are there ways to set characters limits for things? For example If a name is over 16 characters long the font size goes down to make more space. It doesn't look like you're currently able to do this with advanced prototyping but if there is I'd love your thoughs if you could share! This video really made all the difference in my current work project so thank you so much!
Thanks! hmmm tricky one! Font size change is a tricky one. You could always set your text box to fixed size and turn on the truncate text in the additional text options and that will truncate the text for you even if the user keeps typing in a prototype. Another option I can think of is a bit of a more clunky one where you can have a non dynamic keyboard and when they tap on it once it fills 16 characters so you can show how it looks up till there and then tap again and show how it would look with more than 16. (in this case the 16 and 16+ would just be different variants you would swap to)
If you just need to show someone how it would look you can use that second option for sure. Remember its always super fun to have really dynamic realistic prototypes but sometimes its ok to have it a bit more simplistic just to get our point across. I hope that helps! ☀️🤗
@@TDSunshine Currently I do have it set how you described in the 2nd example. I just had to know if I might have been missing something as I'm only just beginning to dive into the advanced prototyping world! That is a good point to keep in mind: just because you can doesn't mean it's the easiest way to convey a concept in a prototype. Sometimes my 'too much' gene gets the better of me. 😉 Thank you for making such a detailed response!
Hello TD, thank so much for your videos, Yours videos are amazing and useful. thanks for that. So I have a question, do you know if there is a possibility to apply variable with smart animate or open overlay sections for instances? I never see yet a tutorial using this technique.
Thanks! sadly no :( you can't set any animations for variable prototyping right now which does make them a bit jumpy. Fingers crossed for an update soon! 🙏🏻☀️💛
Thanks for explaining this. I am still struggling with these variables. I wish to have my selected image thumbnails to change state and change the image. I was able to get it to work but the performance was terrible. I then tried your mode switch approach. It works smoother but I am not sure how to make the state on/off depending on the selected thumbnail.
Hey! to make one change effect the other you either need an IF statment somewhere in the prototype OR you need to connect the to the same boolean variable and then use TRUE / FALSE as your variant names as well. I hope that helps! ☀️🙏🏻
became a fan...am i in love???🤔
haha ☀️🙏🏻
Could you show us how real life project looks like in figma? How it is organized etc? Thank you for your videos 💜
Great idea! will add to my list 🤗☀️
I would say, just for best practices and Dev handoff, keep letter case the same. "Yellow" != "yellow"
Great point! 🙏🏻🤗☀️
Thanks for your tutorial! It's really help!!
But I have a quick question about the second example, if I want user to select both 2 checkboxes, then the continue button is able to click. How to achieve this? Should I use a if statement? I think making 2 boolean variants can not help.
hmm there are a few ways around this. You could use a double IF so nest two IF's inside of each other to check both checkbox variables. I hope that helps! 🙏🏻☀️
@@TDSunshine Thank you so much! I finally figure out how to do.
Which tool do you use to edit your videos?
I use Final Cut Pro! And I’ve made a few of my own effects and generators in Apple Motion. ☀️🙏🏼
Hi. Quick question for the advanced example. Being that the interaction is the same for each tab, could it be set on a source component and then the instances within the comp each get a mode like before? 13:19
great question! yes, you definitely can! I show an example of that in this video -> *Language change with variables* - czcams.com/video/X5arGNpdXS0/video.html ☀️🤗
Great! Thank you
Hey,
What minimum size do designers use for buttons in android apps? I know material guidelines say min is 48 for icon buttons and uses 40 for other buttons.
The problem is height of 40 and above looks horrible in my designs. Apple's small buttons have 28px height, can i use this height? What size do yall experienced designers use in real apps?
This is a tricky one! You are correct about the 48 / 40 guidelines and yet they have buttons on their own library that are 28x28 🙃 I would say to try and make at least one "axis" of your button 40 or close to it. so even if the height is 20, try to make it a longer button. And if you do end up having something tappable that is a lot smaller than 40 (like an icon maybe) then at least make sure it has sort of a 40x40 tappable space around it, so don't crowd tappable items next to each other without sufficient padding. I hope that helps! ☀️🤗
5:30 Hello, I have a question about applying a variable to 'Variant (False)'. When you set the boolean variable to 'Variant (False)', the element does not get hidden. Could you please explain?
Yes! So, if you attach a Boolean variable to an element by right clicking on the eye on the layer section of the design panel then the variable controls the layers visibility. But if you use the variable to select a variant (like we do in the video) then it does not control the visibility at all. I hope that makes sense! ☀️🙏🏼
Many thanks... Will keep following you 😊
Seems like if I add hover over variant this method won't work. or am I missing something?
hmm yeah so if you have a hover state then the click would come from the hover and not from the original one if that makes sense. I hope that helps! ☀️
My problem was that it was not possible to assign a boolean to the component with 3 variants. Or am I missing something @@TDSunshine
So this advanced solution is limited to 4 items because of Figma 4 modes limitation (unless you have an enterprise plan).
Yeah its a bit restricted but sometimes 4 is all you need! ☀️
lol this shit is not simple. But you did an AMAZING job of explaining it. Thanks a ton!
Aww thanks! 🙏🏼☀️💛
@@TDSunshine Do you know how to set a rule that would set a component back to a default state when a different state is active.... Think of a dropdown menu. Each row is the same component, one row is selected already then if the user selects a different row in that menu (same component different state) the previously selected row goes back to the default state. I can't figure it out and none of the other designers I work with can either. It might not even be a "rule", mouse leave is the closest proto setting I can get to what I want
If you encounter an issue where the aliens do not change when you select a color, try to type the color names without using any quotation marks. Simply, type blue instead of "blue". The quotation marks will be added automatically.
🙏🏼☀️
Intermediate method - this method unfortunately does't work when we have a component within a component :(
Nested instances are still bit buggy I agree 😭☀️
I FEEL SO SCAMED BY FIGMA!!! I was rolling with this problem for days!!! W-T-F make the boolean variable connect thru the eye toggle??? Srly, I'm pissed... Great explanation tho! Won a sub
hahah I KNOW!!! i'ts such a weird place to put (hide) it! ☀️💛
your keyboard voice is tickling
I have a RK84 its so clicky clacky I love it! very ASMR ☀️🙏🏻💛
I watching your video and also I visited your CZcams channel and I saw that your content is so good. But there are lots of workspaces in your video SEO optimization area, so aren't reaching your video audience as a result video views, likes and subscribers aren't increasing. I found many issues in your channel if you wan I can share issues with you. Do you want to talk about it for a while?
thanks but no thanks 🙏🏻☀️
Can't we write like Button (Disable/Enable)
From what I checked only "True" and "False" work right now ☀️🙏🏻
But Honey, What's point using variables, variants for a toggle?. I really appreciate your effort but you could've selected some other complex element to make this tutorial.
This video shows how to connect variables to variants in a few different way :) Most of my videos are here to teach concepts and then people can go away and use these concepts as they please and need 🙏🏻☀️
But Honey, it's a free CZcams video showing the concepts.
@@luvair6765 ty honey
thank you its very clear explanation help us alot. Bohowoter...
You’re welcome! 🙏🏼🤗☀️