New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 01 : Design mode

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1366 ideas
  • 02 : Prototype mode 370 ideas
  • 03: Share mode 50 ideas
  • 04 : Sharing on the web 214 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 38 ideas
  • 07 : Integration with other tools 118 ideas
  • 08 : Mobile (iOS) 25 ideas
  • 09 : Mobile (Android) 19 ideas
  • 10: Developer Handoff 140 ideas
  • 11: Plugins 135 ideas
  • Other 109 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,868 ideas

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.

  •  
    example-state.png 24 KB
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  ·  February 14, 2020  ·  Flag idea as inappropriate…  ·  Delete…  ·  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
Tweet
  • Remove
Attach a File

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  ·  July 02, 2021 16:47  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Justin Arendt commented  ·  July 01, 2021 14:28  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • Jeroen commented  ·  November 26, 2020 01:40  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

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

    Submitting...
  • Anonymous commented  ·  September 25, 2020 06:10  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...
  • CArlito commented  ·  September 15, 2020 00:23  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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)

    Submitting...
  • Austin Condiff commented  ·  February 14, 2020 08:06  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    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.

    Submitting...

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy