Skip to main content

Hey everyone,


I’m looking for some input on a Figma prototyping challenge. Specifically, I’d like to know if it’s possible to create two distinct animations for a button:


Single click: When clicked once, the digital value changes by one step.


Long press: Holding the button down triggers a continuous, automatic increase in the value until the button is released.


If you have any insights or suggestions on how to achieve this effect in Figma, please share them!

Hi there,


Apologies for the delayed response! After looking into this, I’ve found that it’s a longstanding product limitation and unfortunately, finding an appropriate solution is quite challenging. The only recommendation we can provide at this time is to try avoiding adding extra interactions to the on-click function.


Our product team is aware of this issue and we suggest using the workaround in the meantime.


Thanks for your patience.


Toku

I have the same requirement where I’d like short click to increase by 1 and long click to continuously increase by 1 until released

Figma, please add the ability to have Press and HOLD interactions. I do ux design in the video game industry and I use Figma all the time and this feature is missing and limits my ability to make fully realized prototypes. The feature of a long press or press hold action would be invaluable to many designers and would really help Figma stand out in the ux prototying tool space.


Hi, by using mouse down and mouse up events instead you can simulate a long press. If you have three variants. Mouse down goes from variant 1 to variant 2. On variant two you have a delay for x milliseconds before moving on to variant 3. Add a second interaction to variant 2, if a mouse up event is fired make it go back to variant 1.

Hi there, I’ve found a good solution:


Step 1:

Create a component set


Step 2:

Set up 3 variants for that component set


Step 3:

Go to –> Protorype –> Ineractions



  • Click on the first variant (the Default variant) and add an interaction

  • Set the Trigger to “touch-down”

  • Set the Action to “Change to” the second variant

  • Set Animation to smart animate,


Step 4:



  • Assuming your still in Prototype mode, click on the second variant

  • add an interaction

  • Set the Trigger to “touch-up”

  • Set the Action to “Change to” the first (default) variant

  • Set Animation to smart animate (ease in and out is recommended)


Step 5:



  • Stay on the second variant and add another interaction

  • Set the Trigger to “After delay” & Set the desired milliseconds (200ms is recommended)

  • Set the Action to “Change to” the third variant

  • Set Animation to smart animate (Ease in is recommended)


Step 6:

Give it a test run and lemmi know if it works 🙂

***You can test-run your component set by pulling it out from your assets list and previewing it in a new window. The Function should work for both PC and mobile devices

Reply


Terms & ConditionsCookie settings