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,
-
Pauline Johnson commented
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
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
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
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.