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.
Anna Willoughby commented
How many votes does this need before it's considered? This is becoming increasingly important the more forms I design. Creating a very basic flow in an app is really difficult without this.
Nathan Wells commented
Yes, this would be awesome
I would suggest to have some global state type thing like in React...
so lets say I have state.Var1=0 and on tab of a button it will change to state.Var1=1 ...
and then I can create conditional default states for other components based on state.Var 1 value...
trust me this would change the whole thing to dynamic and will give access to new dimensions...
Edu Couchez commented
Even could it be invaluable some sort of basic "conditionals" i an easier and visual way. So tell XD to trigger states depending on some conditions. Some like: If "button.load" state is "hover" then "rectangle.message" state to "welcome".
And please, make "Interaction Panel" detachable and independent from the "Layers" panel view. Each time we select a state to test and fine tune, his container component closes, needing to double click each time to access to inner elements. The opposite also is a waste of time... each time select any component from layers, the states dissapear from view, so need constantly selesc un select components to remember names, states, which one was set as default... etc, etc, etc...
Eric Wilson commented
Another vote for this. At the most basic need would be to have a form element component be able to toggle the visibility/enabled/disabled state of another component. As others have said this would be super powerful and extremely useful to communicate interaction.
Daniel M commented
As an example, I created a component with a state for all of my modals that I would like to be able to drop onto any artboard. But I cannot trigger those modals from an element that is not included in the component. I would like the ability to trigger a specific component state from any elements as long as the component is on the same artboard.
Victor Bergh commented
With this feature I would be able to use XD for in principle everything I need! It is a really useful feature!
It is almost impossible to create a sliding side navigation with menu items (menu items that have hover states). i have to use several art-boards just to achieve this simple action.
This is really necessary. I have to apply so many workarounds to my Prototype right now...I just designed a toggle switch, but the only visualisation I can add is toggling the switch itself on and off. This is not a real life use, switches are used to have an effect on something else other than themselves...
This would make many common interactions super easy. In my example I have four buttons. Each button has a set of states. I would like the blue button to change state if I click any of the other buttons.
I also would love to have this feature, it is an important aspect to have when making interactive prototypes
Jerimy Brown commented
I need this so badly, I voted on this a long time ago, and just came back to see how it's progressing... I just wrote another request that, if combined with this one, would make XD a real powerhouse of micro interaction possibilities.
The new request I just wrote asks for definable hit areas for states... Right now if you have a state and add something bigger to it on rollover(for example), rolling off the original trigger doesn't return to default state, because XD assumes the hit area of the entire new state, weather that was your intention or not LOL.
Matt Penner commented
This would be a huge feature for prototyping several user interaction scenarios. Currently we are trying to prototype a design where the user has a "focused" view. They can check a few different info cards on their screen (which contains many) , click the Focus View button and all but the checked cards would disappear. I would like to hide the unchecked cards based on whether they are checked or not, and whether the Focused View button has been clicked.
I can simulate this by creating multiple art boards where I manually check the cards and then transition to an art board where they are hidden, but this totally loses the user interaction/testing since they cannot check cards of their choice.
In this scenario the parenting strategy doesn't help as I need to go the other direction (change a child component's state based on a parent or sibling component).
Josué Sotelo commented
I need this urgently. So basic, It will reduce my art-boards count in half!
Mike Britton commented
This would allow us to create plugins to output designs for angular and react component architectures.
Seconded! I have the same issue that some states of component A would need to affect a state of component B. So far I have not found a way to resolve this, which is a very common behavior for drop-downs, icons and what not on web- and desktop apps.
Would be brilliant to have this feature.
I have 3 components, two of them have hover's state, the third's state depend of the state of the others components.
Came here after trying to do exactly that. Component feature is very important, and glad they're working on it. But it has to be more robust - looking forward to updates on this.
If you have a parent component that contains a child component, you can 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,
I love the new states support. Great feature and very useful. Thanks for providing that feature. But I would like to see this feature in near future.
As a workaround I create in component B an opaque rectangle (or other filled path) above the child component A as a reactive area. So instead of creation an interaction on component A I create the interaction on this rectangle which allows me to link to another state of component B. Would like to skip this workaround because it works only for simple component structure.