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:
https://letsxd.com/states
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.
Thank You,
Sherif
-
Joakim commented
What?
Allow layers that you create, to have multiple states.Why?
Because this is how interactive software behaves. And what we do every time we make a copy of an artboard, to make a button, list or something else switch states. Essentially what we use Invision, Marvel and all the other prototyping tools for.Example:
I make a blue button, with text inside it. Save it as a layer.
I click on "state 2" somewhere, change the color and text of the button, and set it to activate on-click following state 1.I go into preview, and click the red button --> it switches to blue.
But it can become very complex?
If you can make it easier than copying artboards, then I would say it solves our problems.Where can I see something like this?
Axure -
David Knell commented
Sketch v41, which came out today, does this now. Their method is that they allow you to treat any same-sized symbols within a symbol as states: you can click on the outer symbol and toggle between the inner symbols. I'm still getting used to this method, but it's a pretty interesting approach and seems to work pretty well.
What's missing from Sketch's new states ability is . . . prototype mode! In XD, being able not just to switch between states in design mode, but being able to prototype between states . . . that is the holy grail of awesome!
-
Peter DiBartolo commented
+1
Perhaps consider a Properties Panel (like Photoshop).From Photoshop:
Multi-layered smart objects should be imported (or linked) into XD, with states managed by a Properties-esque panel.From Illustrator:
Multi-layered Symbols could be imported (or linked) into XD, with states managed by a Properties-esque panel.Within XD:
Multi-layered Symbols could be used and managed by a Properties-esque panel.Here's how Bradee Evans speaks to this concept within Photoshop.
https://medium.com/photoshop/layer-comps-and-place-linked-smart-objects-6feb574963ef#.5n94t1v4e -
David Knell commented
Please do this!!!
I envision the current special Symbol folder (the one that has the double-circle icon) and inside it three (for example) special State folders (that have a different, unique States icon), one for each state. The top State folder is shown by default (and the rest are hidden), but you can right-click an instance of a symbol and change it to one of its other states. Or in the layers panel, instead of an eye icon to show/hide each layer, you have a radio button of sorts for each state to select which state is shown. Something like that.
I would hope that in prototype mode you could link symbols' states to each other. That way you can have things like switches, dropdown menus, text in text fields, hover states for buttons and links, click to enter edit mode on a task or something, checked checkboxes, basically all the things!!!
Seriously, states and linking between states would be so rad!!!
Here's a mockup of how states inside symbols might work (I didn't mockup unique state icons, though; I just kept the folders the same folder icon): https://xd.adobe.com/view/c0b26f8a-c8b5-4d59-a081-b9658a45d81f/
-
Toon Van de Putte commented
Perhaps a solution would be that an interactive element (inside or outside a symbol) gets a new type of action: 'change value' or something similar. Symbol instances could then dynamically change state based on that value.
You could, for example, have a button that sets a 'color' value to the string 'Red' and then have a symbol that shows its state 'Red' whenever the global 'color' value is 'Red'.
I do wonder, though, what the conceptual difference would be between a state and an artboard, save for one being nested inside a symbol. -
Michael Gehrmann commented
Here is a little sample Case: http://adobe.ly/2deGQEJ
In a Screen-Based Flow this simple interaction changing the color of an element takes a lot of screens to simulate – and due to practical restrictions, I limited it to just three colors.
The Problem is Making changes to elements later have to be replicated on many screens. And it's hard to keep track of all the connections between screens.
You can just imagine the number of screens exploding, when a second feature is added.
eg a button changing the font-family of the word "Masterplan"With State-Based Interactions, this could be broken down to one or maybe two screen.
-
Kaue Lima commented
I would like to add that multiple states could be toggled by actions like tapping on the symbol, one of it's elementos or other symbols.
This would enable doing things like expandable objects, animated elements within a screen and other.