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.
Yoav
shared this idea
43 comments
-
Anonymous
commented
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 ;)
-
RH
commented
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.
-
Tekin
commented
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?
-
Anonymous
commented
thanks David, this works great!
-
Anonymous
commented
same here !
-
Craig Doriot commented
agree this is important.. any plugins that can accomplish this perhaps?
-
omar
commented
yes please!
i was breaking my head trying to figure this out only to find out that its not even possible yet!
please add this feature! -
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
-
Faheem
commented
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!
-
Dalibor
commented
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.
