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

Ask the community
1

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

2

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

image
image1472×1134 81.2 KB

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 :
  • pressed → released : add a “mouse down” interaction
  • released → pressed : add a “mouse up” interaction

and that’s it.

image
image1922×830 92 KB

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

Let me know if it helped!

3

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
5

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!

6

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.
Br
Yang

7

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

9

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!
Br
Yang

10

Hey @Zhao_Yang

This is the breakdown of the component’ structure

image
image1920×912 127 KB

Here is the breakdown of the component’s logic

image
image1904×1702 162 KB

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

11

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

12

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.
Br
Yang