• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

In XD, only one box should be actionable at a time. How to do?

Explorer ,
Mar 28, 2023 Mar 28, 2023

Copy link to clipboard

Copied

Hi, new to XD. I have 2 of the same size boxes side to side on the same page (they are components.) When one is selected and highlighted, the other should not be selectable or highlighted and vice versa. If you select Dog, you should not be able to select Cat. But both are selectable in my file and I can't seem to get this to work. Can anyone advise how to get this functionality? Thank you.

Screenshot 2023-03-28 at 9.35.30 PM.pngScreenshot 2023-03-28 at 9.35.19 PM.png

Views

579

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

Community Expert , Mar 29, 2023 Mar 29, 2023

Hey there. Once you wire the selection from the default state to each box, then you have to go into each state individually and wire the unselected box to it's selected state (to switch between boxes), and the selected box back to the default state, so you can unselect it. I've made an example for you. Here's the prototype link, and here's the .xd file.

Votes

Translate

Translate
Community Expert ,
Mar 29, 2023 Mar 29, 2023

Copy link to clipboard

Copied

Hey there. Unfortunately, in Xd you can't have one component change the state of another. The only option using a single page would be to have both boxes inside the same component, which will have 3 states:

  1. Default, where both boxes are unchecked
  2. Dog checked, cat unchecked
  3. Dog unchecked, and cat checked

Finally, you wire them so clicking on each box changes the component to the state where it's selected.


If you can't figure it out and need an example, let me know.

Votes

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
Explorer ,
Mar 29, 2023 Mar 29, 2023

Copy link to clipboard

Copied

Thank you! Following your instructions, I was able to get the boxes to work as expected. Is there a way to wire so both boxes to return to default after having dog or cat selected? Here's a screenshot of what I have now.

 

Screenshot 2023-03-29 at 8.07.26 PM.png

 

Votes

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
Community Expert ,
Mar 29, 2023 Mar 29, 2023

Copy link to clipboard

Copied

Hey there. Once you wire the selection from the default state to each box, then you have to go into each state individually and wire the unselected box to it's selected state (to switch between boxes), and the selected box back to the default state, so you can unselect it. I've made an example for you. Here's the prototype link, and here's the .xd file.

Votes

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
Explorer ,
Mar 30, 2023 Mar 30, 2023

Copy link to clipboard

Copied

LATEST

Oh great, I get it now, seeing the files made a difference! Thank you so much. Cute animals by the way. 

Votes

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 ,
Mar 29, 2023 Mar 29, 2023

Copy link to clipboard

Copied

You can use **states** in Adobe XD to make two components unselectable at the same time. You can create a component, add multiple variations (states) to it, and wire it to mimic real-world user behavior (without having to copy your components multiple times). Having components with states also makes it easier to manage your assets and to create interactive design systems².

I hope this helps! Let me know if you have any other questions. 😊

Votes

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
Explorer ,
Mar 29, 2023 Mar 29, 2023

Copy link to clipboard

Copied

Yes, thank you. I had the idea in my head, sort of, but first had both dog and cat as separate components. Then nested them into another component. Then separated everything, back and forth about 5x! But couldn't wire properly. For a newbie, sometimes the process makes sense, but you can make yourself more confused the more you try to figure it out.

Votes

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