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

New Here ,
Jan 21, 2021 Jan 21, 2021

Copy link to clipboard

Copied

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

TOPICS
How to

Views

354

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jan 29, 2021 Jan 29, 2021
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.

Likes

Translate

Translate
Community Beginner ,
Jan 28, 2021 Jan 28, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 29, 2021 Jan 29, 2021

Copy link to clipboard

Copied

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.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines