Request details

← Adobe XD: Feature Requests

Use CSS properties / classes to specify object appearance

Add unique CSS properties to object properties.
Things like Margins, Padding and un-even borders are not common for design apps, but it would be great to define them per object in XD, honor them in the design mode, and export them as part of the object css,

1,042 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

Yoav Chen shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

46 comments

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

    Yep, agree with it, also i think works with properties systems for components could help with all problem we may have when we want to change only some propertie or restore only a special propertie form master component instead of restor all the state

  • Anonymous commented  ·   ·  Flag as inappropriate

    All basic text and object styling that exists in CSS should be available one way or another also in XD

  • Cubelodyte commented  ·   ·  Flag as inappropriate

    There are numerous requests for XD that could be translated to:

    Allow XD objects to behave as HTML objects with regard to CSS.

    In other words, one might expect that anything which could be done in CSS could also be done in XD.

    Example:
    A basic rectangle in HTML can have a border Top, Right, Bottom, or Left.
    XD provides no such ability.

    If we could apply CSS to XD objects directly in the interface, it would not only expand what we could design, it would also allow us to provide that CSS to our developers with no conversion or loss off integrity.

  • Vlad commented  ·   ·  Flag as inappropriate

    Please also add auto values.

    Currently, you either have the button size based on height & width or on padding—it would be great when setting up the padding to have the auto option (i.e. when a button needs to have the same height but the width is dependable on the object it is enclosed in or a fixed width; and vice-versa).

    Thanks

  • Valentin de Bruyn commented  ·   ·  Flag as inappropriate

    I would add that style tokens would be a first step that might be easier to implement.
    Storing spacings, or border styles for instance, as we can already do with font styles and colors would seriously be a blessing.

  • pt commented  ·   ·  Flag as inappropriate

    This is such a no brainer. Every time I make buttons and I need to resize them manually to simulate stable "padding".

  • Anonymous commented  ·   ·  Flag as inappropriate

    I'd love to be able to inspect in a web browser and copy/paste the element styling and recreate it in XD through CSS code.

  • Zack commented  ·   ·  Flag as inappropriate

    We absolutely need to be able to name style elements to translate to CSS classes in inspect mode.

  • Cynthia sanchez commented  ·   ·  Flag as inappropriate

    For text too. Titles and paragraphs have important margin properties that currently is not possible to specify in XD and we are struggling a lot with

  • Mark commented  ·   ·  Flag as inappropriate

    I'd also like to see Spread in the shadows property...especially negative spread!! 😊

  • Menghui Li commented  ·   ·  Flag as inappropriate

    I am willing to code my object style in CSS. As long as the components can work as classes.

  • Menghui Li commented  ·   ·  Flag as inappropriate

    Also please make text box works like a <div>, with border, padding, margin everything.
    Then I'll never need to draw the same button a hundred times.

  • Peter Scott commented  ·   ·  Flag as inappropriate

    From a design perspective, this would be a huge improvement, especially if you had the ability to update on the fly various XD files relating to the same project. Also, updating fonts across the same files would also be handy - but I guess in future this could be done via CC Libraries

  • Cubelodyte commented  ·   ·  Flag as inappropriate

    Note to Adobe:
    I see this request has been "under review" for over 2 years. Here's a little something that might help you push it over the edge.

    Given that an enormous number of feature requests revolve around the ability to make styling adjustments to objects that mirror what's possible in CSS on a page, taking on this request would allow you to clear dozens of related requests in one stroke.

  • Chuck Howard commented  ·   ·  Flag as inappropriate

    so we already have the "Fix position when scrolling" but it would be cool to be able to assign absolute or relative values to responsive items

  • Matza commented  ·   ·  Flag as inappropriate

    And it would be great to connect XD to a framework like bootstrap, vuetify … So instead of drawing a button in the style and size the framework provides just type in the css
    <v-btn depressed small color="primary">Buttontext</v-btn> (vuetify-Framework)
    and the button appears!!!

← Previous 1 3

Adobe XD: Feature Requests: 01 : Design mode

Categories

Feedback and Knowledge Base

(thinking…)