Trying to create a prototype with two interactions on one element.
On click on element → navigate to another frame
Touch down element for 500ms → open modal
Only the touch down element interaction works. There are a couple instances after repeating clicking really fast, where the on click interaction works.
Is this a limitation of figma? Any tips?
Hey John, just want to make sure I understand what you’re going for with this interaction:
You want a regular click to navigate to another frame, but if a user presses and holds for a duration of 500ms then a modal opens.
Is that right?
If so, I think I have a solution for you! Here’s a link to the prototype I made:
I increased the time to 1500ms just for the purposes of demonstrating the effect, but it could certainly be slowed down to 500ms. The click is not perfect, but it’s close. You’ll notice there is a slight flash to “Page 2” when doing the click interaction. I’ve also gotten flashes of other pages after letting go of my click on Page 3.1. If you’d like to see how I set it up, here is view access to the file.
Let me know if I understood the interaction correctly, or if you meant something else!
Ah yes! This is what I needed! Thank you!
After downloading a copy of your file, I was able to see how you created the interaction. If seems even though it is possible to create multiple interactions for a single element, it is not recommended. Would you agreed with that?
One more thing I notice is that it is still buggy with overlay modals. Specifically when I release my click, the modal disappears. I even made sure to unselect the “close when clicking outside” function. Strange…
Regarding whether or not to have more than 1 interaction on a single element, yes, I think in most situations I would avoid it only because it’s not common (at least for the experiences I create, which are pretty basic).
However, it really depends on what you’re working on! I could see an interaction like this being useful in a game or even a CAPTCHA experience. And it also depends a lot on what you need from this prototype. If it’s something like a portfolio piece that’s meant to be really tight and slick, I could understand the flickers of different screens and navigating away from the modal when you’re not meant to (I’m not having this issue on my end by the way, apologies, it’s hard for me to troubleshoot why this is happening without being able to re-create the issue).
But if this prototype is going to an engineer and you mostly just need to capture the general interaction with 90% accuracy, then I think this is a solid demonstration!
I understand if you can’t disclose what you’re working on, but I’m very curious about what you’re building and using this interaction for!