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

A component within a component only shows the smaller component's state options in Adobe XD.

Community Beginner ,
Nov 04, 2019 Nov 04, 2019

Copy link to clipboard

Copied

In my instance, I have a larger "component A" - a dashboard. In the dashboard are cards that hold various data viz. One of these cards is another component - "component B". It has one layer that is set to a hover state that shows the floating charts legend. Upon clicking that same layer, I should be able to manipulate every other chart in Component A. However, selecting that layer in Prototype mode only gives me Component B states.

 

The workaround is to only have Component A. No Component B. My desired action would work fine. But that would mean that if I brought in a toggle component into this page that has an on/off state, I'd have to break the component, make the whole page a component, and reapply the toggle on/off states before even creating the page's second state (its reaction to the toggle). 

 

SUMMARY: I should still be able to access the umbrella component states even if I'm actively selecting a second-level component.

 

<The Title was renamed by moderator>

Views

230

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 Employee ,
Nov 04, 2019 Nov 04, 2019

Copy link to clipboard

Copied

LATEST

Try adding a group around the child component. Once you do that, then you should be able to target the parent component's states. In more detail:
1. Drag an instance of your combined parent-nested-child component onto the canvas.
2. Go to Layers panel and drill down to select the child component.
3. Right-click the child component in Layers panel and select Group. You should now have a group that only contains the child component.
4. In Layers panel, select the group you just created, then go to Prototype mode and go to Property Inspector.
5. Click the Plus button next to Interaction and select Tap or Hover.
6. The Destination field should now let you see the states for the parent component.

 

Hope this helps,

David Alcala

XD QE

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