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
15 comments
-
NVK
commented
Exemple :
I have 3 components, two of them have hover's state, the third's state depend of the state of the others components. -
Anonymous
commented
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,
David Alcala
XD QE -
Ralf
commented
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.
-
Jerimy Brown
commented
OMG... I can't believe we are having to ask for this. I was so excited about component states because I assumed it would launch with this ability. This was the first thing I attempted with this feature. I also can't believe I am only the 40th vote on this request, but at least I didn't have to write the request, which I was on my way here to do LOL.
This would make it so XD could destroy the competition on prototyping and it's what I assumed we were getting, when they advertised it as component states, instead of button states... What we got was button states, not component states, what a let down.
-
Anonymous commented
Yes please Adobe, this feature with a lot of potential! it would save a lot of time of prototyping also it avoid copying artboards all the time. We are in 2019 and I dont see the point of keeping the features too basic, (invision). So I really believe you guys can do this!
-
Roland Weigelt
commented
I just have revisited Adobe XD after waiting for the hover feature for months. Now that component states are implemented, I'm trying to prototype a two-level menu - and I'm stuck again. When I hover over an item on the first level, I want to show the menu items of the second level. I manage to highlight the menu item on the first level (easy), but cannot switch to the corresponding second level menu items.
-
Joseph Silva
commented
Absolutely, completely agree!! This ability would make XD super powerful! I love the new states in XD, but I was disappointed that I could not use component A to change the state of component B. I have faith in the XD team that we will get there though! :-)
-
Alex H
commented
yes!!! 1000x yes!!
-
Harun Alikadić
commented
This would be interesting. I vote it. But I do not find it as important as fixing and improving existing features, like the new component states and multiple interactions.
-
Niklas Drugge
commented
Yes absolutely! The new component states are just what was needed for XD, but without this functionality they offer very limited benefits.
I was also trying to achieve something very similar an bumped into this problem. I was hoping to do a list element with a checkbox inside it - and by clicking the checkbox it would change the list element to "selected" state. Obviously I would like to keep the checkbox as a component to use elsewhere in the design as well.
However, since the checkbox is a component, it cannot control the parent elements state - thus making it impossible to change the state of its parent, the list element.
Non-component items CAN control the parent's state, so I would think this would not be that big of a deal to fix. So for example if I make the checkbox not a component, it would work just as intended.
One workaround would be to place an invisible box on top of the checkbox component, that would then control the parent's state, but that's such a dirty way to fix it, that I would prefer not to use it.
TL;DR Nested component interaction destination cannot be set to change parent state - this is a problem!
-
Morgan Caldbeck
commented
I do agree, that we should have the ability to use a state change trigger the state of an otherwise unrelated component.
For example, when building a mega menu, I have a list of items on the left side. I want to be able to “click” that item (thus triggering a state change), and further have that change my items list on the right to a state reflecting the clicked category with its appropriate set of items.
This would allow us to create fully functional site demos.
-
Morgan Caldbeck
commented
There is the ability to use components inside of components in different states. As of now, we can set component A to a different state, if component B is inside of A, we can set A to, for example hover state, and in design mode, with A set to hover, we can set B to a different state as well.
With this method, you can alternate states of components within other components based on the parents state.
That may be hard to understand but that’s a very brief summary of doing what your talking about here to a limited degree.
-
Victor Bergh
commented
This would be extremely useful! If that is made, XD will be more or less complete!
-
Xavier
commented
Absolutely right, like a real app.
> events bubble up. The super-component composed of sub-components have the ability to hook each events trigger by the sub-component.
> event go down. Super-component can trigger event hook by sub-component.Like this each sub-component keep their life and if they are part of a super-component this one become the chef.
