How to Export HTML Email Templates from Figma to Mailchimp: Step-by-Step Guide
Learn how to convert your Figma email designs into production-ready Mailchimp HTML email templates. Use the fastest Figma to Mailchimp email workflow — no coding required. Export in 5 minutes with the Marka HTML Email Generator.
Updated March 2026
Figma to Mailchimp email templates: export clean HTML in one click
Create professional Mailchimp email templates directly from your Figma designs. Export clean, Mailchimp-ready HTML code instantly with the Marka HTML Email Generator.
100% compatible with Mailchimp campaign editor
Exports table-based HTML optimized for Mailchimp and Outlook
One-click export HTML email from Figma
Watch: Figma to Mailchimp in 5 minutes
Step-by-step guide
Method 1: Via API key (recommended)
Marka pushes the template directly to Mailchimp — no copy-pasting required.
Install the Marka plugin
Install the free Marka Email Generator plugin from the Figma Community. Open Figma, search for Marka in the plugins panel, and click Install.
Install Figma PluginDesign your template inside the plugin
Open the Marka plugin and build your email template using the plugin's editor. Use the built-in blocks or start from a free template. Add Mailchimp merge tags to any text field:
| Merge Tag | Description |
|---|---|
| *|FNAME|* | Contact first name |
| *|LNAME|* | Contact last name |
| *|EMAIL|* | Contact email address |
| *|REWARDS|* | Unsubscribe link (required) |
| *|LIST:COMPANY|* | Your company name |
| *|LIST:ADDRESS|* | Mailing address (CAN-SPAM) |
| *|CURRENT_YEAR|* | Current year |
| *|MC_PREVIEW_TEXT|* | Preheader text |
Select "Export as Mailchimp" and enter your API key
In the plugin, choose Export as Mailchimp. The plugin will prompt you for your Mailchimp API key. You can find it in Mailchimp under Account → Extras → API keys — create one if you don't have it yet, then paste it into the plugin.
Export — Marka pushes the template to Mailchimp
Click Export. Marka generates the HTML and sends the template directly to your Mailchimp account — no downloading, no copy-pasting.
Find and use your template in Mailchimp
Your template appears in Mailchimp → Templates. You can also go directly to admin.mailchimp.com/templates. Use it in any campaign, automation, or A/B test.
Don't have a Mailchimp API key?
Use the copy & paste method ↓Method 2: Copy & paste (no API key needed)
Export HTML or a ZIP archive from Marka and import it manually into Mailchimp Templates.
Install the Marka plugin
Install the free Marka Email Generator plugin from the Figma Community. Open Figma, search for Marka in the plugins panel, and click Install.
Install Figma PluginDesign your template inside the plugin
Open the Marka plugin and build your email template using the plugin's editor. Use the built-in blocks or start from a free template. Add Mailchimp merge tags directly into text fields:
| Merge Tag | Description |
|---|---|
| *|FNAME|* | Contact first name |
| *|LNAME|* | Contact last name |
| *|EMAIL|* | Contact email address |
| *|REWARDS|* | Unsubscribe link (required) |
| *|LIST:COMPANY|* | Your company name |
| *|LIST:ADDRESS|* | Mailing address (CAN-SPAM) |
| *|CURRENT_YEAR|* | Current year |
| *|MC_PREVIEW_TEXT|* | Preheader text |
Copy the HTML or download the ZIP archive
When your design is ready, choose how to export:
- HTML only — copy the generated HTML code directly from the plugin (use this if your email has no hosted images)
- ZIP archive — download a ZIP containing the HTML file and all image assets (use this if your template includes images)
Go to Mailchimp Templates and click "Code your own"
In Mailchimp, go to Templates (or open admin.mailchimp.com/templates) and click Create Template → Code your own.
Paste HTML or upload the ZIP
Choose the matching import option:
- Paste in code — paste the copied HTML into Mailchimp's code editor
- Import ZIP — upload the ZIP archive exported from Marka (Mailchimp hosts the images automatically)
Preview on desktop and mobile, send a test email, then save. Your template is ready to use in any Mailchimp campaign.
Why export email templates from Figma to Mailchimp?
Create custom Mailchimp emails with Figma's powerful design tools, then export production-ready HTML in one click. No coding, no developer bottleneck, no design limitations.
Unlimited Design Freedom
Design any Mailchimp email layout you can imagine. No rigid template blocks, no locked modules, no builder constraints. Your exact brand design, pixel-perfect.
Developer-Free Workflow
Designers create in Figma, marketers export to Mailchimp. Zero HTML or CSS knowledge required. Ship custom Mailchimp templates without waiting for engineering.
90% Faster Than Hand-Coding
Export Mailchimp-ready HTML in 5 minutes vs 2-4 hours coding by hand. Update designs instantly with re-export. Iterate on campaigns in real-time, not days.
Full Mailchimp Integration
Merge tags, conditional content, and automation workflows work natively. Use templates in campaigns, automations, and A/B tests. Compatible with all Mailchimp plans.
How Marka compares to other Figma to Mailchimp solutions
Evaluating your options for getting Figma designs into Mailchimp? Here's how Marka stacks up against hand-coding, Figma Dev Mode, and Mailchimp's built-in template builder.
| Method | Marka Plugin | Hand-coding | Figma Dev Mode | Mailchimp Builder |
|---|---|---|---|---|
| Mailchimp-ready HTML output | ✓ One click | ✗ Manual | ✗ Not email-safe | ✓ Built-in |
| Outlook-compatible table layout | ✓ Automatic | Manual — hours | ✗ No | ✓ Yes |
| Custom layout & typography | ✓ Full freedom | ✓ Full freedom | ✓ Full freedom | ✗ Limited blocks |
| Merge tags preserved | ✓ Yes | Manual | ✗ No | ✓ Built-in |
| Coding required | ✗ None | ✓ Advanced HTML/CSS | ✓ Yes | ✗ None |
| Export time | ~5 minutes | 2–4 hours | Hours | N/A |
Frequently asked questions
Can I export Figma designs directly to Mailchimp?
Yes. Use the Marka Email Generator Plugin to export your Figma email frame as clean HTML, then paste it into Mailchimp using the "Code your own" option when creating a campaign. The process takes about 5 minutes from Figma to a ready-to-send Mailchimp email.
Do Mailchimp merge tags work in Figma designs?
Yes. Type Mailchimp merge tags like *|FNAME|* or *|EMAIL|* directly into your Figma text layers. Select "Export for Mailchimp" in the Marka Plugin and the tags are preserved exactly in the exported HTML. They will resolve correctly when Mailchimp sends the campaign.
What Mailchimp plan do I need for custom HTML templates?
Custom coded HTML email templates require Mailchimp Essentials or higher. The free Mailchimp plan does not support the "Code your own" HTML option for campaigns. Marka Plugin itself is free to install and use for export.
Will my emails render correctly in Outlook?
Yes. Marka Plugin generates table-based HTML with inline CSS — the only approach that renders correctly in Outlook 2007 through Microsoft 365. The exported code works across all major email clients including Gmail, Apple Mail, Yahoo, and mobile apps.
Are templates mobile responsive automatically?
Yes, if you use Figma Auto Layout. Marka Plugin generates responsive HTML with media queries that adapt the layout for mobile screens. Emails built with Auto Layout will look correct on desktop, tablet, and mobile without additional work.
Can I use these templates in Mailchimp automations?
Yes. Custom HTML templates work in all Mailchimp sending contexts: regular campaigns, automated sequences, A/B tests, and transactional email (via Mandrill). Once imported, the template behaves like any other Mailchimp template.
How do I add the unsubscribe link?
Add the *|REWARDS|* merge tag as a link in your Figma footer text layer. Format it as a markdown link: [Unsubscribe](*|REWARDS|*). Marka exports this as a proper HTML link. Mailchimp requires an unsubscribe link in all campaigns — this tag handles it automatically.
Can I edit the template after importing to Mailchimp?
Yes, but editing requires Mailchimp's code editor view. For design changes, it's faster to update your Figma file and re-export — the entire process takes under 2 minutes. For copy edits only (subject line, body text), use Mailchimp's code editor directly.
Resources and learning
Guides, tutorials and resources to help you master HTML email generation with Marka Plugin and Figma.
Explore all Marka Plugin features
HTML email generation is one part of the Marka Plugin. Explore design systems, template libraries, dark mode tools and more.
View all features →Complete guide: export HTML from Figma
Step by step tutorial for exporting production ready HTML email code from Figma with Marka Plugin. Learn best practices and common patterns.
Read guide →Browse ready made email templates
Free Figma email templates ready for HTML export. Includes newsletters, welcome flows, transactional emails, e-commerce receipts and more.
Browse templates →Figma to Mailchimp workflow guide
Full written guide to the Figma-to-Mailchimp workflow with merge tags, preheader setup, and import instructions.
Read guide →Design Mailchimp emails in Figma, export in one click
Stop fighting with Mailchimp's template builder. Design beautiful emails in Figma with full creative control, export production-ready HTML, and import to Mailchimp in minutes. Free to start.