Allow components event to change states of other components
New states feature is excellent but restricted for self components interaction. In many cases, especially in web and desktop apps, there are cases where a component event should affect another element on screen.
It would be a super powerful option to allow a component event to change states of another component.
Currently if i use component A inside component B, i can't use A to change state of B, even though A is part of B.
Sarah Sorensen commented
Yes please, this would allow me to eliminate the number of needed artboards
Yes!!! Can only imagine how many artboards I'd be able to cut from my prototype by encapsulating many interactions within a single board vs trying to manage countless combinations of boards and flows. Would be great to be able to go beyond happy path prototyping with XD and I think this feature would go a long way to unlocking that potential.
Martin Kleis Sundstrøm commented
Came to the same conclusion after trying EVERY method to make a set of 3 interlinked radio buttons. There is just NO WAY to make a radio button set.
This might work:
1) Select a component.
2) Select one of its states.
3) Click "affect other components" checkbox.
4) Choose any other component on artboard from resulting option menu. The states of that component appear.
5) Choose one of the component's states.
6) Click "Affect another component" to repeat.
This could do stuff like "if checkbox is filled, change NEXT button from dimmed to active" or "if radiobutton A is on, turn of radiobutton B and C"
Nathaniel Platts commented
tried to create vertical multi-level menu side bar....
Not possible :(
Axure saves the day
Erico Estrella commented
Yes please, I'm not feeling alone now
The fact that this is not present in XD is making our whole team dismiss this tool.
I've been able to do this type of interactivity since 2016 in UXPin—bummer.
The ability to have a component (nested or non nested) link to another components state. Currently components only show states in which they can be linked to that are directly part of that component and it's states or artboards but I have found numerous occasions where it would be helpful to have those options but link to another components state within a component. Having to create unnecessary invisible hotspots on the outer component is tedious and seems like it could be much easier to have children states of another component available.
Oh, yes please! Need this!
This is a huge problem. I regularly create components like mega menus, with open and closed states. Within those I have buttons which are also components (because I want hover states). Once those buttons are made components you lose the ability to make it's click event change the parent state.
Component without this are pretty useless in a working prototype.
This is so necessary! I was so excited about states (they definitely are huge), but I'm running into blockers with them everywhere because of the need for this.
Absolutely agree with this addition. The current behavior renders nesting components useless.
Richard Cote commented
+1 for this feature.. A good use case is for a reset button to a form or set of filter buttons.
Button/arrow tap targeting a scroll group anchor, please.... and a horizontal page anchor while we're at it.
I want this too.
The invention of states was a huge step forward.
Being able to change states across components really would be the next step and a huge distinction to sketch.
Right now using components can be quite a mess since it has not been possible yet to group elements logically in components if they need to interact with each other.
Mike Britton commented
This would be next level.
Yes we NEED this as an option.
I am hitting major roadblocks without it!
Simplest case: Set of Radio buttons. Seriously why is this not a thing. I'm so frustrated that I can create all the states with changes (one radio button on for each options) but can't trigger them by the radio because its buried in the parent.
(edit 1) With states you can easily set up a group of radio buttons with labels expecting the change state interaction to do the right thing. I've seen tutorials using separate artboards. No. States. Save me about 50 artboards with a simple sate change. (ALSO consider that the radio buttons are in my overlay). Have events from children bubble up like in JS and be watchable by other elements to create triggers. Or find a better way, but hurry.
(edit 2) I figured out a nuance . My radio buttons have states. If I move the trigger of the parent state change to a child that is not a component I can trigger the change on the parent states. Seems like that makes this more of a bug. So what I have to do to fix my overlay with radio buttons is un group all the components and reset each one up like a movie frame. what a work around. Gee thanks.
This would be a great feature for showing user flow. I can see many uses for this, such as:
1. Tutorial screens
2. Logic-based interactions