Allow Hover AND Click together

I think once you open an overlay it will always block interactions with elements behind it, so I can’t think of another way to do this. Interactive components was a good idea—not ideal but I suppose you could always take auto layout off of your table rows to control the layering better.

With the general release of interactive components today, I was excited to give it a try. As you can imagine after trying the most basic useful thing I could imagine…I found my way to this support thread. Is it really true that a click on my button component can’t proceed to frame 2?? Is this possible?

4 Likes

Works perfect :+1:

Having this problem as well. Any workaround?

1 Like

Thanks for this one! :heart:

I have this issue as well.

I completely agree. Is there a technical reason why this isn’t possible ?

2 Likes

I completely agree. Is there a technical reason why this isn’t possible ?

Yeah, the way Figma does component variants the variant you are switching to on hover is considered a different item entirely, it is not just a modification of the original variant (the way it works in HTML/CSS for example). So when you click on a hovered item you are clicking on the hover variant, not the original one. This means the click action needs to go on the hover variant.

In general this is the way Figma does everything, styles and items aren’t actually changing, they are being swapped out or layered on top of each other. Smart animate can add a transition between these states, but the new state is still considered an entirely separate item/component.

5 Likes

I see.

Creating components then adding hover variants to them works well in the end. That was my solution to this issue :grin:

1 Like

Is there still no solution for this? Was wanting to have a dropdown menu item change color on click.

I actually think that the scenario above should be doable with current figma functions. You’d need to create a “hover” and a “pressed” state in the variant. You should than have the color change in your prototypes.

2 Likes

Thank you! Your clip helped me a lot.

1 Like

Having this same problem. Feels like the “Overlay” option is being over-used to create tooltips (among many other things) but in the Figma world it’s still a modal-like component with an overlay mask which may be preventing/blocking the click action.
Figma is SVG/canvas after all.

More thought needs to go into the prototyping product (on Figma’s side) to better accommodate the html world of components, tooltips, drawers, tab panes, context menus etc.

1 Like

Yet another example of figma designers not understanding how web elements work. All clickable items have a hover state. Implementing this at component level STILL blocks clicking action, not to mention not every button instance will have the exact same tooltip for example.

My dudes. There are a limited amount of basic web components. Just add a library of these. Add a library of stylable buttons THAT COME WITH customisable hover / focus / disabled states, unlimited additional hover objects you can associate with it (a button will highlight on hover, but can ALSO have a tooltip for eg), and then a click action. This mimics web behaviour.

Don’t even get me started on dropdowns. It’s ridiculous that I have to create a dropdown component with a million menu items that I then HIDE in case I need them in future. Just provide a library with a stylable dropdown component that you can say “I want 2 / 3 / 23 menu items with these labels, with or without icons”. Come on. This building component libraries from scratch business is mental.

Stop providing flexibility no one needs. Just give us basic components we can then customise.

5 Likes

This seems like a basic staple requirement for any interaction design to be able swap states on click, hover etc… and even to be able to add logic, e.g. if active state is applied don’t apply hover on mouse over, this would save me hours and massively reduce the complexity of my prototypes not to mention my sanity if anyone asks for amends!

5 Likes

+1 for this

1 Like

+1, now let’s wait for the implementation

This is the way I did it. I created three frames, one where the button is, the second one the hover, and a third one with the new frame I want to reach after click. It works; after all, you want to click after the hover is applied.

I leave the public Figma file at the following link: Button Hover + Click | Figma Community

2 Likes

I have managed this fairly well I think but it takes a TON of work. And is not ideal to maintain…Figma really should be addressing this. It creates bloat and chance for error and inconsistency. But…

Bottom line is that your components have to be robust. Build them as COMPOSITES. Thus your button and then specific to that modal, action, etc. Then frame it and make it a component. Do the same for each of your scenarios. Now you have to load the proper composite for the proper button. Simple in theory, difficult to manage and maintain. But works great!

I needed a checkbox with hover tooltip. But then I needed the checkbox to launch a modal to confirm the action of checking it. What I did was made a composite of the tooltip AND the checkbox. Then “on mouse enter” of the checkbox, I showed the overlay and manually positioned the overlay checkbox over the initial one. Here I gave the click action to the checkbox contained in my overlay composite. Give the overlay a mouse leave to close the overlay.

Composites. Serving as workarounds for Figma inadequacy for years.

These are the simple things that Axure offers that I wish Figma was doing.

3 Likes

To clarify, if the hover behavior is added inside a component (changing its variant) then you can use the click in the artboard which contains it.

2 Likes