Can I create a button, when the button be pressed, the number goes up continuely, while when the press be released, the number stops?
Yes you can !
Basically it requires the use of two components and a variable (let call it
This one is simple, it has two state witch are the same
- Create a text layer
- assign the
countvariable to it.
- Then go to the interaction panel (Shift+E) and add a new
after delayinteraction (I put a delay of 100ms that will defined the speed of the count growing)
- set the variable
count + 1
- add a
change toaction and set it up to go to the other variant
- 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
countvariable to update
The button need to have two states
pressedone as two text layers in it and … that’s it
releasedone as one text layers and an instance of the counter component (previously defined above)
The interaction between those two states are really simple :
released: add a “mouse down” interaction
pressed: 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.
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.
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!
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.