Can't define Component Hotspot?!

New Here ,
Aug 13, 2021 Aug 13, 2021

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/

TOPICS
Missing feature , Product performance , Prototyping

Views

337

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Sep 07, 2021 Sep 07, 2021
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.

Likes

Translate

Translate
Adobe Employee ,
Aug 14, 2021 Aug 14, 2021

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. 

sub-node-to-change-state.png

 

Hope this helps,

Randy

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 07, 2021 Sep 07, 2021

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 07, 2021 Sep 07, 2021

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 16, 2021 Sep 16, 2021

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.

Screen Shot 2021-09-16 at 12.56.15.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 16, 2021 Sep 16, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines