Use shape boundaries for interactive hotspot instead of rectangular bounding box

[N.A.G.A]

Hello,

I couldn’t find a feature in Figma where we can constrain trigger or hotspot bounds to a vector shape instead of a rectangular bounding box.

The current version doesn’t support the design use cases similar to those below (eg: interactive pie charts) where transparent pixels are ignored in a non-rectangular shape because the hotspot bounding box is always rectangular. It would be nice to constrain the hotspot area to the desired shape instead of a rectangle. Please check the attached Figma file.
Hotspot bounds.fig (7.0 MB)

Is it possible to include HTML image maps so the hotspot shape can use a polygonal shape? Please check the URL below.

HTML Image Maps

[N.A.G.A]

Linking other posts I’ve come across talking about the same issue.
@Josh @Gayani_S @Celine_Figma @y_toku @Heath_Rogers

Ignoring boundig box of tilted buttons in protoryping

Hello Figma Community. What I’m trying to do: I have three tilted banners, created with each their own vector. I want the user to be able to press one of the banners, to direct them further into the page. Essentially, I want the banners to act as buttons. My problem: The bounding box seems to decide the “press” boundry, instead of the vector shape, resulting in the user can press outside of the banner to activiate the navigation. Flatten was suggested somewhere, but that does only reduce bou…

Changing the rectangular Interaction Trigger boundary around shape or image

Is there any way of changing the shape of the trigger area which triggers an interaction? At the moment while the trigger is set to “while hovering” the interaction will be triggered if the mouse hovers anywhere within the rectangular or square boundary which contains the shape or image. When two shapes are side by side the rectangular boundary around the shape may inevitably overlap with another shape. This means that the interaction can be triggered even when the mouse is not hovering directly…

Interaction should only activate when in shape area, not bounding box

It would be great if interactions only became active when you were inside the shape/path you have set it on. Currently, it becomes active when you enter the bounding box of that shape or path, this makes it difficult to prototype interactions for non-rectangular elements that are located close to one another. It can make the target area of a shape to be clicked on or hovered over almost non-existent or overridden by another element in the frame. Having this working correctly would make a massiv…

How can I create interactions within a frame?

I’m having trouble getting an interaction to work with sub-elements within a frame. For example, I’d like to be able to have different differ tool tips pop up when hovering over different sections of this visualization, but it seem to be limited to just triggering when mousing over the parent frame. [Screen Shot 2022-01-07 at 4.01.33 PM] [Screen Shot 2022-01-07 at 4.02.39 PM]

How would you do this?

Hello, I am new to Figma. Still studying UI Design but I am vexed by what might be a simple thing for you experienced gurus. I have a four-way navigation icon. In my prototype, I need to have it change colors when the user clicks on each of the four triangles. When a triangle shape is made in Figma. It seems to be based on a four-sided object. So when I try to implement this in prototype mode. It does not work as expected. I do not know how to explain this better. Anyways, here is a screenshot …

[y_toku]

Hi there,

Thank you for providing feedback! As you mention, this is a feature limitation at the moment, so it’s unavailable. I will share this with our internal team. Your input is highly valued, and we will take it into consideration for future enhancements!

Thanks,
Toku

[RhizomeTodd]

This would be extremely valuable, @y_toku. I’m just trying to upvote the concept in order to show more of us would appreciate this ability in Figma. Thanks!

[Dan81]

Agreed @RhizomeTodd @y_toku! I am trying to build a map areas that are hovered over highlight. Unfortunately the winding corridor area gets selected as soon as the mouse enters the map! Would be awesome to have events be based on the shape, not its bounding box.

[Dan81]

(and @N.A.G.A)

[Marcus_Harvey]

Another request for this. I am currently unable to correctly prototype a feature because of this limitation.

[Marcus_Harvey]

Here’s mine… It’s a tricky subject to search for. Many ways of wording it.

Any way to have a mask affect mouse enter/leave?

I have a component with while hovering, and click interactions on it. The component is a simple square that is a different color for default (rest), hover and active (clicked) states. If I mask an instance of this component with a vector mask the hover and click triggers do not honor the mask i.e they trigger in the rectangular “hit box” rather than only within the vector mask. Is this just how it is or am I missing something?

[Kelsey3]

I’m working on an interactive map and also would like this feature to be developed