I've only been able to use this for:
* Fake Dropdown menu's when you have a "filter" for a category, or a action dropdown menu with more actions like "Edit, Copy, Delete" and stuff like that.
* Instagram picture hover with details - with a lot of picture edits for each default/hover state, because if you udate the image in the default state, it doesn't automatically update the sub-states. However if you change the text in the master and font on the default state, it DOES change the other states.
* Logo components with 3 color states don't work well, unless you limit how you use it. When you use the instance and scale the logo, it only scales the default state, the other "color" states are not scaled at all, making this pretty useless to use (Sketch people will know what I mean here).

Hmm. I'm not sure this was ready for prime time..

Sorry, one more thing! I'm not seeing a way to delete states? Also a nice-to-have would be a right-click option to "set as default state"

Hi! This is great. Loving it so far. One limitation I see (I'm not sure if there's a workaround for this) is with nested states, or being able to change size of a component as part of a state and have the rest of the surrounding content adapt to the size change. For example, I have a page with a bunch of expandable sections. And I don't think I can use states to show the various states that the page could be in - i.e 1st section is collapsed, 2nd is expanded. etc. It seemed like it would work at first (because you CAN have different states of the component to show expanded vs collapsed) but the rest of the surrounded content does not adapt to the size change of the different states. Very hard to explain, and none of that made sense probably!

This is a great start. Overriding states is a real pain.

1. I created a menu item and set the font and hover states. Then I used it in a menu for 8 different links to show the hover state. What a disaster. The overrides for text have to be done on each and every "default state", "hover state" and "active state" - this makes the component pretty useless. I can then just create 8 different components one for each unique menu item.

2. If you use components inside a repeat grid, the hover states don't work at all. I have to ungroup the repeat grid to get the hover states to trigger.

3. There is a flash that happens on each hover item and there is a long delay before the hover state triggers. In a grid of buttons, if you move from button to button, the next button doesn't trigger, because the previous hover state is still transitioning back from hover to default. That's annoying for the customer who things the hover is broken.

I really would like a way to rearrange the states that I've created within the component. Has this been logged yet?

I'd also like a way for states to be more interactive. For example a clicked state which then transitions to another screen, not just the previous state. Or if there is a multi selection screen and a "continue" button is disabled until a selection is made in order to move forward.

Honestly right now it's not fit for purpose, other than very simple linear prototypes.

For now try out something like ProtoPie.io. It has a great free course to learn how to do some complex prototypes.

hi. i am designing a web interface with a lot of functionalities (like a campaign management). and i have a lot of buttons that if they are pressed, they will unhide a section, and if they are unchecked again the section will be hidden again. now i am creating a new artboard for each situation but there are too many situations and I hope those components will save me. I tried, but i couldn't do this: can I make a button as a default state, and for adding a different state must be the same button but edited or can i add a section?
pictures for explaining: i want the button for the first artboad to bethe default state and to transform it when clicked in the table and buttons from the second artboard, without having 2 artboards. is that possible?
thank you

Right now overlay position is relative to the viewport - in order to prototype properly the option to position overlay relative to artboard is a required feature.

An easy example of how not having this feature creates a bad user experience is when you create an overlay for a dropdown menu (ex. a filtering dropdown box). If the user of the prototype scrolls at all before clicking the overlay trigger the overlay design (ex. dropdown box) appears in the wrong place.

There is no work around for this that I can see other than creating a new artboard with the dropdown box on top and transitioning to that instead of an overlay. However for a website application project with 20+ artboards that all have the same dropdown feature, it's simple not feasible to be duplicating every page design.

I implore you to add this feature.

I don't know if I'm quite getting this feature, but if I got it right, it would be like flash had the button component. You'd create a symbol, then you'd choose the "up", "hover" and "down" state. This way, when using the prototype, you'd see an rollover effect and click

Choose an object to which the Overlay is attached/anchored to. When you move the object, the overlay automatically moves with it.

Would work in design mode as well as prototype mode.

Examples:
- Design mode: I have an info button on a page. When clicked, an overlay with more info shows on top of the info button. While designing the page, with each iteration I reposition the info button number of times and have to adjust the corresponding overlay manually. If it was attached to the object (info button), I would not have to do that. (now imagine I have 20 info buttons, menus etc on a page I am working on and I have to manually move all the overlays with each iteration...)

- Prototype mode (when viewing live prototype): since the overlay is attached to an object on a page, the overlay can scroll with the page. In other words, if I scroll a page to a random location and then click a link with overlay, the overlay would show above the same location on the base page (unlike it is currently, where it shows higher, or lower, then intended).

Note: you would have to make possible to display overlays off the viewport first, to make this work (related: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/34758691-advanced-overlay-positioning-artboard-controls).

Could there be a way to create the same concept as components but as interactive symbols? An interactive symbol would control the interactive properties without effecting the destination. Therefore, I will know what type of interactions I am using throughout my prototype and easily change the interaction properties on the fly throughout the prototype.

States of buttons in one component (normal, hover) selected via right click on the component on the artboard would make it easy and fast to design

It would be great if either default states (i.e. visible or hidden) or custom versions (i.e. change color to #000000) could occur on click.

Practical usage: In the development of an icon, if the icon is tapped, the color is adjusted to the state the tap puts it in.

There are ways to currently do this, but in current prototyping I have 14 icons on a single artboard that interacts with a total of 16 similar artboards to provide a fluid auto-animation across the various states of the design.

Adding in a tap-to-change-state for the color of an icon is not feasible (due to time) and an option would make this functionality possible.

tl;dr: when an object is tapped, it can be set to just change the state (i.e. color) of the object while it is in the state.

Suppose I designed a dashboard. And it has filter or more options. To design that I have to duplicate this artboard which is not friendly I think.
To be more clear, imagine more option has Edit, Share & Delete. For these I have to create another artboard to get a working prototype. But having too many of artboards like this in the project is a #PainPoint

My solution:
Imagine I converted the more option icon which is a three vertical dots into a component. And this component has the ability to show/hide the child objects. Technically everything happening in the layer panel but we can switch to show or hide from the component section.

When can we expect this feature to be delivered?

This is a must have feature and would help us to decide whether the whole team will move to sketch or XD.

Swap a symbol on click in prototype mode. e.g on/off buttons, instead of duplicating art boards to show a toggle it simply replaces the symbol.

Create animations for an object group or an object in a smart object such as Photoshop. After that for all the artboards. And let's have an object that has its own animation.
For example, double-click on the proprietary content of the object and create a custom animation for it, and then sync it while copying the animation track.

Yes, I vote for the same.. This is needed.

+100 votes to adding component management to the Property Inspector:

- Managing overrides
- Replacing one component with another from a tree structured menu (i.e. button styles)