Video Tutorial: Uploading your emails to MailChimp
This video walks through how to upload HTML emails from the Figma Emailify plugin to MailChimp.
If you need Mailchimp merge tag links (for example, *|UNSUB|*) in your text paragraphs, Figma's native link field will block them as invalid URLs. To get around this, you can use Emailify's special Mailchimp link format instead, https://mailchimp.invalid/?*|UNSUB|*, and Emailify will output the raw Mailchimp merge tag in your exported HTML.
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 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.
Enabling editable images will use @1x images (instead of @2x retina). You can optionally enable your images in the template to be editable in MailChimp with the Editable Images toggle, but unfortunately, MailChimp doesn't support editable @2x retina images, so these will be @1x instead. If you'd prefer to have @2x retina images that aren't editable, please leave this option turned off.
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
@mediaquery blocks into multiple separate media queries - Rewriting or restructuring CSS rules
- Stripping
"quotation characters from certain CSS selectors (for example,a[href^="tel:"]becomesa[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.