Single and Long press button animation

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

Quick Method - In prototype > Use ‘Mouse Down’ and set the ‘Delay’ for how long you need the long press. 

This worked well for me…

• ‘Mouse down’ with 100ms delay to mimic long press (as others suggested)
• ‘Mouse up’ to mimic single press

They seem to play nicely together so far