How to create a counter using local variables in Figma | Tutorial

In this Figma Tutorial I'll show you how design a dynamic counter using variables! In this video, I'll guide you through the process of creating an engaging counter design in Figma, utilizing the power of variables and conditionals to add flexibility and interactivity to your projects. Whether you're new to Figma or looking to expand your design skill set, this tutorial is tailored to meet your needs.
👉 Link to file: www.buymeacoffee.com/sergeich...
______________________________
🎁 Book a free (limited time only) mentor session with me on ADPlist: adplist.org/mentors/sergei-ch...
______________________________
My links ⬇️
▸ My website - sergeichyrkov.com
▸ My studio - chyrkov.studio
▸ Twitter - / sergeichyrkov
▸ Instagram - / chyrkov
▸ Behance - www.behance.net/chyrkov
▸ Linkedin - / sergeichyrkov
🎶 www.epidemicsound.com/referra... - best service for royalty free music, use the link to get 30 days for free.
📝 Timecode:
00:00 - intro
00:18 - how to design a counter
03:32 - how to create components
06:40 - how to use variables
08:15 - adding variables to prototype
10:04 - how to use conditionals
11:20 - result
-----
#figma #figmatutorial #figmatips #webdesign #uxui

Пікірлер: 84

  • @Charlie_Bucks
    @Charlie_Bucks4 ай бұрын

    well simplified and understood. Thank you.

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    4 ай бұрын

    thanks for the feedback! I'm glad you like it!

  • @lottari3682
    @lottari36826 ай бұрын

    absolutely amazing video! Fantastic!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    6 ай бұрын

    Thank you so much! I’m glad you like it!

  • @m7280
    @m7280Ай бұрын

    Serezha, thanks a lot!! You're a great teacher!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    😅 thank you!!

  • @muhammadfadhil6729
    @muhammadfadhil67299 ай бұрын

    Very concise explanation. Thank you!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    Thank you for feedback! Glad you liked it!

  • @xiconi4300
    @xiconi43002 ай бұрын

    Thank you Sergei!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    2 ай бұрын

    Thank you too!

  • @BlazinglyPassionateHuman
    @BlazinglyPassionateHumanАй бұрын

    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!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    Thank you for feedback! I’m glad it helped!

  • @KarinaPopa-fi4fr
    @KarinaPopa-fi4fr3 ай бұрын

    super nice, thanks !

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    I’m happy you like it!

  • @pravinmahadik407
    @pravinmahadik4073 ай бұрын

    Amazing. Thanks

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    Glad you liked it!

  • @nikyabodigital
    @nikyabodigitalАй бұрын

    I can tell. Figma got the most resourceful and smartest and most innovative people in web app right now.

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    totally agree with you!🤝

  • @sanzy5004
    @sanzy500417 күн бұрын

    Thanks a lot! This is awesome:)

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    16 күн бұрын

    Glad you like it!☺️

  • @user-mf7mc2px8t
    @user-mf7mc2px8t9 ай бұрын

    you can become a great teacher

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    Thank you so much! I’m working on it!☺️

  • @RiyaBiswas-pq1xo
    @RiyaBiswas-pq1xo10 ай бұрын

    plz, continue the series. Your content is really great. Can you fix the sound issue? It will be really helpful

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    10 ай бұрын

    Sure, I’ll try! Thank you for your feedback!

  • @devakichandrika3516

    @devakichandrika3516

    9 ай бұрын

    @@Sergei-Chyrkov hi , i am not getting the change to option in prototype it is in disable state only

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    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.

  • @ujenezanicolepaola2212
    @ujenezanicolepaola2212Ай бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    thanks for feedback! I think on a free plan you can only use one mode.

  • @Strawberrypiecream
    @StrawberrypiecreamАй бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    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!😌

  • @gulagbois
    @gulagboisАй бұрын

    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.

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    Hey! Correct, you need to make different variables for each case, because Figma sees it like one same component.

  • @levonarmenian
    @levonarmenian7 ай бұрын

    Hi. At around 5:35s, why did you add a second auto layout? The minus, plus and O were already in auto layout. Thanks!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    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.

  • @gamebones9865
    @gamebones98656 ай бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    6 ай бұрын

    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!🙌

  • @gamebones9865

    @gamebones9865

    6 ай бұрын

    @@Sergei-Chyrkov thank you!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    4 ай бұрын

    You are welcome!

  • @MyeshaBennettDesigns
    @MyeshaBennettDesigns4 ай бұрын

    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!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    4 ай бұрын

    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.

  • @Steezy967
    @Steezy9673 ай бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    Yes exactly, that’s because you are using same variables and component in all cases. Try to set up different variables for each case.

  • @Steezy967

    @Steezy967

    3 ай бұрын

    @@Sergei-Chyrkov makes sense, thanks for the reply

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    you are welcome!

  • @sarahcooper2719
    @sarahcooper271912 күн бұрын

    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!

  • @sarahcooper2719

    @sarahcooper2719

    12 күн бұрын

    Ah, just saw another comment about adding another variable and using the new one for each counter. THANK YOU!!!!!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    11 күн бұрын

    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.

  • @sarahcooper2719

    @sarahcooper2719

    11 күн бұрын

    @@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.

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    6 күн бұрын

    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.

  • @TheEXmasterwrecker
    @TheEXmasterwrecker7 ай бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    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!🙌

  • @pranav8391
    @pranav83917 ай бұрын

    08:45 the separate set variable is not available for the free Figma version so what will I do?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    I guess you’ll need to get a Pro license … 🙂

  • @pranav8391

    @pranav8391

    7 ай бұрын

    @@Sergei-Chyrkov That's sad 😢, is there any other possible way?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    unfortunately )

  • @Rolz
    @Rolz3 ай бұрын

    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!

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    Hey! I guess this happens because you are using Figma in your browser. Try to do it in Figma App, it should work.

  • @MyeshaBennettDesigns
    @MyeshaBennettDesigns4 ай бұрын

    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.

  • @FPSZeb

    @FPSZeb

    4 ай бұрын

    yeah thats kinda annoying

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    true, this is because you are using one component. Try to use separate variables for each counter.

  • @user-jl8ee8om4q
    @user-jl8ee8om4qАй бұрын

    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?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    Ай бұрын

    That’s correct because you use the same component and variables. Try to use different variables for each component.

  • @hellsbell365
    @hellsbell3653 ай бұрын

    if i am not wrong, setting multiple variables is available only on the paid version of Figma, is that true?

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    3 ай бұрын

    Yes, to use multiple "Modes" you need to have Pro License

  • @gteja9765
    @gteja97652 ай бұрын

    He forgot to say that we can only use variables in interactions if only we have premium 🤣🤣

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    2 ай бұрын

    Are you still using free version!?😱😱

  • @soldier4082
    @soldier40829 ай бұрын

    tell me shortcut

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    CMD+R for Mac and CTRL+R for Win

  • @user-kl8mu1eb4d
    @user-kl8mu1eb4d8 ай бұрын

    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.

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    8 ай бұрын

    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 😅

  • @soldier4082
    @soldier40829 ай бұрын

    This is variable??🤨

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    yes) local variables)

  • @landrland6471
    @landrland64718 ай бұрын

    it's not for free this variable

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    8 ай бұрын

    yes some of the features are only available on the paid licenses

  • @soldier4082
    @soldier40829 ай бұрын

    3:21 come again plz..i using laptop not MAC

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    9 ай бұрын

    try CTRL+R

  • @disoin.studio

    @disoin.studio

    8 ай бұрын

    corrijo, estas usando windows no mac. la tecla Cmd es Crtl en Windows

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    4 ай бұрын

    Thank you)))

  • @soniakhansohailkhan3035
    @soniakhansohailkhan30357 ай бұрын

    How can we get the paid version for free😂

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    That is a good question!🤔😅

  • @soniakhansohailkhan3035

    @soniakhansohailkhan3035

    7 ай бұрын

    @@Sergei-Chyrkov 😂 really ...there are so many features which is not in free version😣😢😭

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    7 ай бұрын

    well that's life😅 are you doing your work for free?) probably no, so you have to pay for your tools)

  • @disoin.studio
    @disoin.studio8 ай бұрын

    se necesita Figma de pago para implementar este tipo de funciones en los prototipos, pero gracias por enseñarnos

  • @Sergei-Chyrkov

    @Sergei-Chyrkov

    8 ай бұрын

    Unfortunately yes, some functionality is limited in a free license version