Paste any HTML email and get editable Desktop and Mobile frames in Figma. Clean auto layout, live text, your pictures, and only the layers you need.
A made-up demo email. The window comes from our test build of the plugin. The two frames are drawn from the layout it builds.
It does one job, and does it well: it rebuilds an HTML email the way a designer would draw it.
Emails are made of nested tables, inline styles and old tricks that confuse general tools. This plugin lets a real browser show the email first, then rebuilds what it sees. It works with any HTML email, whichever tool or template made it.
Most of an email’s code is wrapping. A wrapper that paints nothing does not become a layer here. Only what you can see does: frames, text and pictures, each named by what it is.
You get a Desktop frame at the email’s own width. If the email has mobile styles, you also get a Mobile frame. Pick 320, 360, 375, 390 or 414, or type your own width. Both frames count as one email.
Paste the HTML, open a file, pick a folder or drop a ZIP. Pictures that sit next to the HTML are matched for you, and pictures on the web are downloaded.
Here is the top of one demo email. On the left, the 13 HTML tags it is made of. On the right, the 5 layers you get.
13 tags for one small header. Most of an email is wrapping like this.
We counted every tag and every piece of text in the body of each made-up demo email. Then we counted the layers the plugin builds for its Desktop frame: frames, text and pictures, spacers included. These numbers come from our own test build, run in a browser. Inside Figma they may differ a little.
No jargon and no setup. Here is what happens to your email.
Rows and columns become auto layout, with padding, spacing and alignment set.
Text stays editable. Bold, colour, size and links inside a line are kept.
The email’s fonts are matched to fonts you have in Figma.
Pictures from your folder or ZIP are matched by path. Web pictures are downloaded.
Backgrounds, gradients, borders, rounded corners and shadows come across.
A link in the email is a link on the text in Figma.
Banner, Card, Row, Divider and more. No more Frame 482.
Gaps are measured, not guessed. The plugin checks its work and shows the difference in pixels.
Built from the email’s own mobile styles, at 320 to 414 pixels or your own width.
Hidden text, preheaders and tracking pixels are left out of your file.
See how many free emails are left and the day they come back.
The email is treated as untrusted. Nothing inside it can run.
If you have ever looked at a sent email and thought “I wish this were in Figma”, this is for you.
The source file is gone, or the email only exists as HTML.
Get an editable file in one go and redesign from there, instead of redrawing every block by hand.
A client sends a live email and asks for a refresh.
Turn it into a Figma file for review, QA and hand-off, and compare the build with the design side by side.
Last month’s campaign worked, but nobody can find the design.
Start next month’s email from the HTML you already sent, with clean layers your team can edit.
Receipts, welcome and reset emails live in a dozen tools.
Line them up in one Figma file and see what is off brand, with layers you can actually read.
No account with us and no setup. Open the plugin, add your email, press Convert.
In Figma, open Plugins and run HTML Email to Figma. It opens as a small window next to your canvas.
Paste the HTML, or choose a file, a folder or a ZIP. Pictures next to the HTML are matched for you.
You get one Section with a Desktop frame and a Mobile frame. Auto layout is on, the layers are named, and the text is yours to edit.
Every month you get 10 free emails. Pro has no limit.
$0forever
10 emails every month
No card needed. Free emails that you do not use do not roll over.
$20a month · unlimited emails
Everything in Free, with no monthly limit
Figma shows the billing details at checkout. Pro goes on sale after the plugin is published.
One email is one credit, and your email never leaves your computer.
Pressing Convert uses one free email, even though you get both a Desktop and a Mobile frame. If a run fails, the email is given back. Free emails come back on the 1st of every month.
Everything runs on your computer, inside Figma. Our credits service only learns a random install ID, the plugin version and the month, so it can count your free emails. Read the details in the privacy policy.
HTML Email to Figma
10 emails free every month. No account with us, and your email’s HTML never leaves your computer. The plugin is coming soon to Figma.
FREE FOR 10 EMAILS A MONTH · PRO IS UNLIMITED