How to Export to Email (HTML/CSS) in XD?

[Anders5FAC]

Hi

I am attempting to achieve an export of an artboard, into html/css that can be used in an email.

Currently i've tried the plugin Web Export, which can export to web with html/css/js.

However while the exported document works well in a browser it doesn't work well when the html/css markup is used in an email. In my debugging i used mailchimp tool for converting css styles that are not inline in the document to be inline on the element, as i've understood alot of email clients doesnt support <style> tag, and therefore css needs to be inline.

This still does not work, it seems as if the CSS styling is only partially applied. Some text, fonts etc have the right sizes, fonts, boldness etc. But alot of margin's, padding's and such are not working. It is also my understanding through reasearch that the inline CSS is interpreted differently by the different email clients (i am used outlook to test). 

So I am trying to find a solution to this problem. Does anyone else know or have experience with - if its possible to export in a way that works with emails (essentially as an email template), or any workarounds that can be performed to achieve this goal?

<Title renamed by moderator>

[Anders5FAC]

Adding a bit more information. I've tried to recreate the layout manually in html/css compared to the XD export. I discovered that in Outlook <div> does work, neither does margin and some other things. Does an option exist to make XD's code export create everything in tables and with padding instead of margin to achieve the same results?

[Rishabh_Tiwari · Accepted solution]

Hi there,

Sorry for the delay in response. As of now, we can use the plugin to export to web with HTML/CSS. However, you can always share your ideas and suggestions here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests

Please upvote pr post a new request. This is the best way of sharing your ideas and suggestions with the Engineering team.

Regards

Rishabh

[jimmysierra]

Hi @Anders5FAC - were you able to find a solution? This is something I've also been trying to figure out for awhile!

[HARSHIKA_VERMA]

Hi @jimmysierra,

Thank you for reaching out. You may try our "Anima plugin," which might help you in your workflow. Please see this page: How to export Adobe XD to HTML - Anima Blog. 

Hope it helps.

Thanks,

Harshika

[Dan Rodney · Accepted solution]

Emails require very specific coding that's different than webpages. XD is a design app, not a coding app. Plugins for it usually do not produce quality code that I'd use a website, let alone an email. To successfully turn a design into code, it's our job as a developer to know the code required for the task (website, email, mobile app, etc.) and to write that code using the graphic assets (photos, icons, etc.) exported from Adobe XD or other apps like Photoshop.

So I would not focus on getting XD to generate the code, and instead focus on writing it from scratch so it's good and will work properly. There's nothing in the XD layout that can help write the tables that you need for emails.

[Peter25227529uepn · Accepted solution]

Here are two great ways to get HTML and CSS from your Adobe XD design:
- Export the entire code package: In Adobe XD, open the design you created using Anima (Don't have one? Here's a Sample File).
- Get code for individual components. Sync your design draft to your Anima project (Learn how to sync your design draft).

This May Work,

Peter