Was trying to watch a Figma tutorial about booleans and variables, which wasn't helpful in any way what so ever. Their explanation was rubbish, their follow along figma file outdated and you didn't really learn anything from it, because they had already done all the things you were supposed to be doing with them. In three minutes (some of which was the intro), you helped me understand what I spend hours trying to understand last night... THANK YOU!!
Thank you for this! My issue is that I have various dropdowns (created groups in variables for these) in the table, and as it is a table, the same dropdown is repeated in each row, so when I change one, it changes all of them (I used text variables). And what I wanted from the filter was for it to change according the changed filters in the table, so if a user updated one of the dropdowns in the table and then used the filter, it would recognise the text used. Also, I can't (or haven't found a way to) use change to in a table, because the dropdown options get cut, so I used overlay, but when I click out of it the dropdown goes back to it’s initial state.
is there a way to have the text in the text field container change and add a hover state applied to the selected menu item while still filtering the content using variables?
Amazing! but in the second part where do you explain the states of the component? I can't find in the video the explanation on how create the hover default and selected option 🥲 I've done all the steps. looking nice but you didn't explain how to create the properties for the states, or at least I couldn't find them. Thanks :)
Very helpful! Thanks for the tutorial videos. But I wanna know what if there are lots of items which needs pagination to control below them? How can I make the dropdown filters on the top and the pagination on the bottom work together? Thanks a lot!
Thanks for sharing, my issue now is I can not write expressions, that is change values of variables from true to false, any idea what I might be wrong please?
Hi @AMDesignAndDev, when I click the filtering from the drop down say Car, it does filter but it leaves gaps where the other blocks have been made false, the ones which are in true state do not stack underneath each other. How do I make them stack underneath each other? I'm using a list view were as you are using grid view in your example
Thanks for this tutorial. It was a great exercise. I tried to replicate this, and the first part went okay, but getting it to work with the different "selected" state variants using only variables seems kind of impossible. The whole point why Figma introduced variables seems to reduce the number of variants, yet it's not so easy to achieve a prototype using mostly variables.
Thanks for sharing this! Here's the next challenge I'm trying to figure out: what if I want to filter for multiple categories? Click on cars -> shows only cars. Then click on bikes -> shows cars AND bikes. If I click again to deselect, hide the category I've deselected. But if I deselect everything, it should show ALL of them again. Any thoughts? I haven't quite figured out how to get Figma to do it!
Thanks for sharing, my issue now is I can not write expressions, that is change values of variables from true to false, any idea what I might be wrong please?
Hi, could it be possible to make a reusable interactive dropdown? To avoid repeating the dropdown a lot of times with different options, and just use the same changing the content of the text only. I found a problem when reusing components that in the prototype mode if I change a text on the instance in the animation it returns to the parent content.
Thanks for the tutorial! When testing the interaction, it works correctly when I click the first time, but for example, after clicking car, if I click ALL or Bike, it shows nothing. It seems it is filtering just the first time I click. Could you please let me know what the issue could be?
@@TheRealFrancesM Hi! I wasn't able to fix it, therefore i didn't use this option for my prototype. I just created the screens for each filtering option. I know, not the best way but I didn`t find a solution and it took me less time than trying to fix it.
@@gabypino407 & @FrancesMunoz-go7kw you have to set variable to true for each option for example for Car set variable to true then it will work even though by default it is true but it will work. Also the second example which is shown can be achieved through string variables like when you select Car from the option, All will change to Car and so on. Let me know if it helped.
So if there is a lot of dropdown with different filter content, we need to do this for each dropdown, is it true ? Or there is another way to simplified it ?
I think its true, unless Figma decides to improve their variables. But Figma was never an actual tool to build fully realistic prototypes to begin with.
We can't, as we can't hide items using text conditionals. Figma ain't that powerful right now. You can only toggle visibility of layers with boolean variables. I know, it sucks.
Here's my twitter profile:
twitter.com/AsaadMahmood5
Ask me any questions on the post itself or drop a message.
And do follow as well.
Thank you so much for this tutorial. You done in details
@@UIUXwithayasha is there any way to have each object set to more than one variable for example a product that has variables of both size and price
thanks,
is there a way to combine multiple filters? to bind multiple variables to an element in figma?
Was trying to watch a Figma tutorial about booleans and variables, which wasn't helpful in any way what so ever. Their explanation was rubbish, their follow along figma file outdated and you didn't really learn anything from it, because they had already done all the things you were supposed to be doing with them.
In three minutes (some of which was the intro), you helped me understand what I spend hours trying to understand last night... THANK YOU!!
I am glad I was of help!
@@AMDesignAndDev thanks! I watched some Figma tutorials and now it's called "Aparience" no longer "Layer" that's why I couldn't find it.
Thank you, amazing! :)
Thank you very much.
very useful.
Hello... this video was very helpful..but i think it figmas glitch.. the value selected in filter doesn't reflect in the list in the proto
Thank you for this! My issue is that I have various dropdowns (created groups in variables for these) in the table, and as it is a table, the same dropdown is repeated in each row, so when I change one, it changes all of them (I used text variables). And what I wanted from the filter was for it to change according the changed filters in the table, so if a user updated one of the dropdowns in the table and then used the filter, it would recognise the text used. Also, I can't (or haven't found a way to) use change to in a table, because the dropdown options get cut, so I used overlay, but when I click out of it the dropdown goes back to it’s initial state.
My filter was not working, but I was able to fix it! Thanks a lot for the tutorial.
is there a way to have the text in the text field container change and add a hover state applied to the selected menu item while still filtering the content using variables?
Amazing! but in the second part where do you explain the states of the component? I can't find in the video the explanation on how create the hover default and selected option 🥲 I've done all the steps. looking nice but you didn't explain how to create the properties for the states, or at least I couldn't find them. Thanks :)
Very helpful! Thanks for the tutorial videos. But I wanna know what if there are lots of items which needs pagination to control below them? How can I make the dropdown filters on the top and the pagination on the bottom work together? Thanks a lot!
Thanks for sharing, my issue now is I can not write expressions, that is change values of variables from true to false, any idea what I might be wrong please?
Why not set a text variable when selecting the applicable selection from the dropdown to propagate into the field.
Hi @AMDesignAndDev, when I click the filtering from the drop down say Car, it does filter but it leaves gaps where the other blocks have been made false, the ones which are in true state do not stack underneath each other. How do I make them stack underneath each other? I'm using a list view were as you are using grid view in your example
Can you share your file?
Thanks for this tutorial. It was a great exercise. I tried to replicate this, and the first part went okay, but getting it to work with the different "selected" state variants using only variables seems kind of impossible. The whole point why Figma introduced variables seems to reduce the number of variants, yet it's not so easy to achieve a prototype using mostly variables.
Does this have no smart animate?
I dont have the option layer in the right panel...
You can share your figma file, I can have a look.
Thanks for sharing this! Here's the next challenge I'm trying to figure out: what if I want to filter for multiple categories? Click on cars -> shows only cars. Then click on bikes -> shows cars AND bikes. If I click again to deselect, hide the category I've deselected. But if I deselect everything, it should show ALL of them again. Any thoughts? I haven't quite figured out how to get Figma to do it!
I'll create a video on it :)
Created the video:
th-cam.com/video/uBCyA5Oz_eY/w-d-xo.html
Thanks for sharing, my issue now is I can not write expressions, that is change values of variables from true to false, any idea what I might be wrong please?
Hi, could it be possible to make a reusable interactive dropdown? To avoid repeating the dropdown a lot of times with different options, and just use the same changing the content of the text only. I found a problem when reusing components that in the prototype mode if I change a text on the instance in the animation it returns to the parent content.
Yes, that's easy, we can create text values and link them to the component.
@@AMDesignAndDev thanks, where can I found a tutorial with that? There are no tutorials that show essentially that reusable functionality
Thanks for the tutorial! When testing the interaction, it works correctly when I click the first time, but for example, after clicking car, if I click ALL or Bike, it shows nothing. It seems it is filtering just the first time I click. Could you please let me know what the issue could be?
Hi Gaby, I was wondering how you fixed this issue. I am running into it as well. Would you be able to share the solution?
@@TheRealFrancesM Hi! I wasn't able to fix it, therefore i didn't use this option for my prototype. I just created the screens for each filtering option. I know, not the best way but I didn`t find a solution and it took me less time than trying to fix it.
@@gabypino407 & @FrancesMunoz-go7kw you have to set variable to true for each option for example for Car set variable to true then it will work even though by default it is true but it will work. Also the second example which is shown can be achieved through string variables like when you select Car from the option, All will change to Car and so on. Let me know if it helped.
So if there is a lot of dropdown with different filter content, we need to do this for each dropdown, is it true ? Or there is another way to simplified it ?
I think its true, unless Figma decides to improve their variables.
But Figma was never an actual tool to build fully realistic prototypes to begin with.
good video, but sometimes your video is in the way so we can't see, what you did with the pane one the right
Thanks for the feedback, I'll try to make it smaller in upcoming videos.
Couldn't you just use a text variable for "Filter items" and set it to "Car", "Bike" or "Bus"? Then you only need a single component.
We can't, as we can't hide items using text conditionals.
Figma ain't that powerful right now.
You can only toggle visibility of layers with boolean variables.
I know, it sucks.
thank you for your video, i'll be appreciated if you could speak bit slower
confusing
@@digitalninja6 very confusing