Video Tutorial: Uploading your emails to MailChimp

In the Emailify export panel, select the MailChimp (API) option from the dropdown list, then paste in a valid MailChimp API key, which can be generated from your MailChimp account settings page.

When you're ready, click the Upload To MailChimp button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your MailChimp templates page (which you can also get to from your MailChimp dashboard menu by clicking on Content, then clicking Email templates).

Making images editable in MailChimp campaign editor

By default, the text content areas and rows in your HTML template will be editable in the MailChimp campaign editor after it's uploaded; you can also optionally allow images to be editable by enabling the Editable Images toggle in the Emailify export settings.

Blurry images in the MailChimp editor (when template is editable)

Unfortunately, MailChimp doesn't support editable @2x retina images, so your images will be exported @1x resolution if you've enabled the Editable Images toggle. If you'd prefer to have @2x retina images that aren't editable, please leave the Editable Images toggle option turned off.

Manually uploading local .zip exports to MailChimp (without using the MailChimp API)

If you'd prefer to upload your email templates to MailChimp manually via .zip file upload, you can do that by selecting the MailChimp (Zip) option from the Export HTML dropdown list, then clicking the Export for MailChimp button.

After the export process has finished, click the Download your .zip file button and unzip that file after saving it to your computer, then you'll be able to upload the .zip files from the _zips (For upload to MailChimp) folder inside of your main unzipped folder (as per the video screencap above).

MailChimp HTML modifications and Gmail rendering

MailChimp automatically modifies uploaded HTML email templates before sending. These changes are applied forcibly and cannot be disabled.

Some of the known modifications include:

• Splitting combined @media query blocks into multiple separate media queries
• Rewriting or restructuring CSS rules
• Stripping " quotation characters from certain CSS selectors (eg. a[href^="tel:"] becomes a[href^=tel:])

These changes can have unintended side effects, particularly in Gmail. Gmail has a strict CSS parser and will ignore all styles inside a <style> tag if it encounters a single invalid selector or property. This can result in issues such as column widths not applying or layouts stacking unexpectedly.

Where possible, Emailify applies MailChimp-specific workarounds to avoid known issues during the export process from the plugin. However, because these modifications happen after the HTML is uploaded, some behaviour is outside of our control (especially if you are adding additional custom CSS, too).

If you encounter Gmail-specific layout issues when sending via MailChimp, it is very likely related to these automatic template transformations rather than the original HTML exported from Figma.