Can't define Component Hotspot?!

Question

i have 5 components. each has a default state where you can only see a button, and another state where you can see a transparent image in the area beneath the buttons. in prototyping this project, the user should be able to toggle on and off the images at will by clicking 1 of the 5 buttons, and the layers remain in the same order (5 is always the bottom layer, 1 is always the top layer) no matter which order you turn them on and off.

problem is, an xd component hotspot area is not definable, it's just the shape of the whole component by default. which means the top layer is always triggered, even when there is no content in that area of the component. this would be an easy fix to create an interaction mask that makes only a certain area of a component interactive.

i jerryrigged it by getting rid of the buttons and using the keys & gamepad trigger to avoid this, but functionally it's a very different user experience. is there another way to handle it?

https://xd.adobe.com/view/2f6974bc-fa61-410d-9150-37571e371e05-7a3a/

Spas K. · Accepted Answer

Hi there, can you check if this is what you need? Made a quick example and it seems to be working with toggle states. Components are overlapping slightly with neighbour buttons, but it doesn't seem to be an issue. Here's the file as well.

Randy Edmunds 2 · Answer

I think you can achieve this by defining Transition on a sub-node of the Component (not the Component itself), with Destination of the other State.  Hope this helps,Randy

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.