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.
Would be great if we could add on click actions to buttons on prototype mode.
Like for example changing colour on click or even expand boxes to show on click behaviours. At the moment we can only get this feeling by creating additional boards. Is this something you guys might consider for future updates?
Chelsi Peters commented
This is a must have to get sign-off for using XD as a rapid prototyping tool for our company for more than just the design team!
Multiple states would be incredibly valuable, also make XD super-competitive with Axure and Sketch! PLEASE fast-track this feature set!
Hari Prasad commented
If the button enlarges by x% (say) on hover, it would be give a great experience in apps like media centers. This can be very useful while showing the prototypes to the investors.
Doug Oberndorf commented
This is pretty basic, but I cannot seem to find it listed, so:
It would be nice to have things that can be turned:
-On / Off
-Checked / Not Checked
I have found ideas based on animation and radio buttons, and this link might be along the same lines:
So, whether it's animated, or with multi-states, or just swapping layers, or whatever, being able to swap between items to show on/off, checked/unchecked, infront/behind, on top/under, etc.
Symbols should have button states integration, even if the sysmbols are images we should be able to choose from normal state to active.
I was thinking to share this with you as a feature request and base for inspiration.
I believe XD needs to think about the states of the various controls we design for digital (hence interactive) products.
I sense that an artboard should be "expandable" in order to design the states of various controls that are "designed" on it. Imagine a button (or several ones) on an Artboard at rest. If an artboard was to be a collection of objects we could by invoking a style view, recreate the artboard and as we change the aspect of the objects (which are basically just copies of and therefore linked to the at rest ones) and so create hover/tap states.
This would allow a minimal interactivity of objects.
If Id do that on a symbol, the symbol would remember his states automagically and I could centrally change just the states of the symbol.
It's hard to explain, basically I am saying threat the object as controls and let us alter their states. I tried to mock the idea up and made a movie.
If you have questions please ask them.
Cheers a fan.
States and interactions would be a great enhancement. I don't think these features need to be limited to symbols/smart objects, but agree that they should be included.
Thomas Hallgren commented
Definitely, states would be a big major plus.
yess!!! This is essential to get the real click experience!
This, absolutely. Would be excellent to be able to tie the state to another element or symbol as well, if desired. Also please note, make it possible for the state to persist.
Think along the line of a set of radio buttons, or sliders, and being able to show the multitude of different possible combinations without having to create dozens of duplicate pages.
for me its less about the interactions, but more about the ability to have different visual states of a symbol.
example use cases are different button states (primary, secondary, tertiary, disabled,...) or different text input fields (empty, filled, focus, error, ...)
example desired behavior:
i create a symbol with all potential elements for an input field (field value, field label, underline, error text). i then create different states of the input field, depending on which certain elements may be shown or hidden, and/or have different text color, style, stroke colors, ...).
potential ways to implement: a) when editing a symbol show an interface similar to layer comps on photoshop. i edit the symbol to the desired state, then create or refresh a symbol state. or b) when editing a symbol extend the layers panel to have additional tabs for each state. i switch to the desired state tab, and then edit my symbol, including turning on/off visibility in the layers tab)
Vova Kowalski (ndeerz) commented
Very essential feature.
Iván Quiñones Werth commented
Scott C commented
Created the separate ticket but It's name is "Design Panel and String Variables"
Scott C commented
I know there is another idea about this, but only as I can only comment on it and can't add my own screen shots of why this is so important.
If for example in the UI I want to change the value of an element I have to create a whole new art board just to change one element on the screen.
As an applicable example: I'm creating an alarm clock app. I want the user to tap buttons to move the hands on the clock and see the time change in another location of the UI. I will need to create an art board for each of the locations on the clock I want to have the hand point to and change the time value on the UI.
This means I'll need to clutter my layout with at the very least 12 extra art boards if i want to show just the hours, 24 if I'm going to show hours at 30 min intervals. Lets double it if I want to show an AM and PM state. That's 48 art boards and a screen that looks like the attached images. This has even contributed to some sluggishness in the XD software when I create a Prototype Wire.
This of course could be mitigated if Symbols could have variables attached to their transform values or to string values I'll be trying to create a separate ticket titled "Transform and String Variables"
I totally agree, this could take a similar form to the way menu button states work in Encore DVD menus made in Photoshop (transparent layer masks with codes for roll over and click)
Symbols should have different states.
A Button for example coud have the states "default" and "hover".
The states can be interacted with in prototyping. So when I hover over the button, its state changes to "hover".
Or when I click on the "+ more info" on a card, it's state changes to "extended".
This way, interactions can happen on one screen (things appearing, opening, changing color, etc.), without having to duplicate the same screen over and over again.
Aygün Völker commented
I posted four little pictures on a canvas and succeeded in making them unvisible. My goal is to make them visible by clicking on them or on a button. How is this possible? Since now it's only possible to change to another canvas by clicking on a button. Is there a way to stay on the canvas and only make an image become visible?
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.