Allow Hover AND Click together

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.

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.

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!

+1 for this

+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

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.

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.

This is it! THIS is the answer! Thanks!