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.
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.
Ibrahim Joseph commented
I am trying to add an element into a state but what I noticed is that you can not see the view for the component state because if you do, putting element/component will be possible and accessing the state of a component will be achieved
Amy Gamal Foad commented
Yeah I'm right now trying to create a shopping cart and I'm trying to make the "Add to Cart" button change the state of the cart basically to add said item into it without necessarily going into another page, but because components can only be triggered to transition/auto animate/what have you to another artboard not another component, I can't do that.
I think this will solve my problem too. A component inside another component can not change the state of parent component either. Which seems really odd, if I make it a group it works. Am I missing something there or it is the disability of component controling the state?
thanks David, this works great!
same here !
Craig Doriot commented
agree this is important.. any plugins that can accomplish this perhaps?
i was breaking my head trying to figure this out only to find out that its not even possible yet!
please add this feature!