Custom/non square hit area
Right now, bounding boxes are always rectangular, with the height of the tallest object it contains and the width of the widest one.
However, many times it is necessary for the box to maintain the exact same shape as the objects it contains, in order to only activate effects such as hover when the mouse is directly on top.
Consider the attached files. Here we have 3 tabs. I would like to make them "jump" up slightly on hover so users can tell it is clickable. The tabs do not overlap, but because the bounding box is rectangular, the active area of the first tab overlaps the other two. Therefore, when my mouse hovers over the second and third tabs, the first one does its "hover effect" because its bounding box covers that area.
Nasif
shared this idea
-
Jonathan
commented
To be able to specify the hover detection area (eg. a shape) would be really helpful.
For example if you have several buttons next to one another, each with a large hover-state, they currently overlap when hovered over, meaning a user's mouse has to leave the entire area before.
This improvement would make prototyping hover overlay displays more functional for larger interface design (eg web pages).
-
Eshkar Galili
commented
Right now the 'hit box' (the boundaries of where the hover is triggered) is fixed to the bounding box of the component group which can be bothersome in menus where I want to trigger a second menu item sitting inside the hit box of the first item
-
Don
commented
I find that a component or an object's hotspot or hit area cannot be customizable. When I click an object during preview, the default hotspot is set and as a result sometimes I click an object that I don't want to click when it is close to another object with a set action in prototyping. I'm still new at XD, if there is a solution for this already, please feel free to message me.
-
Madison Holliday
commented
Currently Adobe XD is not allowing you to change the active hover area. Say if I have a list of selectable text on the left of a picture box. The little circle turns blue when hovered over and I want an image example to display to the left. When I go to try and move my mouse down to the next selection, I have to completely move my mouse out of the way to select it because the image shown with the selection is part of the hover in the interaction.
Is there a way we could have a change to allow the active hover area to be edit-able so it would allow for easier transitions between hover effect interactions when close beside one another?
-
davidicus
commented
I prototype AR apps and whatnot, and have tried to use the Pen tool to draw a tappable shape around a simulated camera area. Trouble is, XD simplifies it to a bounding rect to trap taps, which can consume a lot that doesn't conform visually. It also makes overlaps trickier.