Skip to main content

Yes I know this topic has been raised before, but I would like to raise it again, since it is breaking the core interaction in my design system. Is Figma even aware of this issue? Since the last discussion about it is ~2years ago, and this issue still exists.

Steps:

  • Create a Button component set with 2 variants: Default, On Press
  • Add interactions in the variant: “Default” → While pressing → Change to “On Press”
  • Insert an instance of the “Default” button into a new Frame
  • Add interactions to the button: On Click → Open overlay. Check the “Close when clicking outside” box.
  • Test the prototype

Results

  • When you click the button, the button change to “On Press”, the overlay opens, but when clicking outside the overlay to close it, the button does not reset back to “Default”.

Expected:
The button should reset to “Default”.

Hi, do you have any updates on this issue? I have exact the same problem. »While pressing« stops working and the pressed state doesn’t switch to default.

Thank you for posting this. I am having the same issue, and I have not found a workaround. On PC, I was able to add a mouse leave interaction to reset it, but on mobile, it stays in my pressed state. This is very frustrating.

I’ve read this article but it doesn’t seem to help here: https://help.figma.com/hc/en-us/articles/14397859494295-State-management-for-prototypes

Enabling Reset Component State doesn’t work. I’m guessing that is because the overlay doesn’t contain the component. I believe that setting is meant for navigating between frames that have matching objects.

One possible workaround would be to enable that option and add a matching object to the overlay but make it hidden. I’ll try that tomorrow.

Yeah, I also tried it with Mouse Leave, but even then, you’ll actually have to Re-enter your mouse on to it then leave. Only then it will switch back the normal state.

My only workaround for now is to set a 2000ms After Delay on the pressed state. At least then it won’t be stuck forever…

Thanks for the idea on the delay on the pressed state. I have updated my prototype as well. I checked on the reset component state, but that doesn’t appear to work either. It appears to work if that object is visible on the overlay frame, but if I hide that object, then it doesn’t work which obviously does me no good.

It would seem this whole behavior is a bug that Figma needs to address. The overlay interaction should not be preserving a state that is triggered “while hovering” or “while pressed”.

I experienced this bug for a long time and saw many people bringing up it in the forum. But Figma never fix it -_-

Ridiculous this isn’t being looked at. How does Figma actually expect people will use the pressed state when it relates to buttons that open overlays? It seems the system can’t handle component interactions with overlays.

The only way I can seem to make it work is to create a master component for every button that opens a different overlay, which completely loses the point of having a master component in the first place…

What I do is create a master component with a default and ‘pressed’ state. I add an interaction
‘default’ > ‘Touch Down’ change to > ‘Pressed’

Secondly I add the interaction
‘pressed’ > ‘Touch Up’ change to > ‘Default’
and add another ‘tap’ interaction to that to also open up the overlay. This works as intended!!!

Why it only works within a master component and not an instance is infuriating FIGMA PLEASE FIX!!!

Please figma fix this!! When i have a bottom sheet being open by a button on a page, it stays pressed after i already released the button – actually, it even stays pressed when i dismiss the bottoms sheet. For no reason! Even with “reset state” applied...

This is a very annoying flaw in prototyping. @figma Please find a reasonable fix for this without complex user solutions.

I have been battling this issue all afternoon and finally found this thread. I completely agree with the aforementioned. What a weird, broken, dead end we seem to have found here. I expect many will cross this path when designing for mobile first. Unanswered questions here.

Same problem here but I swear this has worked perfectly fine in the past! 

Terms & ConditionsCookie settingsAccessibility statement