How to Export HTML Emails from Figma: Step-by-Step Guide (2026)

Figma has no built-in HTML export. The Marka Email Generator plugin fills that gap — converting any Figma email frame into clean, table-based HTML that works in Outlook, Gmail, Apple Mail, and every major email client.

This guide covers the complete workflow: from Figma design to live HTML email in under 5 minutes.

Can Figma export to HTML?

Figma doesn't have a native "Export to HTML" feature — but you can export any Figma design to HTML using the Marka Email Generator plugin. The plugin reads your Figma frame and generates clean, production-ready HTML code directly inside Figma.

For email specifically, this is the standard workflow used by thousands of designers: design in Figma, export via Marka, paste into your email platform. The result is table-based HTML that renders correctly in Outlook, Gmail, and every other major client — without writing a single line of code.

What Figma-to-HTML export covers:

• Email templates (newsletters, transactional, onboarding)
• Single frames or multi-section email layouts
• Responsive layouts built with Auto Layout
• Custom fonts, dark mode CSS, and ESP variable preservation

Exporting Figma to HTML: email vs. web

Figma-to-HTML export works differently for email than for web pages:

Marka handles email-specific HTML output. For web page export from Figma, separate tools exist (Framer, Webflow, etc.) — but they produce HTML that email clients will break.

What you need

• A Figma account (free or paid)
• Marka Email Generator plugin — free to install
• An email frame in Figma (or use a free template to start)

Step 1: Set up your email frame in Figma

Your email design needs to live inside a top-level Figma frame. The plugin exports everything inside that frame.

Build your email using:

• Auto Layout — drives responsive behavior in the exported HTML
• Components — reusable blocks that export cleanly
• Text and color styles — preserved as inline CSS in the output
• Images — automatically uploaded to CDN on export

Frame width: Use 600px for standard email width. This is the safe maximum for Outlook and Gmail rendering.

If you're starting from scratch, free Figma email templates are the fastest way to get a solid structure without building from scratch.

Step 2: Add links, preheader text, and ESP variables

Before exporting, configure these directly in Figma:

Clickable links: Select any text or button layer and add the URL in the plugin's link field. The plugin converts these to proper <a href=""> tags.

Preheader text: Add a hidden preheader layer — the plugin picks it up and injects it as invisible text above the email body. This shows in inbox previews.

ESP merge tags: Type personalization variables directly into Figma text layers:

• Klaviyo: {{ first_name|default:'there' }}
• Mailchimp: *|FNAME|*
• HubSpot: {{ contact.firstname }}
• Postmark: {{firstname}}

The plugin preserves these exactly in the exported HTML.

Unsubscribe links: Add the correct token for your platform in the footer link:

• HubSpot: {{ unsubscribe_link_all }}
• Klaviyo: {% unsubscribe %}
• Mailchimp: *|UNSUB|*

Step 3: Open the Marka plugin

In Figma: Right-click → Plugins → Marka Email Generator

Select the email frame on the canvas before opening. The plugin reads the selected frame and displays a preview.

Step 4: Preview in light and dark mode

Click Preview to see:

• Light mode rendering
• Dark mode rendering (tests Apple Mail, Gmail mobile, Outlook forced dark)
• Mobile layout
• Button tap targets
• Image loading

Fix anything that looks off in Figma before exporting — changes to the design reflect immediately in the next preview.

Step 5: Export HTML

Click Export HTML. The plugin generates:

• Table-based HTML (Outlook-safe)
• Inline CSS
• Responsive media queries
• Dark mode CSS
• CDN-hosted image URLs

Output options:

• Copy HTML to clipboard
• Download as .html file
• Minified output (reduces file size to 20–40KB — below Gmail's 102KB clip threshold)

Step 6: Export directly to your ESP (optional)

Skip the copy-paste step and push directly to your email platform:

For HubSpot specifically, see the full Figma to HubSpot guide.

Step 7: Send a test email

Use the built-in Send Test feature to send the rendered email to your inbox. Check:

• Text rendering in your actual email client
• Image loading
• Button styles and tap targets
• Light and dark mode rendering
• Mobile layout on your phone

This takes 30 seconds and catches any rendering issues before you send to your list.

Common issues when exporting Figma to HTML email

Broken layout in Outlook Outlook ignores CSS Grid and Flexbox. Marka uses table-based HTML which renders correctly, but if you've added custom code layers, check those for non-table CSS.

Images not loading Images must be uploaded during export. If you're copying HTML without using the export function, images won't have URLs. Use the export button to get CDN-hosted URLs.

Fonts not rendering Web fonts only render in Apple Mail and some webmail clients. Outlook and Gmail desktop ignore them. Always set a system font fallback (Arial, Georgia, etc.) in your Figma text styles.

Email is too large (Gmail clips it) Gmail clips emails over 102KB. Enable minification in plugin settings to reduce output to 20–40KB.

Figma to HTML email: supported export targets

The same Figma-to-HTML workflow works for any email platform:

• Figma to HubSpot — full guide with HubSpot tokens and Design Manager import
• Figma to Klaviyo — one-click export with Klaviyo variable support
• Figma to Mailchimp — direct campaign template import
• Figma to SendGrid — Handlebars variables, Dynamic Templates
• Figma to Brevo — API export or copy-paste HTML
• Figma to Supabase — auth email templates (magic link, password reset, confirm email)

Free HTML email generator for Figma

The Marka HTML email generator is free to install and covers the full export workflow — responsive HTML, dark mode CSS, ESP variable support, and direct platform export. The free plan includes unlimited exports for single-frame templates.

Try the free HTML email generator →

Start with a free template

If you don't have an email design yet, duplicate one of the free Figma email templates and export it in one click. Every template is pre-configured for HTML export with Marka.

Browse free email templates →