Request details

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 ;)

1,273 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Mikhail Nikipelov shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

128 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • Jonathan Ellis commented  ·   ·  Flag as inappropriate

    +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)

  • Ruben commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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.

  • James commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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

  • Kevp commented  ·   ·  Flag as inappropriate

    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.

  • Nico commented  ·   ·  Flag as inappropriate

    Need to add animation inside components, through a smart animation timeline popover? here you have my suggestion adobe.ly/2Qxybz6

  • Jaime commented  ·   ·  Flag as inappropriate

    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.
    Thanks.

  • Tyson commented  ·   ·  Flag as inappropriate

    It would be great to animate between specific elements on an art board and not the whole art board.

  • Lisa Weber commented  ·   ·  Flag as inappropriate

    It would be awesome to link certain interactions to a master component.

    Example:
    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:
    https://www.youtube.com/watch?v=TRnVZLRDeng )

  • Jason Quiz commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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

  • Anonymous commented  ·   ·  Flag as inappropriate

    Buttons states with the same CTA of the sketch with blending mode, to create and change buttons more easily and automated.

    Example:
    CTA: Primary
    State: None
    Icon: None
    Color: palette / primary

  • Jason Quiz commented  ·   ·  Flag as inappropriate

    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
    - Etc.

    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.

  • Clemens Gramespacher commented  ·   ·  Flag as inappropriate

    This is definitely a key feature. Otherwise you have to maintain dozens of artboards – proto.io e.g. has this feature for years already.

  • Scott commented  ·   ·  Flag as inappropriate

    Hello,

    There is no option to create toggle or push buttons that activate individually without another button being deactivated. All buttons seems to be momentary...

    Whenever I create an overlay button I do not have the option for the button to stay activated until I choose to click that button again to deactivate it.

    For example, I cannot click Button A and then click Button B without Button A returning to it's original state.

    Is there an update coming real to soon to fix this?

  • Anonymous commented  ·   ·  Flag as inappropriate

    Adobe, just creating the possibility to use a SVG like an image or an editable vector (similar to photoshop when you paste - path or pixel or smart), so we can create states using SVG like images meanwhile, please

  • Angela Paralescu commented  ·   ·  Flag as inappropriate

    The way I imagine the Trigger working is a bit different. Simply because this way of implementing animations will lead to artboards heavy files.
    Why?
    Because you do not allow animations inside the same artboard. Object 1 - trigger - Object 2, on the same artboard, will help a lot. I know it's much harder to code, but on the long run, this would be the most versatile, elegant and simple solution for the end user to get the most out of the software. Triggers between artboards are great, but why not allow triggers between objects of the same artboard :D
    The idea is - allow animations to happen on the same artboard, not only between artboards.
    Your artboard contains 3 element and when tap on element 1 you want element 2 to hide (or any other action). Not to achieve this we need 1 extra artboard, This must not be the case. It's more elegant to have it on the same artboard and it will not overload the workarea with artboards.

  • Anonymous commented  ·   ·  Flag as inappropriate

    You can create a group of symbols and be able to switch them, for example i want

← Previous 1 3 4 5 6 7

Feedback and Knowledge Base