Copy link to clipboard
Copied
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/
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
i can't figure that out. everytime i try, i have the same result, that the active state of any component covers the entire area and can only be turned off before another is activated.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Hi yeah, that works as i wanted it to, but i'm not sure why. for me, when the component was in the toggle state, the size of the whole component covered the other ones, including the buttons, meaning you had to go to the smaller state to activate a button it covered (based on the rectangular size of all parts, like this image attached). still not entirely sure why yours works.
Copy link to clipboard
Copied
How are you hiding the elements that should be hidden? Are you using 0% opacity, or clicking the eye icon in the layers panel, to make them invisible?
I think when you make it a "Toggle State", it remembers the initial bounding box, even though the green border is around the visible shape as well. If you use 0% opacity, the element still counts as part of the bounding box of the group, and not just the button. If you make the layer invisible (with the eye icon) on the off state, only the button is considered as the bounding box in both on and off states.