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.
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.
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
I want this.
Jerimy Brown commented
Still waiting... This would be easy to implement... You already have the drop down that lets you select a destination for an action, just add component parent states as options in that drop down list. There may programming complications I am not privy to, but you already have a logical place for the functionality in the XD interface ;)... Also those of you voting on this, need to get all your coworkers and colleges to vote on this... It's not going anywhere because it doesn't have enough votes yet ;)
I am in need of this as well. I am prototyping a timeline where the legend is clickable, and it adds or removes the item from view in the timeline. It works, however , I have to group all elements for that legend item in one group for the 'defualt' state. The problem is, if the layer for that group expands past the length of the item in the legend, it overlays the click on top of other legend items, so legend item 1 is clicked, but legend item 2 hides elements.
Irfan Adam M commented
This is such an essential use case for prototyping
Sebastian Forman commented
I'm trying to create a navigation with 3 drop-down elements.
Navigation has 4 states (all closed and one for each of the 3 categories)
Each of the categories are their own component with a open and closed state.
I would like to have a tap/click trigger that changes the state of the parent. Each of the parent's states control which category is open.
There are several other usages for this (as a React developer, components and states) it would be useful to prototype component connections like this as well.