← Adobe XD: Feature Requests

Request details

Adobe XD: Feature Requests: 01 : Design mode

Categories

(thinking…)

Component color and style themes

Let's say I create a simple button component. Then I want to have an outlined button. Then I want to have both buttons have a state containing an icon. Then I want all these to have a hover, active, and disabled states. On top of all this, I want a version of all of this for light mode and a version for dark mode.

See where I am getting at? I am creating a design system that my team can reuse for their designs. Many of the components I am trying to create are fairly complex and creating a separate component for each of these states is very tedious and will not scale well. Is there currently a good way to handle this? If not we really need something like this.

12 votes

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Austin Condiff shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close

We're glad you're here

Please sign in to leave feedback
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • plainclothes commented  ·   ·  Flag as inappropriate

    This would be hugely useful.

    If two long-standing feature gaps were addressed this could be done without a separate theme capability:
    - One component can be based on another, complete with states
    - Secondary states inherit default state changes

    Then you could quickly create a component based on the primary "theme", make a few style changes, and have everything else managed from the parent.

  • Justin Arendt commented  ·   ·  Flag as inappropriate

    Have another level about component states to create a different theme of that component with out having to duplicate. Example, I want to create a dark mode or high contrast mode of all my components while keeping all my current states(active, clicked, toggled, etc..) intact without have to recreate a new component with same states or new XD doc and call it dark.

  • Jeroen commented  ·   ·  Flag as inappropriate

    Absolutely! This is something that I miss as well! I am currently working on a UI library of components, which have a light mode and a dark mode. It would be great if components with states would have multiple mains (or call it multiple themes).

  • Anonymous commented  ·   ·  Flag as inappropriate

    Often I am designing for many system which could have the same components across them but I need to switch the theme based on their branding. This would require a named colour swatch to be completely replaced on mass by a saved one from some other assets.

    Lets say I have a blue theme, I have named all the colours.
    The red theme has all the same colour IDs but different colours.

    This would allow me to demo the same design with different colours offered.

  • CArlito commented  ·   ·  Flag as inappropriate

    Create and change the theme easyless.
    Like :
    Pass all the project in dark mode.
    Or,
    pass Only this component in "Market theme" (promotion, ...)

    Switch the theme by component or page (when this is build before)

  • Austin Condiff commented  ·   ·  Flag as inappropriate

    Another example would be checkboxes, radio buttons, and toggle switches. They all have on and off states, but those on and off states also have hover, pressed, and disabled states as well. They also can have a light and dark mode variation.