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”.

Active Member

Question

Interactive state doesn't reset after overlay is closed

Forum|Forum|1 year ago
September 24, 2024
30 replies
2053 views

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”.

Prototyping

Show previous replies

Alena Kosmyleva

New Member

It's strange that they still haven't fixed a bug from two years ago. I hope it happens sometime soon!

Tascha

Active Member

chiming in here with the same issue - figma please fix 🙏

meanwhile, if your prototype is small, workaround that worked for me is:

have the component set up with a boolean for “pressed”
have a variable set-up per button in your prototype e.g. “menu pressed?” - false
have your overlay X close interatction with set variable “menu pressed?” -> false
in your prototype, link your variable “menu pressed?” to the instance “pressed” state
set up your open overlay like normal

Ofc, this will be hideous if you have many buttons that open an overlay, but if you have 3 buttons like me it does not take too long...

Celyn_L

Figmate

Hi everyone — thanks so much for your patience.

I know this has been ongoing for some time now, and I want to reassure you that we’re hearing you. I’ve shared these reports with the team and they’re actively investigating.

Really appreciate everyone who’s shared workarounds so far — it’s been super helpful.

We’ll keep this thread updated as soon as we have any news. Thanks again for sticking with us in the meantime 🙏

Celyn_L

Figmate

Hey everyone, the team would like to take a closer look and review a few of the impacted files to help with debugging.

I’ve gone ahead and created support tickets for those of you who reached out more recently. It would really help if you could reply there with a direct link to the affected file, and invite support-share@figma.com with “Can View” access (this won’t impact your billing).

@Tascha - Your ticket number is #1862929

@Alena Kosmyleva - Your ticket number is #1862949

@Waldo - Your ticket number is #1862953

@stevekulaga - Your ticket number is #1862954

Please feel free to drop a quick note here once you’ve shared the file link in the ticket, and I’ll help move things along from there.

Really appreciate you working with us on this, please keep an eye on your inbox for next steps 🙏

Tascha

Active Member

@Celyn_L thanks for the reply and furthering the investigation! I provided you per mail with the file and am droping it here for anybody not sure of the issue:

and here’s the prototype link to test the behavior:

btw I tried and whether or not a hover state is linked in-between the default and pressed does not matter - issue still persists that the button state does not reset back from pressed to default when the overlay is closed.

Celyn_L

Figmate

Hey @Tascha, thanks so much for sending the file over via your ticket and for sharing it here as well for the community - really appreciate you taking the time to do that.

I’ve made sure all the details you’ve provided here have been relayed to the team.

Thanks for working through this with us, we’ll be in touch with you via email as soon as we have an update!

Tascha

Active Member

Hey everyone - I’ve received a (for now?) final message from the figma team via e-mail, I will copy it below for anyone interested; tldr atm they can’t fix the behavior...

Thank you for your patience while we looked into this.

I checked with our engineering team, and the fix for this issue is unfortunately not straightforward. The behavior involves a more complex interaction between hover and click states internally.

At the moment, the team is focused on an ongoing product release, so we’re not able to provide a fix in the near future. I’m very sorry for the inconvenience and understand this is not ideal.

We’ll continue tracking the issue internally.

Best regards,
Anju | Technical Quality Specialist

LuongndAuthor

Active Member

Hey everyone - I’ve received a (for now?) final message from the figma team via e-mail, I will copy it below for anyone interested; tldr atm they can’t fix the behavior...

Thank you for your patience while we looked into this.

I checked with our engineering team, and the fix for this issue is unfortunately not straightforward. The behavior involves a more complex interaction between hover and click states internally.

At the moment, the team is focused on an ongoing product release, so we’re not able to provide a fix in the near future. I’m very sorry for the inconvenience and understand this is not ideal.

We’ll continue tracking the issue internally.

Best regards,

Anju | Technical Quality Specialist

Thanks for the update. Can’t wait for the AI hype to be over so they can come back to focus on their original core values….

Marcelo Venturotti

New Member

I have the same issue, please figma team fix this 🙏

Marcelo Venturotti

New Member

Please try this method:

Create a Component of the Button.

Prototype Button:

Default → Hover
While Hovering

Default → Pressed
While Pressing

Pressed → Default
After Delay: Change to Default.

Use an instance of it to oben the Overlay → Close clicking outsinde.

The Button Should be pressed as long as the overlay is opend.

After closing the delaytime begins and the button change to its default state.

For a larger design system, you might need to create an extra "Overlay Button" that automatically reverts to the default state.

Hope thats a usecase...

Thanks @Lennard_Brauner for this suggestion.

I use his idea as an inspiration but I changed it a little bit and it worked for me.

I have a button with these 3 states:
- Enabled
- Hover
- Focused (after open the overly the button stays in this state forever)

What I did:
In the Focused state (it could be pressed in yours):
- I have Added a delay interaction change to: Enabled state

Result:
After closing the overlay panel the focused state is removed

I hope this solution helps somebody here.

Sign up

Login with SSO

Login to the community

Login with SSO