Every email I've ever designed lost something on the way to the inbox.
I'm a product designer in Ottawa, 10+ years in. I redesigned Canada Post's email templates and built their design system. Email is hard to get right, and I learned that the long way. Somewhere between the Figma design and someone's inbox, the email stops looking like the way you designed it.
Sometimes it's small. Padding collapses, spacing drifts a few pixels, a font falls back to something else. Sometimes it isn't small. Images and text overlap, alignment falls apart, or half your email shows up as a white box.
But it always breaks in the same place. The handoff.
Either you rebuild the whole thing in a campaign tool and accept whatever the builder lets you make, or you hand it to a developer and get back something close but not quite, or you try coding it yourself and lose a day learning how email code works, then another day figuring out what Outlook did to it.
So here's what I've learned about closing that gap.
Your three actual options
Rebuild it in your ESP's drag and drop builder. Mailchimp, Klaviyo, Brevo, they all have one. The output is reliable because the builder only lets you make things it already knows how to render. Your two column product row with the offset image and the specific spacing isn't a block the builder has, so you approximate it, and the approximation becomes the email. Fine for a plain newsletter. Frustrating for anything custom, anything with real design in it.
Hand it to a developer. You get real code and real fidelity, if the developer knows email. And email HTML is a specialist skill. A lot of very good web developers have never written email code. It also costs money and takes days, and every revision is another round trip.
Use a Figma to email HTML converter. Faster, but be careful which one. Most Figma to code plugins generate modern web HTML. Divs, flexbox, grid, external stylesheets. That's the right output for a website and the wrong output for an email. Email clients won't render it reliably.
What actually breaks
Here's what goes wrong, roughly in the order you'll notice it.
Outlook rearranges your layout. Classic Outlook on Windows renders email using the Microsoft Word engine. Not a browser, Word. It ignores a lot of what you'd assume is basic, so widths, spacing and backgrounds that hold everywhere else come apart there. It's the client where good-looking emails go to break, and it's why every serious email tool treats Outlook as its own project.
Images and text overlap, alignment falls apart. Layouts that look perfect in your design tool come out shifted, squeezed, or stacked on top of each other, because different email clients read the same code differently.
Your mobile layout doesn't happen in desktop Gmail. Responsive email works through media queries, and desktop Gmail checks them against the whole browser window, which is almost never as narrow as a phone. So your mobile version works in most places and does nothing in one very large place. Your desktop layout has to be livable on its own.
Your colors change in dark mode and you don't always get a vote. Some clients respect the colors you set. Others force their own inversion no matter what you asked for. Outlook flips a background and the text on it together, but if the background is an image, the image stays the same and only the text flips. Gmail darkens some colors and leaves others alone, and it behaves differently between phone and desktop. The Gmail app does let you keep your email light now. More on that here.
Your images don't show up. If an image address is wrong or missing, the recipient sees a broken box. And you'll never find out, because nothing reports back.
Everything is a bit off. Padding collapses, spacing drifts, a heading sits four pixels lower than it should. Individually small. Together it's the difference between your design and something that resembles your design.
Why does all this happen? Email clients aren't browsers. They run a pile of different rendering engines with wildly different abilities, so email code has to be written the old way, built from tables, with the styling written onto every element. Which brings back the point from above: most Figma to code plugins are built for websites, and website code is useless in an inbox. If you're picking a converter, that's the first thing to check.
Set your Figma file up so it can actually be converted
This is the part nobody tells you, and it does more for your output than any tool you pick.
Use auto layout wherever you can. Auto layout is the closest thing Figma has to real structure, and it's what a converter reads to figure out what's a row, what's a column, and what the spacing is. A frame with auto layout, a direction, a gap and padding tells it exactly what to build. A freeform frame can still be converted, it just leaves more to guesswork, so the result is less predictable. The more auto layout you use, the closer the output lands to what you designed.
Build at 600px wide. That's the email standard. Some people work at 640 or 525 and that's fine too, just pick one and stick to it. Go much wider and it gets cut off in narrow reading panes. More on email size.
Don't over-nest. Every layer of grouping in Figma tends to become another layer of nesting in the output. If you've got a frame inside a frame inside a frame all doing the same job, flatten it. Your code gets simpler and your file gets easier to hand off.
Decide what should be an image. Icons, logos, decorative shapes, anything with a gradient or a mask. Those should become images rather than trying to become HTML. Text people actually need to read, or that you might want to change later without redesigning, should stay as text.
And keep your text as text. It's tempting to flatten a whole section into one image because then it always looks right. But then it's invisible to screen readers, nobody can select it, it goes blurry on some screens, and it breaks completely for anyone who has images blocked by default. Which is a real chunk of any list.
The workflow
- Design in Figma with auto layout, at 600px.
- Convert it to email HTML. Check the output is built for email, not for the web. If you see
display:flexanywhere in there, it's a website converter and it won't survive Outlook. - Get your images onto the web. Whatever tool you use should either host them for you or give you somewhere to paste the addresses in. One trap worth knowing about: the address has to be complete, starting with
https://. Paste in a bareexample.com/photo.pngand it looks fine to you and breaks for everyone who opens it. - Add alt text to every image. It's what shows when images are blocked, which is a real portion of any list, and it's what a screen reader reads out.
- Set your preview text. That's the gray line the inbox shows next to your subject line. Skip it and the client just grabs the first text in your email, which is usually "View in browser." Free real estate, wasted.
- Send yourself a test and open it in real inboxes. Not just a preview tool. Actually look at it on your phone.
- Look at it in dark mode. This is where you'll find things you didn't expect.
What to check before you send
Contrast, while you're still designing. Not because some tool told you to, but because your email is going to get read on a phone in daylight, and a client might shift your colors on top of that.
Mid tone colors are the risky ones. A dark background with light text, or a light background with dark text, usually survives dark mode because both sides move together. Colors sitting in the middle can flip either way depending on the client. So the safest thing is to stay off that boundary and push your colors far enough one way that no algorithm has a decision to make.
Every link goes somewhere. Buttons especially. It's a stupid way to lose a campaign.
The unsubscribe link is a real link, not just text styled to look like one. That's a legal requirement, not a nice to have.
Where Sendra fits
Full disclosure, I built a tool for this.
Sendra is a Figma plugin that does the conversion. You pick your auto layout frame, preview it, and export table based HTML with inline CSS, Outlook fixes built in, a responsive mobile cascade, and hosted image URLs if you want them. It's free up to 10 exports and paid after that.
You can install it from the Figma Community, and here's how to get started.
I started it in January 2025 and I've been working on it between client projects ever since. Getting HTML out of Figma took about a week. Everything after that went into one thing, making the output hold up in Outlook. Testing on real devices and fixing what actually broke, rather than what should have worked on paper.
It's not the only option, though. Parcel is an excellent code first email editor if you're happy writing the HTML yourself, and the live preview is great. Litmus and Email on Acid are testing platforms first, and if you send email professionally you want one of them no matter how you make the code. Stripo and the builders inside Mailchimp and Klaviyo are drag and drop, which means reliable output within their own vocabulary.
The reason Sendra exists is that none of those start from your Figma design. If you've already designed the email, and the design is the whole point, going through a builder means rebuilding it in someone else's blocks. That's the trip where the design loses something.
The short version
Auto layout wherever you can. Build at 600px. Don't over-nest. Keep text as text. Make sure every image has a real full URL and alt text. Set your preview text. Test in a real inbox, in dark mode, before you send.
None of this is mandatory. You can skip all of it and still get an email out the other end. But the tidier the file going in, the closer the result lands to what you actually designed.
If you've got a design sitting in Figma right now, you can run it through Sendra and have the HTML in seconds. Install it here.
