I think you already know this, but you are an outlier, off-the-charts when it comes to teaching ability. I have been a teacher off and on for 15 years now and find it hard to recall someone as good as you for communicating exactly the right thing on complex topics
13:23 tip: you can copy and paste interactions, all you need to do is to set it up for one, copy it, select the other ones, and paste. Or start by selecting all that need a similar interaction, set it up, and adjust it for each individual one (saves a tonne in time, especially when it’s complex)
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! 🙏
@@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 I've been watching your Figma tutorials over the last few days, catching up on more advanced concepts, and each one is better than the last! Thank you!
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. 👑
Great video! Quick question: Is your playlist in a specific order? I was planning to watch every video, but I wasn't sure if I should go from oldest to newest, or just follow the order you've set.
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!
Great tutorial. Super clever way of doing this and very applicable in many situations. I think you can emphasize even more that this works because of the smart naming of the variants to "true" and "false", that's really a key aspect of the method. Thanks a lot!
Thanks for showing the flexibility is the string variable! To return the favor and share some advice: Technically you want to use checkboxes (square shaped) for separately toggling on and off. A circle indicates a radiobutton and radiobuttons are not supposed to be able to turn off once you reclick the same button. And only 1 radiobutton of a group can be turned on at one time.
Hi, thanks for your great content. I love your examples. In a real work environment, you typically create Primitives for base colors, sizes, etc., and Tokens for color aliases. For boolean and string variables used in UI elements, would you organize them within separate collections for each UI component (e.g., login page, checkout page, navigation component) or consolidate them into one collection for the entire project? I'm curious about the general approach to organizing local variables. Could you provide specific examples for clarity?
Great questions! There is not one way thats more correct then others, i'ts all about what works best for you :) I would say I would try and put components in the same collection but use groups to separate them. Sometimes you can't do that though if some of them use modes that the others don't so then you have to use different collections. ☀️🙏🏻
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 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! 🙏🏻☀️
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! ☀️🙏🏻💛
Hello, thank you so much for this particular video because it’s easy to understand and very helpful…. I’m not sure if I’m doing the right thing or it’s the new figma update but I can’t seem to add the value “the one in quotation that allows the prototype interaction “ and because of that, it isn’t working as it should…. If anyone can help me out I’ll really appreciate… I can’t share a screenshot here but literally I can’t just input a value that allows it to work.. thank you
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! ☀️🙏🏼
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* - ua-cam.com/video/X5arGNpdXS0/v-deo.html ☀️🤗
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! ☀️🙏🏻
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!
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!
Nice! Btw, for the 2nd tutorial on the Intermediate Method, how do you get the 'Continue' CTA to activate when you click on the 3rd checkmark "I would also like to subscribe to the super cool emails"?
Can you do a tut on how to control a Label's highlight for a Map when you mouse over the Map pin? I am sure this is a conditional variable but i'm stumped! :-) I also echo the comments on your teaching skills. You have an easy to follow style and not too slow...!
Advanced mode : You can also use the Copy/Paste technique of hovering over the left side of the Prototype Interaction to copy the Set to Fruit and it will use the correct Variable because of the Text field relation. Saves a couple clicks.
awesome tuts TD. can you create a tutorial in using variable in filtering ... like the one you do in blog where you filter card topics. The logic is like this but multiple items could appear at once. The challenge is it should be like this where the button is outside the component set. because the way i do it now is button is inside but you managed to pull this off even when buttons are outside. Hope it made sense.
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! 🙏🏻☀️💛
This works, however i am trying something a little bit complex. Want to create a filter option by "country flags" by default show all, however when specific country card is selected show only contents of the country type linked and nothing else (i am not getting how to make it show nothing else) and then show all of all is selected once again or and if any other specific country show country card... I hope this makes sense and you see this soon Thanks in anticipation
ooo great question! like a little logic puzzle! I think this video will help you achieve what you want - ua-cam.com/video/A1EYkbJIdIQ/v-deo.html . Let me know if not though and I can try and think of a solution! ☀️🙏🏻💛
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
hey :) just saw your video - looove it. but i have a problem: cant see at "layer" (if i press eye icon to connect it) the variables.... how can i connect table cell to boolean?....
Hi, I cannot assign the local variable to the layer property. There is only the eye icon. By clicking, it simple toggle hide/show. But I would expect the popup with the local boolean variables to select.
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! ☀️🤗
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! ☀️
@@TDSunshine I mean, I created a tab bar component which in the component it self when I click an item it has a click event, its highlighted with circle around. outside the component when I click each item I want component work properly this means highlighting the selected item, and also I want create a scroll event, when I click an item it goes somewhere in the page. I know maybe it's simple thing but I couldn't figure it out. I can not duplicate the page and prototype because it's a scroll event, it has to work in the page it self.
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.
@@TDSunshine Thank you for your reply. I have one question: In your first example, "My Alien," what if you add another Aliens component with different colors, such as Grey, Purple, and Green (and add new 3 buttons), but place these three Aliens on a different page? How would you load these new Aliens (from different page) into the original "Simple" container page? Thank you, appreciated for your help.
@@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
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
I think you already know this, but you are an outlier, off-the-charts when it comes to teaching ability. I have been a teacher off and on for 15 years now and find it hard to recall someone as good as you for communicating exactly the right thing on complex topics
thanks! ☀️🙏🏻💛
Your practically teaching habit makes you on top of all tutorials on UA-cam. Please keep it free always
Thanks! ☀️🙏🏻
I spent about 4 hours trying to figure this out and you explained it SO well in just a few minutes. Thank you so much!!!!!
You're welcome! I'm glad it was helpful! ☀️🙏🏻💛
Your videos are on top of the list of the most useful and practical Figma tutorials. 👏💚
thank you so much! 🙏🏻☀️
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" ☀️🙏🏻
太棒了！variant 和 variable 发布一年了，我一直云里雾里的，以至于工作中没怎么使用过 variable，看了你的讲解我瞬间明白了！
I'm glad it helped! ☀️🙏🏻💛
i've looked up countless tutorials on boolean variables, but yours was the easiest to understand and implement. Thank you so much !
Glad it helped! ☀️🙏🏻💛
I'm glad I found this video. I love the simplicity on how you explain things
aww thanks! ☀️🙏🏻💛
Each passing year, what you can do in Figma gets closer and closer to what you can do in code. Your lessons are super helpful!
Yes! Figma keep upping their game 😎☀️💛
13:23 tip: you can copy and paste interactions, all you need to do is to set it up for one, copy it, select the other ones, and paste. Or start by selecting all that need a similar interaction, set it up, and adjust it for each individual one (saves a tonne in time, especially when it’s complex)
Great tip! ☀️🙏🏻💛
This is the most clear and useful Figma video I've ever seen!
Glad it was helpful! ☀️🙏🏻💛
This is the best video for variable on UA-cam... We want more like this , but in the conditional state... lots of it.😅😅
Thanks! will do ☀️🙏🏻💛
I barely subscribe any UA-cam channel but you've got my subscribe ma'am. A true master of Figma.
Aww thanks! 🙏🏻☀️💛🤗
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 🙏
Thanks!
Thank you so much that’s extremely kind of you 🙏🏼🙏🏼☀️☀️💛💛
@@TDSunshine I've been watching your Figma tutorials over the last few days, catching up on more advanced concepts, and each one is better than the last! Thank you!
This was the best breakdown of this I've seen. Thank you, this has really been helpful.
Glad it was helpful! ☀️🙏🏻💛
This came along right when I needed it. Thanks for explaining things!
Ah yay! Happy to help 🙏🏼🤗☀️
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! 🙏🏼🤗☀️💛
Great video! Quick question: Is your playlist in a specific order? I was planning to watch every video, but I wasn't sure if I should go from oldest to newest, or just follow the order you've set.
The best explanation on the internet. Congrats🎉
Thanks! ☀️🙏🏻💛
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 ☀️🙏🏻💛
I've been looking for these solutions for weeks. Congratulations for making them so simple.😻
You're welcome! ☀️🙏🏻💛
Great video! Truly a talent to be able to explain these confusing topics in a simple way. Totally subscribing. Thank you!
Thank you!! 🥹💛🙏🏼☀️
Great tutorial. Super clever way of doing this and very applicable in many situations. I think you can emphasize even more that this works because of the smart naming of the variants to "true" and "false", that's really a key aspect of the method. Thanks a lot!
great point! thanks! ☀️🙏🏻💛
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! ☀️🙏🏻
TD you are a sweetheart, thank you for all these awesome tutorials
You are so welcome ☀️🙏🏻💛
finally found a fast and clear explanation! thank you
באהבה ☀️🙏🏻💛
This was super helpful! Finally getting a hang on variables. ❣Thank you
Just had to subscribe too!
Thank you! ☀️🙏🏻
can't wait to try this... first video that I watched from your channel and you made it so simple... TA DA ✨😊
Thanks! ☀️🙏🏻💛
Thanks for showing the flexibility is the string variable! To return the favor and share some advice: Technically you want to use checkboxes (square shaped) for separately toggling on and off. A circle indicates a radiobutton and radiobuttons are not supposed to be able to turn off once you reclick the same button. And only 1 radiobutton of a group can be turned on at one time.
Great tips! ☀️🙏🏻
Thanks for the tutorial, easy to understand and good examples.
Thanks! You're welcome ☺️☀️💛
You are so good; I had to like and subscribe. Well done!
Thanks! 🙏🏼☀️
Hi, thanks for your great content. I love your examples. In a real work environment, you typically create Primitives for base colors, sizes, etc., and Tokens for color aliases. For boolean and string variables used in UI elements, would you organize them within separate collections for each UI component (e.g., login page, checkout page, navigation component) or consolidate them into one collection for the entire project? I'm curious about the general approach to organizing local variables. Could you provide specific examples for clarity?
Great questions! There is not one way thats more correct then others, i'ts all about what works best for you :) I would say I would try and put components in the same collection but use groups to separate them. Sometimes you can't do that though if some of them use modes that the others don't so then you have to use different collections. ☀️🙏🏻
You are awesome Bae ❤
Thanks! ☀️🙏🏻
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 ☀️🙏🏻💛
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 ☀️
Too easy process. Thanks a lot you saved my day.... ❤
You're welcome! ☀️🙏🏻💛
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.
Just watched the first 2mins of the video, really really a very good and so informative and the video quality and SFX is awesome. Keep going 😊❤
Great to hear! ☀️🙏🏻💛
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! ☀️🙏🏻💛
Hello, thank you so much for this particular video because it’s easy to understand and very helpful…. I’m not sure if I’m doing the right thing or it’s the new figma update but I can’t seem to add the value “the one in quotation that allows the prototype interaction “ and because of that, it isn’t working as it should…. If anyone can help me out I’ll really appreciate… I can’t share a screenshot here but literally I can’t just input a value that allows it to work.. thank you
Hmmmm maybe try without the ""? Variables were in Beta still when I filmed so things may have changed since then. 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 😊
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! ☀️🙏🏻💛
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! ☀️🙏🏻
Beyond helpful, thank you so much for sharing your knowledge!
You’re welcome 💛🙏🏼☀️
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* - ua-cam.com/video/X5arGNpdXS0/v-deo.html ☀️🤗
Great! Thank you
as usual amazing tutorial with full energy you are the best teacher with good examples 👃
Thank you! 😃☀️
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! ☀️🙏🏻
I just leveled up! Thank you!
Glad I could help! ☀️🙏🏻
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!
Awesome video, I can't wait to try all these out.
Thanks! 🙏🏻☀️
So Informative Dear... 🥰🥰🥰🥰🥰🥰
🙏🏼☀️
Very clear, nice job
Thanks! ☀️🙏🏻💛
Thanks for the master class 🌹
You are very welcome ☀️🙏🏻💛
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! 🙈
Thank you a lot, this tutorial is just what I needed today 🎉❤❤❤
You're welcome! ☀️🙏🏻💛
It was really useful!!! Big big thanks!!
You're welcome! ☀️🙏🏻💛
Nice! Btw, for the 2nd tutorial on the Intermediate Method, how do you get the 'Continue' CTA to activate when you click on the 3rd checkmark "I would also like to subscribe to the super cool emails"?
Thanks! It's all about using boolean variables and using conditionals to check which of them is set, ☀️🙏🏻💛
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 🤗☀️
Thank you very much! amazing tutorial finally I get it
Glad it helped!☀️🙏🏻💛
Can you do a tut on how to control a Label's highlight for a Map when you mouse over the Map pin? I am sure this is a conditional variable but i'm stumped! :-) I also echo the comments on your teaching skills. You have an easy to follow style and not too slow...!
Great question! Will add to my list ☀️🙏🏻💛
Advanced mode : You can also use the Copy/Paste technique of hovering over the left side of the Prototype Interaction to copy the Set to Fruit and it will use the correct Variable because of the Text field relation. Saves a couple clicks.
Great tip! Figma think of everything! ☀️🙏🏻💛
awesome tuts TD. can you create a tutorial in using variable in filtering ... like the one you do in blog where you filter card topics. The logic is like this but multiple items could appear at once. The challenge is it should be like this where the button is outside the component set. because the way i do it now is button is inside but you managed to pull this off even when buttons are outside.
Hope it made sense.
ooo great idea! Will add to my list !☀️🙏🏻💛
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! 🙏🏻☀️💛
So interesting n amazing. Thank you for your video! verry helpful :3
You're welcome! ☀️🙏🏻💛
I would say, just for best practices and Dev handoff, keep letter case the same. "Yellow" != "yellow"
Great point! 🙏🏻🤗☀️
Thank you! Still struggling to convert from many years of Axure.
It's always so hard to move between software but keep at it and you'll be a Figma expert in no time! ☀️🙏🏻💛
Thank you so much! You are Great and so helpful!
Like your energy!
Subscribed to your channel!
aww thanks! ☀️🙏🏻💛
This works, however i am trying something a little bit complex.
Want to create a filter option by "country flags" by default show all, however when specific country card is selected show only contents of the country type linked and nothing else (i am not getting how to make it show nothing else) and then show all of all is selected once again or and if any other specific country show country card...
I hope this makes sense and you see this soon
Thanks in anticipation
ooo great question! like a little logic puzzle! I think this video will help you achieve what you want - ua-cam.com/video/A1EYkbJIdIQ/v-deo.html . Let me know if not though and I can try and think of a solution! ☀️🙏🏻💛
@TDSunshine Is there a way to have 2 actions on 1 click?
Yes! there is a little + button where you can add another action under the same trigger ☀️🙏🏻💛
@@TDSunshine thank you
The best video!
Thanks! ☀️🙏🏻💛
great tutorial thanks ☀
You're welcome! ☀️🙏🏻💛
This is perfect! Thank you
☀️🙏🏻💛
Thank you Miss Sunshine 🙏
You're welcome! ☀️🙏🏻💛
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 💛🙏🏼☀️
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. ☀️🙏🏼
hey :) just saw your video - looove it. but i have a problem: cant see at "layer" (if i press eye icon to connect it) the variables.... how can i connect table cell to boolean?....
You need to right click on the eye icon. It's such a weird one! I hope that helps ☀️🙏🏻💛
Hi, I cannot assign the local variable to the layer property. There is only the eye icon. By clicking, it simple toggle hide/show. But I would expect the popup with the local boolean variables to select.
You need to right click on the eye :) really silly I know! ☀️🙏🏻💛
@@TDSunshine aaaaaah! Thx 🙏☺️
AMAZING TUTORIAL.
Glad it was helpful! ☀️🙏🏻💛
Great vid thank you!
You're welcome! ☀️🙏🏻
Thank you very very much this peerless information
You're welcome! ☀️🙏🏻
Great tutorial
Thanks! 🙏🏼☀️
became a fan...am i in love???🤔
haha ☀️🙏🏻
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! ☀️
It was very useful!!!
Glad to hear that! ☀️🙏🏻
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! ☀️🤗
Merci beaucoup !
☀️🙏🏻💛
Thanks, I like 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
very very useful
I'm glad! ☀️🙏🏻
is there a way 2 click event in Figma ? or this is the way how to do it.
Hmm what do you mean by 2 click?
@@TDSunshine I mean, I created a tab bar component which in the component it self when I click an item it has a click event, its highlighted with circle around. outside the component when I click each item I want component work properly this means highlighting the selected item, and also I want create a scroll event, when I click an item it goes somewhere in the page. I know maybe it's simple thing but I couldn't figure it out. I can not duplicate the page and prototype because it's a scroll event, it has to work in the page it self.
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.
🙏🏼☀️
oh THANK YOUUUUUUU....lol ....sorry for capslock :)....follow you!
YOUR WELCOME ☀️🙏🏻💛
@@TDSunshine Thank you for your reply. I have one question:
In your first example, "My Alien," what if you add another Aliens component with different colors, such as Grey, Purple, and Green (and add new 3 buttons), but place these three Aliens on a different page? How would you load these new Aliens (from different page) into the original "Simple" container page? Thank you, appreciated for your help.
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
Liberating!
Thanks! ☀️🙏🏻💛
The tutorial itself is great, but for me personally it is a bit too hectic. Need to watch it at 0.5 or slower :D
Sorry if it was a bit fast for you! Glad you found a way to still enjoy ☀️🙏🏻
At first I thought you gonna use conditional to switch between them 😁
Ooo that could be cool! ☀️🙏🏻
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! ☀️💛
Vary a Bull or vary an Ant?
😂😂😂