This is it! THIS is the answer! Thanks!
Just make its own feature work. It literally allows two different interactions to be added to objects, but only one works. Figma is going to put me into an insane asylum with all its non-working features like this
1 Like
Its a shame it has to be this complex and figma can’t simply allow two interactions at once, but yes this works!
Additional tip: Don’t reset the bounding on your hover over instance so you can continue to use the same X, Y placement parameters.
Creating a button with a hover-effect from point A to B is simple enough. The annoyance of this today is that it adds “bloat” to your design files.
However, the main issue I face is when you are creating overlay components. I will try to break it down below.
Use-case:
- Button within a frame opens a component
- I want to add a hover-state to indicate a change and give the user strenghtened visual cues to the button
- Clicking on the added hover-button opens up the overlay component
- Issue 1: When closing the overlay component the hover-button still acts as active. When building complex systems where a button exists across multiple screens this causes a lot of issues. For instance, on the overlay component you must today set the exist of the overlay component to an existing screen to “reload” all interactions. When the user is standing on one page he/she might therefore be redirected to a previous screen. All progress is thus lost. Issue 2 If you only add “close overlay” to an overlay the screen will freeze and the hover-layer will act as the main component. The only workaround is to restart the prototype.
I could keep going with all issues this creates…
Instead, I will add a solution. On each component there should be a possibility to add a hover effect. “Add hover effects” where you can add effects, backgrounds, font colour changes, etc.
This solution should not create these problems, since the button itself would work as usual, with the addition of simple colour/effect changes on hover.
Yes, same over here please 
I think Figma fixed this in a recent update, I have button components with hover variant interactions that are working with click interactions now (not using the mouse up workaround)
Interesting, doesn’t seem to work for me.
My work around is to also include another invisible button with the tooltip.
-
Real button with hover event to show tooltip
-
Tooltip overlay w/ invisible button. Invisible button will have the click event to go to the next frame.
3 Likes
Mouse enter - Open overlay - (set your hotspot/tooltip overlay)
On click → Navigate to, etc.- (your next frame/screen/location)
Those two interactions work together on the same object or component if you follow these steps when presenting prototype (or mention when sharing) :
1.) Hover over area/button to trigger your hotspot/tooltip. 2) Over the same area that triggers it on, click to close it. 3) Without moving your cursor click again to trigger On click interaction.
Not perfect, but presentable.
Note: It won’t work if your h/t overlays the trigger area and your cursor is on top of the h/t… but that’s just bad design to begin with lol
While evaluating Figma I ran into this issue. I first thought this was a bug but according to the support it is by design. To me this seems like really weird design choice NOT to allow click and hover on the same element. I cannot think of more basic example of what should be possible with the interactions – quite usually UI:s have buttons which do stuff when hovered and clicked.