I'm designing a robust condition builder component for quite some time. It has always been an issue to prototype it in code, because of the complexity and time demand from our devs. I am grateful that I can now try out the variable within Figma! I want to learn more about the limits of the tool, as my component is an advanced condition builder, utilizing Nth grandchildren, calculation, various operators between conditions and condition sets.
:( We are using this program at Full Sail University. We are working on our final project. I can't follow along this video because you have to be pro to add more interactions. It would be nice for students to get PRO while we learn.
Amazing stuff folks. Wish it worked in nested components though. Also, is there a way to make the "navigate to" action only work when the continue CTA is switched to the available state? :) Many thanks.
Great video. It helped me. I would like to know how I can put restrictions on the selection of topics in onboarding, if I only need 3 topics for example.
Hi, here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1-99&mode=design&t=SfiUK2mpsQkJpvwO-0
This is a great tutorial, but I have a question: what if you give the user a maximum of 3 topics to choose from, and the logic doesn't seem to support multiple IFs?
Hi, you should be able to do it! Here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1%3A99&mode=design&t=I749Bd5rRp20ujQH-1
That's correct! For the purpose of the tutorial, we want to showcase how you can use string variables in prototyping. Feel free to use a boolean variable for your prototypes.
how do use use the code, strings, boolean variables etc to make a TOGGLE where only one can e selected and the other shut off? I can't find an answer for this anywhere!!
Make your interactive variants be able to interact cross different variant sets. For example i need to change my tumbler layer, and i make states of this tumbler in one variant set, and then i add this variant to another variant, and i want do interaction to change nested variant from another variant set by click on some frame on high layer with this nested variant. And this will change only nested variant in variant. Now i have to make a lot of states of high layer variant and swap nested instances in them, but if you add this feature i can make just one high layer variant, and by interaction to other set with used nested instance from them change my high layer variant without making additional variants of it, just change nested variants by interactions, like change to. Now i cant do this, i only can change to variant from set, layer from which variant i used to make interaction. It makes a lot of unnecessary work. I just need click on layer in variant from one set and make interaction to another set variant to change nested variants quick, without a lot of components with swapped instances
how came the contents automatically goes up the screen even if they are initially placed all the way below? like the food frame, if you select its category then in the next window it will show up automatically in your viewport even if it is originally placed at the bottom of the frame where you need to scroll down before seeing. Thank you for your answers
How do i check for two conditions in other for the button to be active.. i.e: 4 input Field selected and a Checkbox True, before button becomes active. i pray you understands my jagorns.. 😢😢
This is OK, but shouldn’t things like Boolean variables be applicable at a higher level? Like, for the similar characteristics of each variant? One button component, one Boolean variable. Not one for each actual button.
I am totally agree. I have only nested buttons that are parts of the cards or sidebar or pop-ups, so for now it is impossible to assign a variable to the nested button that a part of something else. So for now variables are totally useless. But I hope Figma are working on its next update that alow to use variables for nested components. And in this case it will be real breakthrough. We are waiting for this.
Yep , just managed to get it all working, but I want the form and a conditional button state to work within a nested component and it breaks. Amazing though.
@figma How can engineers see the handoff specs for the cards in the 'Homepage' when they are hidden and only become visible in the prototype when the user selects a topic?
It is a nightmare trying to teach myself how to prototype with the new UI, when all the help videos are made with the old UI. Please make updated videos!!!
I added a "return" button at the "homepage" to return to the "get started" page, if I use the Skip button at the start and then return, I want all the options to reset but instead, I end up with all the options remaining selected, I also want the options I selected to remain selected after returning when I decide to not use Skip. So how would I achieve this?
I believe you need to check "Reset component states" on your Navigate to action, and also reset the values of all variables that are not attached to a component state to their initial value.
And it is bad approach to hide content in Edit mode because managerers that are looking that page are don't understant that page is ready and filled because they see nothing. And duplicating the same pages with hide and unhide content increases memory using and leads to warning that memory is not enough. So better to avoid duplicating pages. So it is better to show all content in Edit mode for managers but in Presentation to hide that are not required.
Video is good, but with this method we reduced the number of screens but increased the number of Local Components. Which is good for smaller flows, but entire App to be prototyped will be true mess again 😟
Figma, please make better tutorials. You show us how to do stuff, but you skip over a lot of steps (because they are already done) and you don't explain why you're doing what you're doing, so it makes it hard to transfer the logic to our own designs.
Hello, thanks for the feedback! You can grab a copy of the Community file in the description to follow along with the tutorial. Hopefully that will help you understand the concepts/logic better.
Figma is the greatest design tool ever created. Thank you, Figma!
I'm designing a robust condition builder component for quite some time. It has always been an issue to prototype it in code, because of the complexity and time demand from our devs. I am grateful that I can now try out the variable within Figma! I want to learn more about the limits of the tool, as my component is an advanced condition builder, utilizing Nth grandchildren, calculation, various operators between conditions and condition sets.
just started experimenting with variables, this video really helped to show what variables can do and the extend of use. well made
Will be hard to master, but can save so much time in prototyping later, nice job
Your tutorials and product are incredible. I'm not a designer but Figma is slowly changing that.
I love these tutorials. They're soo....soft 😊
you guys are just amazing, and here I thought variables are hard.
Awesome Tutorial. Thanks a lot!
Boy do I Love my conditionals ❤ just need more MODES. 4 is just not enough 😂
Best tutorial for this topic out there. Keep 'em coming! Great narration, awesome tips. Very clear and concise
amazing! thank you :)
Looks great, thank you for sharing. It will save a lot of time regarding app prototyping. Please continue to share this kind of practical insights :)
Thank you for sharing this, it saved my day.
Amazing. Thanks guys
:( We are using this program at Full Sail University. We are working on our final project. I can't follow along this video because you have to be pro to add more interactions. It would be nice for students to get PRO while we learn.
Hi, students can use the Figma Pro plan for free. You can verify your student status here: www.figma.com/education/apply
u can apply for student pro account for free, just upload your id and u will get it in 5-15 minutes
Amazing stuff folks. Wish it worked in nested components though. Also, is there a way to make the "navigate to" action only work when the continue CTA is switched to the available state? :) Many thanks.
Hi, you should be able to achieve that by adding a nested "Navigate to" action inside a Conditional action!
Can't do it unless I buy Figma Pro? rip
Great video. It helped me. I would like to know how I can put restrictions on the selection of topics in onboarding, if I only need 3 topics for example.
Hi, here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1-99&mode=design&t=SfiUK2mpsQkJpvwO-0
This is a great tutorial, but I have a question: what if you give the user a maximum of 3 topics to choose from, and the logic doesn't seem to support multiple IFs?
Hi, you should be able to do it! Here is a quick exploration that I did with max 3 topics selection: www.figma.com/file/bXSH8MNBFyZ71Dn6mBKwzg/Prototype-with-variables-(with-3-max-selection)?type=design&node-id=1%3A99&mode=design&t=I749Bd5rRp20ujQH-1
Random question! What software did you use to create the animated illustrations you showed here? Particularly at 8:50?
instead of applying the string variable to the variant, couldn't have she applied a boolean property to visibility instead? Would it work the same?
thanks for great tutorial ❤❤
Why are you using a string for what is essentially supposed to be handled by a boolean? There's only really two values right?
That's correct! For the purpose of the tutorial, we want to showcase how you can use string variables in prototyping. Feel free to use a boolean variable for your prototypes.
Can you suggest a good video for understanding variables? I don’t get them at all
how do use use the code, strings, boolean variables etc to make a TOGGLE where only one can e selected and the other shut off? I can't find an answer for this anywhere!!
Make your interactive variants be able to interact cross different variant sets. For example i need to change my tumbler layer, and i make states of this tumbler in one variant set, and then i add this variant to another variant, and i want do interaction to change nested variant from another variant set by click on some frame on high layer with this nested variant. And this will change only nested variant in variant. Now i have to make a lot of states of high layer variant and swap nested instances in them, but if you add this feature i can make just one high layer variant, and by interaction to other set with used nested instance from them change my high layer variant without making additional variants of it, just change nested variants by interactions, like change to. Now i cant do this, i only can change to variant from set, layer from which variant i used to make interaction. It makes a lot of unnecessary work. I just need click on layer in variant from one set and make interaction to another set variant to change nested variants quick, without a lot of components with swapped instances
Well the list scrolls before assigning them variables but after assigning local variables and selecting specific topics the list isnt scrolling
Hi, I have a problem with button state. Even if I follow the steps, button always allows to go to the homepage. How to fix it?
how came the contents automatically goes up the screen even if they are initially placed all the way below? like the food frame, if you select its category then in the next window it will show up automatically in your viewport even if it is originally placed at the bottom of the frame where you need to scroll down before seeing. Thank you for your answers
That's because the content are inside an auto layout frame.
@@Figma I see, thank you so much!
Nice_ 😍
Can you please upload the output
How do i check for two conditions in other for the button to be active.. i.e: 4 input Field selected and a Checkbox True, before button becomes active.
i pray you understands my jagorns.. 😢😢
Hi, you can use the symbol "and" in your conditional action to check for two conditions.
This is OK, but shouldn’t things like Boolean variables be applicable at a higher level? Like, for the similar characteristics of each variant? One button component, one Boolean variable. Not one for each actual button.
The option multiple action is now paid what should I do 😭
The ideas of the latest features are good but realization is terrible. After these months I still can’t say that features are user friendly
Agree, it is becoming complicated!
It used to be "inch by inch anything is a cinch" pause, rewind, play again. Carpal tunnel anyone?
This really is almost useless until we can assign variables to nested components, not only the ones embedded in top level frames. 🤦♂️
I am totally agree. I have only nested buttons that are parts of the cards or sidebar or pop-ups, so for now it is impossible to assign a variable to the nested button that a part of something else.
So for now variables are totally useless.
But I hope Figma are working on its next update that alow to use variables for nested components.
And in this case it will be real breakthrough. We are waiting for this.
Yep , just managed to get it all working, but I want the form and a conditional button state to work within a nested component and it breaks. Amazing though.
@czerskip @raynifrozen @thetrailhunter4469 Good news! We just released some updates on variables, and now you can bind variables to nested instances.
@figma How can engineers see the handoff specs for the cards in the 'Homepage' when they are hidden and only become visible in the prototype when the user selects a topic?
Hi, this prototype is built for user testing! I would share a different file with the design specs with the developers.
@@Figma Thanks.
@@FigmaThat's ridiculous… 🤦♂️
It is a nightmare trying to teach myself how to prototype with the new UI, when all the help videos are made with the old UI. Please make updated videos!!!
I added a "return" button at the "homepage" to return to the "get started" page, if I use the Skip button at the start and then return, I want all the options to reset but instead, I end up with all the options remaining selected, I also want the options I selected to remain selected after returning when I decide to not use Skip. So how would I achieve this?
I believe you need to check "Reset component states" on your Navigate to action, and also reset the values of all variables that are not attached to a component state to their initial value.
Nothing on how slow and unresonsive figma becomes with more than 2 conditional interactions
I was stuck in the set variable part😖I set the variable and conditional stuff but it's just not works
I can't help myself with the it also, I can't find the variables Created in the edit panel
try to set variant values to only "true" or "false" (boolean value) others like "uncheck" and "check" for instances will not work.
@@khantminthu4025 thank you so much!
And it is bad approach to hide content in Edit mode because managerers that are looking that page are don't understant that page is ready and filled because they see nothing.
And duplicating the same pages with hide and unhide content increases memory using and leads to warning that memory is not enough. So better to avoid duplicating pages.
So it is better to show all content in Edit mode for managers but in Presentation to hide that are not required.
Video is good, but with this method we reduced the number of screens but increased the number of Local Components. Which is good for smaller flows, but entire App to be prototyped will be true mess again 😟
Figma, please make better tutorials. You show us how to do stuff, but you skip over a lot of steps (because they are already done) and you don't explain why you're doing what you're doing, so it makes it hard to transfer the logic to our own designs.
Hello, thanks for the feedback! You can grab a copy of the Community file in the description to follow along with the tutorial. Hopefully that will help you understand the concepts/logic better.