Add multiple states inside symbols / smart objects / components / animation / interaction
What do you think about something like this:
Design mode while smart-object selected can show one more tab at app header with smart-object name. In the appearance panel at the right adds some fields while smart object is selected.
To edit smart-object you should open tab with it and work as before, except that artboards name is the name for different state
And You can place another smart object in a smart object ;)
Dear XD Community -
I’m glad to announce that we have introduced the ability to add Interactive Component States in XD 24. This means that you could now add and manage your component states variations from a single component while enabling you to define Hover and Tap interactions between them.
We also preserve those states and interactions when you use those components across other XD documents. This means that you could have a single source of truth (Sticker sheet) for all your design system components with motion and interactivity baked into them. Any changes made to your master components in your source document will propagate to all linked components in all your projects so that your components are is always in sync.
To learn more about component states and how to get stated with them please check:
Watch out for many more improvements in this area in the coming months.
But in the meanwhile, please give it a try and share with us the areas that you would like us to further improve upon or invest in.
Geoff Meston commented
I forgot to say, when editing a symbol it would appear on its own artboard during editing, the artboard would be sized automatically to that of the symbol, but could be scaled. The artboard itself would be transparent so when in situ on the parent it was though no additional artboard existed.
A symbol that had multiple states/artboards could be indicated to the designer when the symbol was selected by way of an icon, like the new linked symbol icon.
Geoff Meston commented
It would be great if a symbol could have its own artboards, allowing you to create auto animations at a symbol level, so when placing a symbol on to a parent artboard it would effectively have its own states, animations, but still have the ability to interact and navigate its parent artboards.
Additionally, it would also then be valuable to have an interaction that could to tell another symbol to go to another state, i.e. trigger the tap event or time event of the that symbol from another symbol. Therefore, one interaction from a user could affect multiple things on the artboard.
I hope this make sense. Please feel free to email for further detail.
Regards, Geoff Meston
Still waiting this feature
This one will decide that XD will be the best or not. ( for UI Designer )
Herve Desrosiers commented
This needs to work like the linked smart objects in PS where you can select any layer comp from the linked file. It is an absolute must without which I can't use XD.
No states, no UX.
Scott C commented
I'm excited for this feature now that it's in the backlog. Any clue on ETA? Q1 2019 release?
not only the web buttons states (normal, hover, active, visited) but LIMITLESS!! :) Thanks Adobe!
Hugo Gnadeberg commented
For me (I am not designing web/app style scrolling flows) this would be the single most useful addition to XD. My prototypes have many elements which have many states, causing exploding complexity if I try to represent every single one as a separate artboard.
In Prototype mode - let me target a symbol, and select a state within that symbol. Multiple flexible states would be preferred as this should be able to be applied not only to buttons (no fixed normal, hover, press etc. states please)
Imagine I have a vertically long prototype and there's a menu button located at the bottom part.
I would like an overlay menu to appear below that button.
The current solution is to create an artboard the size of the main screen and estimate the position of the overlay menu.
The problem is that since the viewport is scrollable, there is no exact position wherein the menu will be clicked.
Can we have available other symbols of the same family with the same dimensions? (to swap easily between different state buttons for example as shown)
Make an option where I can create states of symbols.
Then, I would like to choose the states in different artboards
Agreed! :) Super looking forward to this feature being added.
There needs to be an option to anchor a overlay to an element, or make it relative to the scroll position of the artboard.
For example, clicking on a button to open a date picker, the calendar overlay will appear out of position if the artboard has been scrolled.
If you could have a symbol with an interaction that will replace the instance of that symbol while remaining on the artboard. Almost like it would activate a switch on a variable on a symbol. Maybe this is opening a can of worms, but this would be great with simple toggles.
Designers work on a component/module level, when they have the designs have been built and integrated within the CMS. Each module is re-used across the site for consistency. However, each component has different states/options. Designers should be able to create a component library, which can be re-used but also create various states. E.g with CTA or inverted version of the component.
Invision studio is heading this way and in Sketch you can have multiple states. Allow designers to create their style guide through XD and then let it influence design specs for Developers to follow the UX/UI rules that have been defined.
Yas! That sounds awesome! (eg Dropdown)
Leith Gow commented
Adobe needs to take inspiration from the power of symbol and nested symbol overrides in Sketch. The ability to toggle and override nested symbols, text fields, layouts and styles is what makes Sketch the far superior product. Also this forum desperately needs an upvote/downvote option...
Darbaz Dara commented
clicking on the menu icon to show the sidebar menu (can be a group) click again to hide.
This is another way to give the flexibility to designers to add the menu/sidebar to all Artboards in hide mode and can be enabled/appear/show only when you click on the menu icon.
it is basically giving the ability to click on an item to show or hide items/groups in prototype mode
Marcel Kuster commented
Hello, compared with other prototyping tools it would be nice to have the possibility to define different states for an symbol (e.g. normal / hover / focus / pressed and disabled) and Adobe XD would automatically take the wright state visualization, when the user touch or click the object.
Chelsi Peters commented
I still need the use case that doesn't use symbols to do this as not all the off, off down, on, and on down states would be a symbol but high resolution raster images from Photoshop to make the buttons for my industry. We have clients that sometimes require us to make the actual objects in 3D then use them as .PNGs in the GUIs.
Adam Trabold commented
Multiple states within a single symbol would be awesome. Figma does this, and it makes me jealous every time I see it