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
42 comments
-
Valentin de Bruyn
commented
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
This is such a no brainer. Every time I make buttons and I need to resize them manually to simulate stable "padding".
-
Anonymous
commented
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
We absolutely need to be able to name style elements to translate to CSS classes in inspect mode.
-
Anonymous
commented
+1
-
Cynthia sanchez
commented
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
-
Michael Reynolds
commented
Especially button padding!!
-
Mark
commented
I'd also like to see Spread in the shadows property...especially negative spread!! 😊
-
Menghui Li
commented
I am willing to code my object style in CSS. As long as the components can work as classes.
-
Menghui Li
commented
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. -
Anonymous
commented
Glad to see this Feature is Under Review!!
-
Peter Scott
commented
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
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
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
-
Saad Jabrani
commented
its been 2 year, why is it taking so long?
-
Matza
commented
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!!! -
Aaron
commented
+++1 @Edu's suggestion to scope styles to artboards.
-
Edu Couchez
commented
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
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
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!