Creating and exporting CSS .class selectors for developers in Adobe XD

Question

Hi,

I am a UI Designer who is working alongside a development team. The development team is using the Bootstrap framework within their build. They have queried as to whether I am able to export a CSS file which uses the same CSS .class selectors as the Bootstrap framework, that way they already have a CSS file ready to override the Bootstrap CSS, without having to manually create a CSS file by copying and pasting the code from the shared Adobe XD link. I am aware you can share your design as a development link, which you can select elements within the design and it gives you the CSS specific to that element. But, for example, say a form field has a .class selector a of '.form-control' in Bootstrap, am I able to perhaps create a component called '.form-control' and then export these styles as a .css file?

I hope I have made sense.

Thank you,

James

Dan Rodney · Accepted Answer

XD cannot export CSS files, because it's focused on design and not code. On https://adobexd.uservoice.com you can search for exisiting feature requests to see if someone else already created one (and upvote it to add your voie), or submit your own new feature request.

It's possible someone could make a plugin to do something like this, but with a quick search I didn't see anything like you. You may want to take a closer look at plugins in case I missed one.

Rishabh_Tiwari · Answer

Hi James,

Thanks for reaching out. As Dan, suggested, you can share your feedback with the development team directly, here are the few feature request we already have received on our Adobe XD UserVoice, please upvote to add voice to the feature:

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13198020-export-html-css-animation-code-snippets-for-tran

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13599261-dedicated-export-workspace-to-extract-css-styles

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/16314880-export-styles-of-selection-as-css-and-copy-paste-t

This is the best way of sharing your ideas and feedback with the Engineering team.

Regards

Rishabh