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 ;)
Inc Beats commented
Suppose I designed a dashboard. And it has filter or more options. To design that I have to duplicate this artboard which is not friendly I think.
To be more clear, imagine more option has Edit, Share & Delete. For these I have to create another artboard to get a working prototype. But having too many of artboards like this in the project is a #PainPoint
Imagine I converted the more option icon which is a three vertical dots into a component. And this component has the ability to show/hide the child objects. Technically everything happening in the layer panel but we can switch to show or hide from the component section.
Viet Nguyen commented
When can we expect this feature to be delivered?
This is a must have feature and would help us to decide whether the whole team will move to sketch or XD.
Swap a symbol on click in prototype mode. e.g on/off buttons, instead of duplicating art boards to show a toggle it simply replaces the symbol.
Hussein Nouhian commented
Create animations for an object group or an object in a smart object such as Photoshop. After that for all the artboards. And let's have an object that has its own animation.
For example, double-click on the proprietary content of the object and create a custom animation for it, and then sync it while copying the animation track.
Indrajeet Raut commented
Yes, I vote for the same.. This is needed.
Jonathan Ellis commented
+100 votes to adding component management to the Property Inspector:
- Managing overrides
- Replacing one component with another from a tree structured menu (i.e. button styles)
Frankie Loscavio commented
Yes. This is needed.
I would love a feature like Symbol Overrides in Sketch.
You Insert one symbol into another symbol. All symbols that have the same size is then linked and you can select from a dropdown.
This is very helpful where you have multiple elements that show different states of a menu for example.
Yi Liu commented
I hate to build a huge website system without this. :(
It's so painful especially when it comes to making some animes.... have to link them 1 by 1.
This is very important if master components design/style-wise influence all instance of their child components why if I prototype wire a button in my master component does it not propagate every child instance with that link? This behaviour is a functionality mismatch currently, when compared to what happens when you make design changes to the master component.
Spencer Frame commented
I'll do you one better: Theme Toggle
- You can create a theme option, that if toggled, will allow one to change the entire saved colors and create a new theme.
- You can also implement this across design as well. If toggled, all artboards get different names, and you can change elements accordingly.
This would help
Yes, something like that, a shortcut in the current flow would be to make a component out of different artboards which can be used inside another artboard, this way auto-animate and all features stay unchanged.
Need to add animation inside components, through a smart animation timeline popover? here you have my suggestion adobe.ly/2Qxybz6
Hello, I want to create a page with several checkboxes, and it seems that I need to create multiple artboards so as to show the combination of those checked.
Please!! Why not dynamic panel to show states of a component inside one single artboard.
It would be great to animate between specific elements on an art board and not the whole art board.
Lisa Weber commented
It would be awesome to link certain interactions to a master component.
I have a Button, which on click (soon on hover when that function comes) changes the color.
As it is right now I would need to duplicate the artboard everytime I use this button to animate the hover-effect.
So it would be awesome if I could link a certain action to the mastercomponent: I'll add the hover effect just on the mastercomponent and it always apears again, as soon as I put another button on the artboard.
(similar to the nested components in Principle:
Jason Quiz commented
For Components like a "Menu Bar" or "Header", more often than not, the items with in the component (e.g. Menu item 1, 2, 3 & 4) all link to the same four screens.
Currently I can place a child component on my artboard, wire it up in prototype mode (then while still in prototype mode) copy the component and paste another child.
The problem is when I forget and drag out a new component from the library or copy paste from the parent component. I then have to wire up all my prototype links again.
Another useful part of this would be to not have prototype links break when the component is placed on an artboard it was already linked to. This would allow you to also copy / paste child components from anywhere and retain all the linking.
Daniel Giraldo Viventura commented
Adobe xd you want the first place, congratulations for the new features and thanks a lot, only is missing video and gif support to make the big cake
Buttons states with the same CTA of the sketch with blending mode, to create and change buttons more easily and automated.
Color: palette / primary
Jason Quiz commented
It would be awesome to have the ability to create one single Navigation / Menu bar symbol, and then have a way to chose which "state" the symbol shows.
- Nav Item 01
- Nav Item 02
Currently I have to create a symbol for each of my navigation states, with sub symbols (that span each of the nav states) so that I can globally update colors and icons. It is workable right now, but time consuming.
In Photoshop I was able to achieve this using Smart Objects with different layer comp states saved out. It was far from a painless process, but it was achievable and sped up my prototyping and comp creation time.