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

[James5E84]

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

[giedriusk]

I was thinking about something very similar this morning. I am giving a design made with Adobe XD to a developer. On the frontend side we use bootstrap framework. It would be great if I could add some kind of note to each Adobe XD component and developer could see the note on component selection. I would note about what bootstrap component to use for each Adobe XD component and some other implementation specifics.

[Dan Rodney · Accepted solution]

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]

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-ht...

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13599261-dedicated...

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/16314880-export-st...

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

Regards

Rishabh