Participant

Answered

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

Forum|Forum|5 years ago
January 19, 2021
3 replies
13523 views

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?

This topic has been closed for replies.

Correct answer Peter25227529uepn

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

P

Peter25227529uepnCorrect answer

Participating Frequently

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

Dan Rodney

Community Expert

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.

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

A

Anders5FACAuthor

Participant

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

Community Manager

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded