Skip to main content
Question

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

  • July 29, 2023
  • 9 replies
  • 2527 views

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

This topic has been closed for replies.

9 replies

Haroll
  • Active Member
  • 273 replies
  • July 31, 2023

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!


Avokadomos
  • Active Member
  • 377 replies
  • July 31, 2023

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.


  • Author
  • 5 replies
  • July 31, 2023

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!


  • Author
  • 5 replies
  • July 31, 2023

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


Avokadomos
  • Active Member
  • 377 replies
  • July 31, 2023

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


  • Author
  • 5 replies
  • August 1, 2023

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


Haroll
  • Active Member
  • 273 replies
  • August 1, 2023

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


  • Author
  • 5 replies
  • August 17, 2023

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


  • Author
  • 5 replies
  • August 17, 2023

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