ScreenshotEmailsScreenshotEmails
ScreenshotEmails / Email to Figma guide
Email to Figma guide

How to import an email into Figma.

Turn a real email from your inbox—or an exported HTML email—into an editable Figma design. You do not need to rebuild the email manually or track down the original source code.

Get Email to Figma ↗View the steps ↓
Email to Figma importing an email into Figma
EML from inbox
HTML email
Editable layers
Quick answer

To import an email into Figma, save the message as an EML file or use the original HTML file, open the Email to Figma plugin, and upload it. The email is recreated as editable Figma layers.

  1. Save the email as EML or HTML.
  2. Open Email to Figma.
  3. Upload the file.
  4. Edit the result in Figma.

Import an email into Figma step by step

Email designs are often trapped inside inboxes, ESP previews, or exported HTML. Email to Figma is built specifically to turn those files into usable design references without starting from scratch.

1
Save the emailIf the email is in Gmail, Outlook, Apple Mail, or another client, download it as an EML file. If you already have the campaign source, use the HTML file instead.
2
Open Email to FigmaInstall the plugin from the Figma Community and launch it inside the Figma file where you want the imported email to appear.
3
Upload the EML or HTML fileEmail to Figma parses the message, renders the email layout, and creates editable layers in Figma.
4
Edit, annotate, or redesignChange text, swap imagery, inspect spacing, add notes, or use the imported email as a starting point for a redesign.
You do not need the original HTML.

If an email is already sitting in your inbox, saving it as EML is usually enough. That makes competitor examples, old campaigns, and inspiration emails much easier to bring into Figma.

Why use an email-specific importer?

Email HTML is not the same as a normal website. Production emails often rely on nested tables, inline styles, spacer cells, client-specific markup, and responsive techniques that generic webpage importers are not optimized for.

Email to Figma focuses on the patterns that show up in real marketing emails, so the output is more useful for email design work.

Nested tablesEML filesResponsive email layoutsEditable textEmail-focused structure

Useful ways to bring emails into Figma

Imported emails are especially useful when the design already exists somewhere else and you want to analyze, improve, or reuse it.

🔎

Competitive research

Save interesting emails from your inbox and turn them into editable design references instead of static screenshots.

✏️

Email redesigns

Start from the existing campaign and change the parts that matter rather than rebuilding every section manually.

🧩

Design systems

Bring multiple campaigns into one file to identify reusable headers, cards, CTAs, spacing, and footer patterns.

💡

Inspiration libraries

Collect inbox examples in Figma where your team can annotate, organize, compare, and discuss them.

🤝

Marketing and design handoff

Move real production emails into the same workspace designers already use for review and iteration.

📱

Responsive review

Inspect and compare desktop and mobile email structure inside Figma before creating your next iteration.

Which file should you use?

Choose the source that matches what you actually have access to.

If you have…Best formatWhy
An email in your inboxEMLCaptures the received message without needing the sender's source HTML.
An exported campaignHTMLUses the original email code directly.
A competitor email you receivedEMLEasy to save from your inbox and import.
Email code from your ESPHTMLBest when the campaign source is already available.

Related Email to Figma guides

Use the workflow that matches where your email is coming from.

Gmail to Figma

Save a Gmail message and bring the actual email into Figma.

Read the Gmail guide →

EML to Figma

Import saved .eml message files as editable Figma designs.

Read the EML guide →

HTML email to Figma

Turn exported email HTML into editable Figma layers.

Read the HTML guide →

Frequently asked questions

Can I import an email from Gmail into Figma?

Yes. Gmail can download a message as an EML file. Upload that file to Email to Figma to recreate the email as editable layers.

Do I need the original email HTML?

No. EML support is useful specifically because many emails you want to reference are received messages, not campaigns whose source code you own.

Is the imported email editable?

Yes. The goal is to create editable Figma content rather than a single flattened image, so you can modify text and other elements after import.

Can I import Outlook or Apple Mail emails?

Yes, if you can save the message as EML or export the underlying HTML. See the EML saving guide for common email clients.

Turn an email into an editable Figma design.

Import EML or HTML email files with a Figma plugin built specifically for email layouts.

Get Email to Figma ↗View plugin details