The best explaination so far regarding the variables I was not able to understand others but your stuff is cool . Im subscribing to your content. Peace!
Hi! Please check: 1 - if you are working with a Variant inside the Component. 2 - if you have any other interactions on this object, there should only be one.
This worked perfectly for me. Thanks Sergei ❤. The only thing was, I used it for my Cart Items and duplicated the counter for the items in the cart But when I click use one counter, all the counters perform the same action How do I make each counter independent from the other
If I need multiple counters, how do I make them count independently? Clicking the "plus" button on one counter seems to trigger the others whether I click them or not. Thanks in advance for any tips/advice!
Hi! Great video, is there a way to duplicate the counter and have them operate separately? I duplicated it and tested it in presentation mode but when I press the "+" button, it triggers both counters. Thanks!
Thanks for the feedback! It is correct. This happens because both counters are using the same variables. Try to make different variables for each counter.
@@Sergei-Chyrkov Thanks! I have 2 counters. Top one starts at 2 and bottom one starts at 0. They can both be adjusted either way. I added a reset button but I cant figure out what interaction will reset the counters to their respective numbers, 2 and 0.
I have just followed this and works great. Only issue I am having is that when I have more than one counter on the same page it is applying to all of them, rather than just the one that is clicked. Is it becasue I made it into a reusable component? If not any soloutions?
Thank you Sergei, because that was a wonderful explanation. Please, I have a question. I copied the final work in 3 copies, and the moment I clicked + on one of the copies, the numbering was added in three layers. How can you fix the numbering of the three layers to be independent, thanks in advance.
Thanks for the tutorial! In addition to this, is it possible to change the minus button to "disabled" (when there's a Disabled variant) state when the number hits 1?
Thanks for feedback! Sure, you need to make a separate “disabled” variant of the component and than add a conditional in prototype to activate “disabled” variant when it hits 1. I hope this helps!😌
Thank you for this! I have a question. When i did this and use various instances, when i click + or - they all change. Do I need to create multiple versions manually or is there a way to duplicate without them all controling each other?
Hey! Thanks for feedback! Yes, since you are changing one specific variable A, which affects another specific variable B, will change all the B variables. In this case you need to make other modes or different variable pairs. I hope this helps!🙌
Hi, I get stuck renaming layers. When I hit Command + R, it just reloads my page. I've scoured the internet on how to get to renaming layers but all the shortcuts does not get me there. Help!
I have a paid plan since the day one, so I’m not sure which features are not available in the free version. If you are working as a designer consider getting Pro lisence, it will make you more money at the end.
Hey!👋 yes, probably you can leave in one AL, but I guess I'm doing automatically because when you will be building it for example in Framer/WebFlow or HTML, I believe you'll will need this extra AL for better structure.
If I'm using multiple counters, how can I make them move independently? Currently, whenever I click the "plus" on one button, it triggers the counter on all my buttons at once.
@@Sergei-Chyrkov I've already implemented a counter for each product catalog, but when I change one counter, all counters change as well. How do I fix this?
@@Sergei-Chyrkov I am creating a product catalog. When the cart is clicked, it changes to a counter, and every product that is clicked shows the same counter number
hello friend, is there a way to make an animations with variants set to switch after a delay and have a frame count when swapped to? i want to make an animation where it plays a loop 5 times and then switches to a variant of the animation for 1 pass. is that possible?
Hey! Yes, I believe you can make it by creating an interactive component and setting after delay with a loop animation there. Check out my other video on my channel about Like Counter, it may help. Good luck!🙌
plz, what can I do when the digit in one card is O and in other cards can be various from 0 to 15 for example? And there are three cards on the screen (like counter of likes): the first has 0 likes, the second has 3 likes and the third has 7 likes. I as a user can add one like each card 🙏It's easy if you start from 0 - everything works correctly, but if you start from any other number it doesn't work. Because it resets the digit to 0 and works from there.
hey! I guess you can have several different values in your variables (e.g. 0, 3, 7), so these will be your starting points for each card. Then you'll have to play around with conditionals and do some Math 😅
He forgot to say that we can only use variables in interactions if only we have premium 🤣🤣
Are you still using free version!?😱😱
😂😂
you explained it soooo well!! super good thx
Glad it was helpful!
I can tell. Figma got the most resourceful and smartest and most innovative people in web app right now.
totally agree with you!🤝
Very concise explanation. Thank you!
Thank you for feedback! Glad you liked it!
well simplified and understood. Thank you.
thanks for the feedback! I'm glad you like it!
Thanks Sergei, With the updates things were a bit different but worked it out anyway. Great lesson I must say!
yes, UI3 is quite different now, maybe I should do an updated video. Thanks for the feedback!
Where do you find the variables icon that was within the text (now typography) box now?
Found it! Way at the top to the left of the Text & link icon
super nice, thanks !
I’m happy you like it!
The best explaination so far regarding the variables I was not able to understand others but your stuff is cool . Im subscribing to your content. Peace!
Thank you for feedback! I’m glad it helped!
thank you so much that's awesome, i like your way it's easy and simple. thank you.👏👏👏🤝🤝
You’re welcome! Glad you like it!
Serezha, thanks a lot!! You're a great teacher!
😅 thank you!!
absolutely amazing video! Fantastic!
Thank you so much! I’m glad you like it!
WOW THANKS this short video made me UNDERSTAND VARIABLES better than 2 hour videos
Thanks for feedback! Glad you like it!
Amassing tutorial thank you 🎉
You’re welcome 😊
Thank you so much
You are welcome!
Thanks a lot! This is awesome:)
Glad you like it!☺️
great video, thank you❤
Glad you enjoyed it!🫶
Thank you Sergei!
Thank you too!
Amazing. Thanks
Glad you liked it!
you can become a great teacher
Thank you so much! I’m working on it!☺️
plz, continue the series. Your content is really great. Can you fix the sound issue? It will be really helpful
Sure, I’ll try! Thank you for your feedback!
@@Sergei-Chyrkov hi , i am not getting the change to option in prototype it is in disable state only
Hi! Please check: 1 - if you are working with a Variant inside the Component. 2 - if you have any other interactions on this object, there should only be one.
This worked perfectly for me. Thanks Sergei ❤.
The only thing was, I used it for my Cart Items and duplicated the counter for the items in the cart
But when I click use one counter, all the counters perform the same action
How do I make each counter independent from the other
Thanks for feedback! Thi happens, because this is the same component with variables. Try to make a separate component for other design elements.
Hi, I wanted to define some colours as variables. When I press a colour button it should change the app background colour. How can we do it?
Hi! Apply color variable to background color, then use conditional to change one color variable to another
You could skip a few steps with the conditional :) But Thank You that was very helpful!
Glad it helped!
If I need multiple counters, how do I make them count independently? Clicking the "plus" button on one counter seems to trigger the others whether I click them or not. Thanks in advance for any tips/advice!
Hey!👋 it is a great question. The problem it that your using the same variable for all counters. Try to make separate variables for other counters.
@@Sergei-Chyrkov do you mean, creating the whole thing all over again?
Unfortunately you have to make separate component and you different variables, so they don’t interact with each other
Hi! Great video, is there a way to duplicate the counter and have them operate separately? I duplicated it and tested it in presentation mode but when I press the "+" button, it triggers both counters. Thanks!
Ah, just saw another comment about adding another variable and using the new one for each counter. THANK YOU!!!!!
Thanks for the feedback! It is correct. This happens because both counters are using the same variables. Try to make different variables for each counter.
@@Sergei-Chyrkov Thanks! I have 2 counters. Top one starts at 2 and bottom one starts at 0. They can both be adjusted either way. I added a reset button but I cant figure out what interaction will reset the counters to their respective numbers, 2 and 0.
hi! try to use variables as a starting point and set the conditional to equal these variables so that number will not go lower than the number.
08:45 the separate set variable is not available for the free Figma version so what will I do?
I guess you’ll need to get a Pro license … 🙂
@@Sergei-Chyrkov That's sad 😢, is there any other possible way?
unfortunately )
I have just followed this and works great. Only issue I am having is that when I have more than one counter on the same page it is applying to all of them, rather than just the one that is clicked. Is it becasue I made it into a reusable component? If not any soloutions?
Yes exactly, that’s because you are using same variables and component in all cases. Try to set up different variables for each case.
@@Sergei-Chyrkov makes sense, thanks for the reply
you are welcome!
Nice and simple to understand the whole process, i was asking for local variants for individual who are using free plan in figma how can we use that?
thanks for feedback! I think on a free plan you can only use one mode.
Thank you Sergei, because that was a wonderful explanation. Please, I have a question. I copied the final work in 3 copies, and the moment I clicked + on one of the copies, the numbering was added in three layers. How can you fix the numbering of the three layers to be independent, thanks in advance.
Hey! Correct, you need to make different variables for each case, because Figma sees it like one same component.
Thanks for the tutorial! In addition to this, is it possible to change the minus button to "disabled" (when there's a Disabled variant) state when the number hits 1?
Thanks for feedback! Sure, you need to make a separate “disabled” variant of the component and than add a conditional in prototype to activate “disabled” variant when it hits 1. I hope this helps!😌
Thank you for this! I have a question. When i did this and use various instances, when i click + or - they all change. Do I need to create multiple versions manually or is there a way to duplicate without them all controling each other?
Hey! Thanks for feedback! Yes, since you are changing one specific variable A, which affects another specific variable B, will change all the B variables. In this case you need to make other modes or different variable pairs. I hope this helps!🙌
@@Sergei-Chyrkov thank you!
You are welcome!
Hi, I get stuck renaming layers. When I hit Command + R, it just reloads my page. I've scoured the internet on how to get to renaming layers but all the shortcuts does not get me there. Help!
Hey! I guess this happens because you are using Figma in your browser. Try to do it in Figma App, it should work.
May I ask you to add text to the video if the variable animation is paid
I have a paid plan since the day one, so I’m not sure which features are not available in the free version. If you are working as a designer consider getting Pro lisence, it will make you more money at the end.
Hi. At around 5:35s, why did you add a second auto layout? The minus, plus and O were already in auto layout. Thanks!
Hey!👋 yes, probably you can leave in one AL, but I guess I'm doing automatically because when you will be building it for example in Framer/WebFlow or HTML, I believe you'll will need this extra AL for better structure.
I used this and when you put multiple counters in a frame, they all do the same thing. How can I get them to work indvidually?
That’s correct because you use the same component and variables. Try to use different variables for each component.
Why don't I get the addition action ? any hidden trick ?
What do you mean by additional action?
If I'm using multiple counters, how can I make them move independently? Currently, whenever I click the "plus" on one button, it triggers the counter on all my buttons at once.
yeah thats kinda annoying
true, this is because you are using one component. Try to use separate variables for each counter.
if i am not wrong, setting multiple variables is available only on the paid version of Figma, is that true?
Yes, to use multiple "Modes" you need to have Pro License
How to disable the minus button or make it unclickable when the number shows 1?
You should make a conditional to show disable state of the component when a variable equals to 1.
@@Sergei-Chyrkov I've already implemented a counter for each product catalog, but when I change one counter, all counters change as well. How do I fix this?
@@Sergei-Chyrkov I am creating a product catalog. When the cart is clicked, it changes to a counter, and every product that is clicked shows the same counter number
Correct, that’s because the component uses the same variables. You should either create a separate component or use separate variables.
Why I can’t choose “change to” option
Check if you are using Variants of one component, not 2 separate components
@ but they’re in the same frame right?
8:34 from here you need a subscription to continue
Correct
hello friend, is there a way to make an animations with variants set to switch after a delay and have a frame count when swapped to?
i want to make an animation where it plays a loop 5 times and then switches to a variant of the animation for 1 pass. is that possible?
Hey! Yes, I believe you can make it by creating an interactive component and setting after delay with a loop animation there. Check out my other video on my channel about Like Counter, it may help. Good luck!🙌
bro thank you but you did say its premium earlier
Thank you! I don’t know if it is paid feature, because I have Pro plan from the day one😅
plz, what can I do when the digit in one card is O and in other cards can be various from 0 to 15 for example? And there are three cards on the screen (like counter of likes): the first has 0 likes, the second has 3 likes and the third has 7 likes. I as a user can add one like each card 🙏It's easy if you start from 0 - everything works correctly, but if you start from any other number it doesn't work. Because it resets the digit to 0 and works from there.
hey! I guess you can have several different values in your variables (e.g. 0, 3, 7), so these will be your starting points for each card. Then you'll have to play around with conditionals and do some Math 😅
tell me shortcut
CMD+R for Mac and CTRL+R for Win
3:21 come again plz..i using laptop not MAC
try CTRL+R
corrijo, estas usando windows no mac. la tecla Cmd es Crtl en Windows
Thank you)))
it's not for free this variable
yes some of the features are only available on the paid licenses
This is variable??🤨
yes) local variables)
How can we get the paid version for free😂
That is a good question!🤔😅
@@Sergei-Chyrkov 😂 really ...there are so many features which is not in free version😣😢😭
well that's life😅 are you doing your work for free?) probably no, so you have to pay for your tools)
se necesita Figma de pago para implementar este tipo de funciones en los prototipos, pero gracias por enseñarnos
Unfortunately yes, some functionality is limited in a free license version