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,

719 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

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

35 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • 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.

  • Pauline Johnson commented  ·   ·  Flag as inappropriate

    A billion times yes! I'm brand new to Xd -- I currently design web pages using InDesign. Why? Because I can create styles to mimic the exact CSS that the developers will use. I use all of the style sheets - character, paragraph and object, to simplify my designs and make it easy to make wholesale changes after my customers provide feedback. It seems like Xd would be a great addition to InDesign -- so many of the InDesign features are already built ... adding the artboards and the design/prototype modes to InDesign would be a home run!!!

  • Zack Keys commented  ·   ·  Flag as inappropriate

    This a thousand times. If I could maintain a CSS sheet that contained the styles I'm working within the project it would be incredible.

    It would make handing off the project to a developer a little easier if for no other reason than it being a better common language than even the most detailed of redlines and It would also allow for a more rapid movement into the initial site build or even just prototyping.

    Hell, I can see it drastically improving some of the smaller projects I tackle, making it so after the design is signed off on I have a head-start on the stylesheet and can move directly into the HTML portion of things.

  • camilo arguello commented  ·   ·  Flag as inappropriate

    being able to attach CSS style rules to objects with the use of classes. It would allow the front-end developer to work with a more structured HTML / CSS structure

  • camilo arguello commented  ·   ·  Flag as inappropriate

    It would be great to be able to set a HTML tag for certain objects, or at least a reference to a HTML class / ID. This feature would dramatilcally improve productivity in the front-end development process

  • Dave Powell commented  ·   ·  Flag as inappropriate

    First off, great start with XD so far folks. Just wanted to chime in on this topic as well to add emphasis on the value here.

    Exporting viable CSS would be a strong feature to round out the business adoption of this product. But the real focus of this request in my eyes would be to have properties in XD behave like CSS first and foremost. This gives the designer the real world constraints to keep the product grounded in reality.

    So far, nothing is in XD that won't be possible on the web ... but the lack of what isn't there is the problem. Missing many CSS features of the modern web will be a major pain point that will slow adoption of XD into the mainstream of anyone's workflow.

    Again, great work so far. Looking forward to an update soon!

  • Justin Spencer commented  ·   ·  Flag as inappropriate

    Styles are essential when designing large sites and applications. This is even more important in large organisations where brand consistency is key. InDesign is currently our tool of choice for UI design mainly because of it's powerful styling features which also include data tables and lists, two of the most common elements on the web. It would be great to see Xd inherit some of the powerful styling features of InDesign. If you're interested below is a link to a screen cast describing our InDesign workflow in a multi-brand corporation. It also demonstrates how we use features like the shared library, colour swatches and even the API to increase productivity and maintain quality and consistency across our brands.

    Screen cast
    https://www.youtube.com/watch?v=kK-fIHMdSUY

    Our Design framework
    https://gel.westpacgroup.com.au

  • Darren Beason commented  ·   ·  Flag as inappropriate

    Funny thing is, I use this feature for Photoshop> I upload my PSDs to Adobe Assets (Cloud) and share to my front-end developers. They grab everything they need there. This has been a major timesaver for my company, and is what will stop me from taking on XD.

  • Brian Chavez commented  ·   ·  Flag as inappropriate

    i was thinking the same thing as this, but as a cross between InDesigns Styles (paragraph, Character, and Object) panels, and Dreamweaver CSS editor.

  • Adam Pietrasiak commented  ·   ·  Flag as inappropriate

    You copy-paste some CSS when some element/group of elements is selected - this CSS is parsed and proper properties of elements are changed.

    For example if you paste
    font-size: 24px;
    color: "#dddddd";

    When having text element selected, text properties are changed to match given CSS.

2 Next →

Feedback and Knowledge Base