Figma to Mailchimp Email: Design, Export & Import Guide (2025)
Mailchimp's drag-and-drop builder is fine for simple campaigns. But if you need precise control over layout, typography, and brand consistency, Figma gives you that freedom—and Marka Email Generator Plugin converts your design into clean HTML you can paste directly into Mailchimp.
This guide covers the complete workflow: Figma design → HTML export → Mailchimp import.
Why design Mailchimp emails in Figma
Pixel-perfect brand control
Mailchimp's Content Studio locks you into fixed block types. You can't control exact spacing, typography scale, or layout combinations beyond what the builder allows. In Figma, your email looks exactly like your brand—not like a Mailchimp template.
Better collaboration
Designers, copywriters, and marketers can all work inside the same Figma file. Comments, version history, and shared libraries keep everyone aligned without exporting files back and forth.
One-click HTML export
Marka Email Generator Plugin reads your Figma frame and outputs table-based HTML that works in Outlook, Gmail, Apple Mail, and all major email clients. Mailchimp merge tags you've typed into text layers are preserved automatically.
How to prepare your email in Figma
Use Mailchimp merge tags in Figma text layers
Type Mailchimp merge tags directly into your Figma text layers. Marka preserves them exactly when exporting HTML:
| 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|* |
Your mailing address (CAN-SPAM) |
*|CURRENT_YEAR|* |
Current year |
*|MC_PREVIEW_TEXT|* |
Preheader text |
For links in your email, use Mailchimp's merge tag format: [Unsubscribe](*|UNSUB|*).
Add preheader text
In Figma, add a text layer labeled Preheader (or set it using the Marka Plugin's preheader field). It will appear as preview text in the inbox without being visible in the email body.
Set up responsive layout
Emails built with Figma Auto Layout export with responsive behavior automatically. Use Auto Layout for all content rows and the plugin generates media queries that collapse columns on mobile.
How to export HTML from Figma with Marka
- Open Marka Email Generator Plugin in Figma
- Select your email frame on the canvas
- Click Export HTML
- Choose Export for Mailchimp (preserves
*|MERGE_TAG|*syntax) - Copy the generated HTML code
The export takes under 10 seconds for most email designs.
How to import your HTML template into Mailchimp
Mailchimp supports custom HTML templates through the Code your own option when creating a new email.
Step 1: Create a new email
- Go to Campaigns → Create Campaign
- Select Email
- Click Create Email
Step 2: Choose custom HTML
- Under design options, select Code your own
- Click Paste in code
- Paste your exported HTML from Marka
Step 3: Preview and test
- Use Mailchimp's Preview button to check desktop and mobile rendering
- Click Send a test email to see it in your inbox
- Check merge tags resolve correctly with test data
Step 4: Add campaign details and send
Add your subject line, from name, audience, and schedule. Your Figma-designed email is ready to send.
Common issues and fixes
Merge tags not working after export
Make sure you've selected Export for Mailchimp in the plugin — not the generic HTML export. The Mailchimp export preserves *|TAG|* syntax exactly.
Images not loading in preview
Images are embedded as linked URLs by default. Host your images in Mailchimp's Content Studio and reference them in Figma as full https:// URLs before exporting.
Custom fonts not rendering
Mailchimp's preview renders web fonts if they're loaded via @import in the HTML head element. Marka includes web font declarations automatically when you use Google Fonts in Figma. Fallback fonts apply in email clients that block custom fonts (Outlook, older Android).
Email too wide on mobile This happens when elements don't use Figma Auto Layout. Apply Auto Layout to all content rows and re-export — the plugin will generate proper responsive table structure.
