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.
It would be great for any button that takes you to a new page or just any button in general to have the option to change its state after it's clicked on. Similar to website links that are blue, after you click on them, they turn purple, showing you that you have already visited that link. For XD it would mean we could show the end user which links they have already clicked on.
Another example would be if we created a game with XD similar to Jeopardy. Where once one of the categories and prices were selected, that it would change its color state so you knew which ones were already selected.
I attached a rough mock-up of what it could look like. It may even be better to change the design, not just color. So in the example, you see a circle with a plus, after it's clicked on, it would be cool to have it change to a checkmark and green instead of purple.
Vitoria Faccin commented
Being able to have an "active" version of a button out of the artboard and be able to switch to it (and stay on the page) as an active state without having ot copy artboards to infinity.
At present animation is done by creating multiple different artboards which is tedious if you have multiple objects to animate.
Allow animation of multiple objects on single artboard as shown on image attached.
Vin M commented
Carousel of images to scroll up and down or left or right. Also as on website when we click on links it's color changes giving us confirmation that it has been clicked. double tap to zoom in and out. expand and collapse of menus, hide when not needed
Could be nice if you could have 1 or 2 states for a symbol (such as having different colors) so you don't have to ungroup a symbol when giving it a new state in a specific artboard, or making double the amount of symbols for each state.
You should have the option to create elements and hide them in the layers panels, but through an action it should be shown, like a menu from a mobile app or some tooltips on certains elements of the screen.
It would be great to have the ability to make objects on a single artboard have interactions kinda like Axure. Example, if you click on a checkbox, another panel or set of objects are shown or hidden. This is desperately needed.
Bring Adobe Flash's movie clip mentality into symbols. Button-graphic-movieclip and basic interactions with variable. That's the idea :)
Animations only work between entire artboards. I would like the ability to create a symbol that has an animation within it (a loading spinner, for instance), then drop that into artboards that have their own animations.
Example use case:
User clicks a button, and I want to show an animated loading spinner for some time before transitioning to a new artboard with a "success" message. This spinner is part of a design component library, so I'd like to reuse it (animations and all) many times.
Why is this valuable to you?
It is extremely cumbersome to provide micro animations within an overall prototype, since the current workaround requires creating tons of artboards to achieve the desired effect.
It would be nice if I could tell the symbol how many times I want to animation to loop (1 to infinite) when I drop it onto an artboard.
Drag is fine but when you create Paging or Drag more than 2 objects, The mid elements' direction is problem. User can not select direction of drag.
No, I was looking for something interactive.
Imagine, for example, I wanted a to make a calendar with project tasks marked on it. When you clicked on a task you would see a pop-over of the details on that task.
Now imagine I wanted that calendar to be on every page of my site. Presently, I would be obliged to duplicate EVERY page in my prototype just to make a single task clickable!
What I would like to be able to do is build this calendar as a seperate prototype; then build my website as a seperate prototype, and finally, embed (LIKE AN IFRAME) or nest one prototype inside another.
Effectively, you would see a little interactive calendar somewhere on my prototype site and it would be interactive without making you leave the page of the prototype you were on.
Pleasse let me know if that's still too vague and I'll knock up a gif.
Thanks again for your time,
Best Of All Films commented
use "Auto Animate feature" in new Oct 18 update
When I want to spec an entire app, I need to be able to show error states/different things that could happen if I click the same button. I've been really struggling with a way to show that dynamically with XD. The whole reason I want to use XD is for people to be able to walk through the entire app interactively, including if they were to potentially get an error. I haven't found a way to do this yet.
For example, I'm currently designing an app where a button will take you to a pop-up that shows you some content. If the app is unable to show you the content, the pop-up will look different. I don't want to have to hand wave to the user - I just want a way to show them that this outcome could have multiple states.
Would be awesome to have a customizable and working toggle switch for UI, something that is a ready to use, without the need to prototype every switch with multiple artboards.
It is a great thing to have now the linked symbols and their overriding possibility. However, while working with that I came to a realization that I cannot show/hide a single symbol or an element of a linked symbol in the destination document. For example, my original Symbol from the source document has 3 elements (as shown in the attached screenshot) and I want to hide only one of them in the destination document. I am using the same linked symbol 5 times (5 UI cases) in my destination document but for 2 UI cases, I want to just hide some elements and still be able to use the same symbol, rather than creating a new local symbol. Would this be possible in the future?
Kenneth Kawamoto commented
There's *Linked Symbol*, which provides similar functionality: https://helpx.adobe.com/xd/help/symbols.html
Along with the much-needed hover and tap/active states, we need at least a way to define "on/off" or "triggered" states on UI elements.
An Adobe team member said the new auto-animate feature allows to handle micro-interactions, and posted a video where the whole artboard is duplicated twice just to set up a state change on a heart-icon button. It feels like more of a hack and barely manageable in a realistic production context...
We need a simple "states" properties panel for any UI element, which would include 3 states: hover, tap/active and "triggered" or whatever you wish to name it.
It would be great to be able to embed one Xd prototype within another.
For example, I could make a prototype of a widget and then embed that (drag and drop the file hopefully) with a prototype of a webpage to create 'nested' prototype without having an enormously complicated prototype.
It would be a very powerful way to create more flexible prototypes.
Thanks for all the work.
Geoff Meston commented
In addition to this, have Symbol level prototyping, effectively symbols would have there own artboards and be able to auto-animate. explained here:https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/35770021-symbol-level-prototyping
We can use animated symbols made with auto animation like movieclips on Flash