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,
Yoav Chen
shared this idea
46 comments
-
camilo arguello
commented
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
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
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-fIHMdSUYOur Design framework
https://gel.westpacgroup.com.au -
Darren Beason
commented
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
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
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.