HTML email to Figma conversion is the process of importing table-based HTML email source code into native, editable Figma design layers. Because HTML emails rely on inline CSS and nested tables rather than modern CSS layout, the conversion workflow differs from standard web components — but html2design handles both inline styles and table structures, producing accurate visual representations of your email templates as editable Figma frames.
Why Convert HTML Email Templates to Figma?
Email design teams face a persistent problem: the live email template lives in code (often inside an ESP like Mailchimp, Klaviyo, or Salesforce Marketing Cloud), while design reviews and iteration happen in Figma. Keeping the two in sync requires either maintaining a parallel Figma file or taking screenshots of email previews — both of which drift from the actual live template.
html2design lets you close this gap by importing the actual HTML source of your email into Figma directly. The result is a pixel-accurate, editable Figma file that reflects what your email actually looks like — not a screenshot, not a manual recreation.
Common use cases for this workflow:
- Documenting an existing email template library in Figma for design review
- Proposing design changes on top of the actual email structure
- Building a Figma component library from live email blocks (header, hero, footer)
- Onboarding new designers to an existing email program without sending test campaigns
- Sharing email designs with non-technical stakeholders via Figma links
What Makes HTML Email Different
HTML email is notoriously different from modern web HTML. Because email clients have inconsistent CSS support, email templates use:
- Table-based layout —
<table>,<tr>,<td>for structure instead of Flexbox/Grid - Inline styles —
style="..."attributes on every element instead of external CSS - Fixed widths — most email containers are 600px or 640px wide
- MSO conditional comments — Outlook-specific fallbacks using
<!--[if mso]> - Limited CSS properties — no CSS Grid, minimal Flexbox, basic box model
html2design handles all of this: it reads inline styles directly and converts table structures into appropriately sized and positioned Figma frames. The MSO conditional comments are ignored during conversion.
Key advantage over screenshots: html2design produces editable text layers, not rasterized images. Every headline, body copy paragraph, and CTA button becomes a real Figma text layer you can edit, style, and connect to your design system.
How to Get the HTML Source of Your Email
There are four ways to get the HTML source you'll paste into html2design:
From your ESP (Mailchimp, Klaviyo, etc.)
In Mailchimp, open the campaign → Edit → Edit Design → Code your own. In Klaviyo, open the flow email → Edit → HTML editor. Most ESPs have a "View HTML" or "Edit Code" button. Copy the full HTML content.
From a received email (Gmail)
Open the email in Gmail. Click the three-dot menu (⋮) in the top-right of the email → Show original. In the Message Source view, click Copy to clipboard or Download Original. You'll get the raw email including HTML.
Gmail gotcha: The raw email source includes email headers (From, To, Subject, MIME boundaries). Scroll down to find the HTML portion — it starts after Content-Type: text/html. Copy from <!DOCTYPE html> or <html> onwards.
From a browser email preview
Many ESPs let you preview your email in a browser. Open the preview URL, right-click → Inspect, find the root email table element, and right-click → Copy → Copy outerHTML. This captures the rendered HTML with all styles applied.
From your email codebase
If you're building email templates from source (using MJML, Handlebars, or raw HTML), compile the template to final HTML and copy the output. Run mjml input.mjml -o output.html and use the output file.
Step-by-Step: Importing Your Email Template
Prepare your email HTML
Paste your email HTML into a text editor and do a quick scan:
- Remove MSO conditional comments (
<!--[if mso]>...<![endif]-->) if they create visual noise - Confirm inline styles are present on key elements
- Note the email container width (typically 600px or 640px)
You don't need to strip the HTML — html2design handles most email HTML as-is. This step is just for orientation.
Open html2design and set the canvas width
Open html2design in Figma (Plugins → html2design). Before pasting, create a new frame at 600px wide (or your email's container width) to give the conversion a reference width. This helps ensure the email renders at the correct proportions.
Paste the HTML and convert
Paste your email HTML into the plugin input field. Click Convert. For a typical transactional or marketing email (600px wide, 1000–3000px tall), conversion takes 5–15 seconds.
The plugin will generate a frame on the canvas. Table rows become horizontal groups of frames; table cells become individual child frames with fills, borders, and text content.
Review the layer structure
Email HTML tends to produce deeply nested frame hierarchies because of nested tables. In the layers panel, you'll see frames nested inside frames inside frames — this mirrors the <table> → <tr> → <td> structure.
Check that:
- The outer container matches your expected email width (600px)
- Header, hero, content blocks, and footer are visually distinguishable
- Text layers have the correct font, size, and color
- Image placeholders or live images appear in the correct positions
Clean up and flatten unnecessary nesting
Table-based HTML creates more nesting than modern CSS layouts. After import, flatten unnecessary wrapper frames:
- Select frames that are just transparent wrappers with no visible styling
- Use Edit → Flatten or manually cut-and-paste children up one level
- Rename remaining frames:
Email / Header,Email / Hero,Email / Content,Email / Footer
Build reusable email components
Once you've cleaned up the layer tree, select individual email sections and convert them to Figma components (Cmd+Alt+K or right-click → Create Component). Build an email template library with:
- Email / Header — logo, navigation, branding
- Email / Hero — hero image, headline, CTA button
- Email / Content Block — body text, inline images
- Email / Button — CTA with variants (primary, secondary)
- Email / Footer — unsubscribe, address, social links
Email-Specific Gotchas
Images and linked assets
Email images are often hosted on CDN URLs or ESP image servers. html2design will attempt to load referenced image URLs. If the images are behind authentication or expired CDN links, you'll get empty image placeholder frames. Replace these manually with your design system images.
Web fonts vs. email-safe fonts
Many email clients don't support web fonts — email templates often specify fallback system fonts (Arial, sans-serif). After import, the Figma text layers will use whatever font was specified inline. If you want to apply your brand font for design purposes (not production email), swap the font family after import.
Dark mode email styles
Some email clients support @media (prefers-color-scheme: dark). html2design captures the light mode styles by default. To preview dark mode, duplicate the Figma frame and manually override fills and text colors for the dark mode variants.
Outlook conditional content
MSO conditional comments are ignored by html2design (they're HTML comments). If your template has Outlook-specific fallback layouts that differ significantly from the main layout, the Figma import will reflect the non-Outlook rendering path.
Best practice: For production email documentation, import once from the ESP's live preview (not raw source) to get the final rendered state — including any merge tag replacements or dynamic content previews.
Frequently Asked Questions
Can you convert an HTML email template to Figma?
Yes. Paste the HTML source of your email into html2design. The plugin reads inline styles and table structures to create editable Figma frames that match your email's visual layout. Text layers, fills, and spacing are all preserved.
Does html2design support table-based email layouts?
Yes — table-based layouts are fully supported. Table rows (<tr>) become horizontal frame groups; table cells (<td>) become individual frames with their inline-styled backgrounds, padding, and content. The nesting is deeper than modern Flexbox layouts, but the visual output is accurate.
How do I get the HTML source of my email?
Open the email in your ESP (Mailchimp, Klaviyo, etc.) and use the code editor or "View HTML" option. For received emails, use Gmail's "Show original" menu option. For email previews in browsers, use DevTools to copy the outerHTML of the email container.
Can I design HTML emails in Figma?
Yes. Figma is an excellent tool for email design sign-off and iteration. Use html2design to import existing email templates as a baseline, then design new variations in Figma for team review before handing off to a developer to code.
Key Takeaways
- ✓ html2design supports table-based email layouts and inline CSS — the standard format for HTML email
- ✓ Text layers are fully editable in Figma after import — not rasterized screenshots
- ✓ Get email HTML from your ESP code editor, Gmail "Show original", or browser DevTools
- ✓ MSO conditional comments are ignored; the import reflects the non-Outlook rendering path
- ✓ Build an email component library by converting header, hero, content, and footer blocks into Figma components after import
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
How to Convert HTML to Figma: A Developer's Guide →
Step-by-step walkthrough of the html2design plugin workflow from DevTools to editable Figma layers.
CSS Grid & Flexbox to Figma Auto Layout →
Import CSS Grid and Flexbox layouts into Figma as accurately positioned frames and apply Auto Layout.
Design System Migration: From Code to Figma Components →
A complete workflow for extracting design tokens and components into a native Figma library.
Use Case: Developer Handoff →
Reverse engineer shipped implementations back into editable Figma files for design-dev alignment.
Try it now
Import your email template in 30 seconds
Paste any HTML email into html2design and get editable Figma layers with typography, layout, and colors preserved.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime