Can I create a button, when the button be pressed, the number goes up continuely, while when the press be released, the number stops?

Can I create a button, when the button be pressed, the number goes up continuely, while when the press be released, the number stops?

Hi @Zhao_Yang

Yes you can !
Basically it requires the use of two components and a variable (let call it count)

Counter component

This one is simple, it has two state witch are the same

  1. Create a text layer
  2. assign the count variable to it.
  3. Then go to the interaction panel (Shift+E) and add a new after delay interaction (I put a delay of 100ms that will defined the speed of the count growing)
  4. set the variable count to count + 1
  5. add a change to action and set it up to go to the other variant
  6. repeat from 1 to 5 for the other variant

Having two similar variant is a tricks to connect the component to each other and force the count variable to update

Button component

The button need to have two states pressed and released :

  • The pressed one as two text layers in it and … that’s it
  • The released one as one text layers and an instance of the counter component (previously defined above)
    The interaction between those two states are really simple :
  • pressedreleased : add a “mouse down” interaction
  • releasedpressed : add a “mouse up” interaction

and that’s it.

Now you have a component that will goes up continually when pressed and stop when released.

Let me know if it helped!

You can also embed the functionality into the buttons like in this example, but the counter component by @Haroll is also a neat way to do it since it’s more modular.

1 Like

Thanks Haroll, I will try tomorrow morning, this will really helpful, since I am a freshman to use the prototype, and I spend a whole day before, but cannot find a way.Thanks again!

Hi Avokadomos, I see your example, I wonder how you make the yellow block can increase or decrease the size when the arrow be pressed, when I go to the prototype mode, it seems no any assign/links to this yellow block.
Thanks for your reply.

A variable called Charge is assigned to the width of the yellow bar. This variable is updated in the interactions of the buttons.

Hi Haroll:
I still cannot achieve your second example, is that possible you could share an alive example in Figma?
Here is my one, but It cannot achieve, sorry, I really a new person to use Figma, so I cannot figure out what is the problem is.
Untitled – Figma
Many thanks for your reply!

Hey @Zhao_Yang

This is the breakdown of the component’ structure

Here is the breakdown of the component’s logic

I cannot gave you access to this file since it’s protected, so let me know if this help, otherwise I’ll make a new file

Hi Avokadomos, thanks for your help, now I can achieve this totally! Really helpful!

Hi Haroll, I am kind of copy your way to do, but when I press the button, the number just +1, and if you want to keep going, you need to keep press again and again, this seems not what I want. Is that I have some mistake?
Thanks for your help.