Request details

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,

575 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)

    We’ll send you updates on this idea

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

    29 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • 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!!!

      • Edu Couchez commented  ·   ·  Flag as inappropriate

        Absolutely agree... In fact, I imagine it like a surgical removing of Dreamweaver's HTML rendering engine, and implant it to XD. Even more... I'd add SASS/LESS pre-processor capabilities to create classes and CSS hierarchy based on art board names/id. I mean, start mock up design right with real styles that could be exported to the front end development pipeline (and viceversa... update styles if somebody adds a change in any external IDE.

      • Sophie commented  ·   ·  Flag as inappropriate

        After discussion with our front developers , what would be useful for us is:
        1. The creation of an export file with variables: colors, fonts ...
        2. Generate image sprit of the entire project or be able to do it alone
        3. Consider including bootstrap classes, if a code export is done

      • Zack commented  ·   ·  Flag as inappropriate

        Just made a tool which can export css via SVG files, we can export our artboards to SVGs (embed) format via XD, and drag the SVGs to this link, then we can get the functionality just like Zeplin!

        https://zaaack.github.io/inker/

      • Raylin Aquino commented  ·   ·  Flag as inappropriate

        Please add it up, because I have to use Zeplin for export my css, assets measurements, etc, It's a headache

      • Armando Scuro commented  ·   ·  Flag as inappropriate

        while I as a designer find no need for this at the moment, developers whom I have shared specs link with had some issues translating my web design to code due to absence of padding/margins.
        Moreover, adding padding to clickable elements is needed when I want an item to be have a more clickable space

      • Scot Clark commented  ·   ·  Flag as inappropriate

        With the recent connectivity to Zeplins direct integration, there is one glaring problem with the extraction of CSS. Class names. If you have a block of copy the class name that appears in the snippet window is the entire block of copy as the Class name. When it should be something semantic like class="body_copy". I have a short lorem ipsum in a layout for testing and this is the class name that shows up in Zeplin.

        .Excepteur-sint-occaecat-cupidatat-non-proident-sunt-in-culpa-qui-officia-deserunt-mollit-anim-id-est-eopksio-laborum-Sed-ut-perspiciatis-unde-omnis-istpoe-natus-error-sit-voluptatem-accusantium-doloremque-eopsloi-laudantium-totam-rem-aperiam-eaque-ipsa { }

        I would like to define the class name in association with my Character or Paragraph Styles or with an Adobe Library. How bout we make that happen real quick like?

      • Anuar Bolatov commented  ·   ·  Flag as inappropriate

        That's an awesome idea. Would be cool if we could use nesting and add variables, basically Sass :)

      • Adam Trabold commented  ·   ·  Flag as inappropriate

        Yeah, this would be awesome. The ability to just change the text inside a button and have it auto-resize to fit properly would be

      • Cristian Moisei commented  ·   ·  Flag as inappropriate

        This would truly be a revolutionary feature. Not being able to set 'rules' (i.e. all buttons have 20px margin-top) is one of the biggest limitations of design software and would make things so much easier and consistent.

        If a language like CSS can be used to style things, that would also have the added benefit of making developer handover easier.

      • Michel Tobon commented  ·   ·  Flag as inappropriate

        If I have already a set of CSS attributes, I would like XD to read those and apply my CSS to a certain element.

        This would allow companies that have a defined design to create their UI Kits faster.

      • Thomas Hallgren commented  ·   ·  Flag as inappropriate

        As a designer, I would like to define <h> and <p> tags (text style, color size/weight) and button sizes across an entire design with responsive versioning.

      ← Previous 1

      Feedback and Knowledge Base