Figma Techniques

How to prototype long press in Figma

Adding in a “long press” or “press and hold” trigger to an interactive component, without losing the regular tap functionality.

Demonstrating both interactions working on the same component.

edit: here’s my community file you can browse, duplicate, and remix:
https://www.figma.com/community/file/1263203969185334872

Thanks Ameer Hamza Tariq for the suggestion 🎉

Long press, also known as press-and-hold, is where a user spends a little bit longer tapping on something, to trigger an action. It seems trivial to prototype since we’ve had multiple interactions since late 2020, but I’ve found it can be finicky to retain other interactions at the same time.

Whilst it’s more of a mobile interaction, I think there could be some great use cases for this “click and hold” behaviour on a desktop. Even if you’re not predominantly designing for mobile, it’s worth having in your repertoire just in case—hold on, and I’ll show you how to make one.

You might benefit from reviewing Figma’s prototype triggers.

Where to find long press in the wild

A great example from the past is a stopwatch. In its classic form there’s only a single button, and each press will start or stop the timer. Holding down that same button, resets the clock. It’s a beautifully simplistic and timeless design. Nowadays, you’ll find this interaction mostly resides on mobile.

Here’s a few examples you might find on your own phone:

• Enable move and delete apps on your iPhone
• “Right-click” on your iPhone to open context menus
• You can press and hold to play a Live Photo
• You can send large emojis on Messenger if you hold them down
• View the wallpapers and widgets options from your Android home screen

Given these examples I could find, you’ll either provide convenience or delight to your users when using this interaction.

A worked example

Let’s put a worked example together, so you can start using them too.