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.
David Knell commented
What will be SO important is the ability, in a shared prototype, to move between states without leaving a screen. For instance, checking checkboxes. Obviously, if changing the state changing something else on the screen, you'd want to create a new artboard and navigate to that. For instance, if checking a checkbox revealed content on the page.
The most common use I see of moving between states without leaving the page is hover-states for links and buttons. You simply create a button, make it a symbol, give it a second symbol state, and in prototype mode, create a link (or something) between the two states so that when you hover* over the symbol (which is in the default state) it changes to the hover-state until you stop hovering over it.
* obviously this can only work once Hover is an interaction type in prototype mode.
Add states to symbols so no need to link to a whole new page ie.
- buttons with roll over
- check boxes selected and de-selected
Like InDesign actions, it will be nice if we can have feature like this in which we can set up and action (example: Glow when hover or slide show like Muse)
Elizabeth Turner commented
making shapes a button, then have states for those buttons like, hover, visited, etc.
Theo Mayers commented
Being able to hide an object and show it on action is paramount to most meaningful prototypes. Make it like Axure only simpler. ; )
This is actually a feature which without, it is quite impossible to do a meaningful prototype for web and mobile - at least for me.
Thanks for your replay, I've tried to use symbols, I can hide items, but I cannot have them shown by triggering a link.
As target in Prototype mode it's only possible to change artboards, not create interaction inside one artboard.
I'd like to mock a behaviour.
I got it right, this point could be merged with Mikhail Nikipelov idea, they're very similar.
But, again, I don't think symbols can solve the issue, or at least I couldn't find any way to make them behave as I'd want.
Hi, would be nice to have the ability to show and hide object with an interaction in prototype mode.
e.g. I'd like to create a progressive disclosure path, I could create a group of elements, hide it and having them visible when the appropriate link is triggered.
I hope I've not been redundant.
Yes, we need this. Thank you all. As a designer and developer, I need to see how to interaction/function was seen.
Sebastian de Mel commented
Many of the form and other requests could be accomplished if you allow Interaction between individual elements.
Supported interactions: Show, Hide, Change (change image)
Example: Radio button
You have a dialog that has 3 radio buttons in it. To make them interactive, you remove the selected ball and do the following:
In Design mode:
1. Add the dialog
2. Create one shape with no border or fill on top of each raddio buttons text
2. Create a ball shape with fill for each radio button element
3. Make the ball shapes invisible
In prototype mode
4. Connect each invisible shapes (on top of the text) with the corresponding selected ball shape with: On click -> Show
- If the user clicks multiple radio buttons they would not exclude each other. This however could be accomplished by dragging On click -> Hide to the other radio buttons selected ball shape.
Need to be toggle button for design, show how to action button etc.. For example : I have a eye icon in the password input and I need to change eye icon for show password and hide password. Than prototype mode I change this eye very easy. It will be good for designers and developers how to view actions.
I'm repeating what everyone else is saying, but this is an important feature! Either this feature should
1. allow for multiple states within objects that can be toggled by actions
2. allow object visibility/properties to be controlled by actions
Or like in https://www.youtube.com/watch?v=PQ1f29pt5HE
it would be possible to have the on/off state WITHIN the switch symbol and then have working switches without having to duplicate the whole page.
It would be awesome to have a similar concept as proto.io's container states and animations in Adobe XD. It would allow us to define a symbol (container in proto.io) that has its own states and animations between those states and reuse them on several pages.
For instance: A simple slideshow within a page, define it as a symbol, make each shown picture a state and navigate through them via arrow-links. Add animations between those states to make the images slide in from left/right.
Daniel M commented
Allow us to create symbols that have actions without needing to wire to a new page. Example would be clicking on a toggle and having it switch. Similar to Adobe Animate symbols.
Victor Hoang commented
Hello team Xd,
I have a click dummy for a web application workflow that shows logged in and logged out states. To show both logged in/logged out workflows, I currently have to duplicate artboards and add slightly different logged in/logged out symbols for chunks of the UI.
I think it would be a nice addition to create my own custom variable `isLoggedIn` that I can associate with visibility of parts of a symbol or the entire symbol e.g. if `isLoggedIn`, show this text; else show that text.
In Prototype mode, one would be able to tie the variable value change to the click of a button or landing on some artboard.
Extending this idea, if someone was prototyping for multiple personas, a variable `userPersona` could be set to some persona string, and any symbols that watch `userPersona` can show the right thing for that specific persona after it is enabled in the click dummy.
I may have missed it, but it's crucial to validate user behavior and there doesn't appear to be a way to specify a touched state
Desislava Slavkova commented
Be able to add hover, on click state into the symbol in design mode and pick which one to show once you are in the prototype mode. would be very useful for menus, where certain button needs to look clicked. Right now one needs to create different symbols in order to do the different color of the clicked state, which makes the symbol useless for those cases..
Sjur Grønningsæter commented
States needs to be states, not variations. For example, a blue and a red button is variations of a button, and each a different symbol. A state is contextual versions of one symbol. The states of a blue button can be normal, active, pressed, disabled, etc. Other elements like form fields, table elements, shopping cart, etc. have other states.
In a prototyping tool, states should be animated/interactive “inline” on a page without the need to duplicate the artboard to experiment with the states.