Skip to main content
Question

Issue with Clickable Object Behavior When Covered by Another Component Variant

J

Hello Figma Community,

I’m encountering an issue in my Figma project related to the behavior of clickable objects when they are covered by another component variant. I’m seeking assistance to understand and resolve this problem.

Problem:
I have a Figma file where I’ve created a component that changes to a different variant on interaction. However, when this variant covers part of another object that was clickable before, I notice that the covered object remains clickable even though it’s not visible anymore.

Expected Behavior:
I expect that when the new component variant covers an area, the objects underneath it should not remain clickable. The covered objects should be effectively hidden from interaction until they are visible again.

Steps Taken:

  1. I’ve checked the layer order to ensure the covering variant is on top.
  2. I’ve confirmed that the covering variant has an opaque fill.
  3. I’ve explored the interaction properties and settings but couldn’t find a direct solution.
  4. I’ve experimented with grouping, visibility, and mask options to no avail.

Request for Assistance:
I would greatly appreciate any insights or suggestions the Figma community might have on how to address this issue. If anyone has encountered a similar situation or has a workaround, I’d love to hear your thoughts.

Thank you in advance for your help!

3 replies

Jens H
  • Jens H
  • New Member
  • 1 reply
  • February 18, 2025

Hi,
Is there any insight into this strange behavior? All threads in the forum on this topic end without a solution…

Thanks,

J

y_toku
Figmate
  • y_toku
  • Community Support
  • 2318 replies
  • February 21, 2025

Hi ​@Jens H 

 

Can you share the screen recordings or the file link with access to support-share@figma.com? It won't affect your billing. I hope I can investigate it further! 

 

Thanks,
Toku

y_toku
Figmate
  • y_toku
  • Community Support
  • 2318 replies
  • February 26, 2025

Hi ​@Jens H 

 

Thanks for your patience! I checked internally and found out that it is a feature limitation that the covered object is still clickable at the moment. So, let me share you with the workaround by using a variable.  

One workaround here could be to use a boolean variable to set the visibility of the button that’s being covered and to add additional actions to toggle the visibility of the button to true/false on the same interactions that toggle the variant of the instance covering it. To do this:

  1. Create a boolean variable set by default to true
  2. Select the instance in the fame
  3. Right click on the show/hide icon and bind the boolean variable
  4. On the component closed variant, add an extra action on the “On click” trigger to “Set variable” and change the boolean variable value to false
  5. On the component opened variant, add an extra action on the “On click” trigger to “Set variable” and change the boolean variable to true

Let me share my sample file: https://www.figma.com/community/file/1476428025140845693

 

I know it’s not ideal but I hope this helps! Please let me know if you have any questions!

 

Thanks,

Toku

Nate_G
1 person likes this
  • Nate_G
    Nate_G

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings