Why your Figma email looks different in every inbox

Your designer hands you a Figma file. A beautiful email — hero image, two-column product grid, rounded buttons, clean typography. You code it, send a test, open it in Gmail. Looks fine.

Then someone opens it in Outlook.

The buttons are square. The columns are stacked. The background image is gone. The font fell back to Times New Roman.

This isn't a bug in your code. It's the reality of email rendering in 2026. Every email client rewrites your HTML differently. Gmail strips your <style> blocks. Outlook uses Word's rendering engine. Apple Mail supports modern CSS but Samsung Mail doesn't.

The gap between Figma and the inbox

A Figma mockup is a picture of what you want the email to look like. It's not the email. The gap between the mockup and what 15 different email clients actually render is where bugs hide.

Common things that break:

• border-radius — Outlook Classic ignores it. Your rounded buttons render square.
• flexbox / CSS grid — Gmail strips both. Your columns must use tables.
• background-image — Stripped by most clients. Hero sections lose their images.
• web fonts — Only Apple Mail and Thunderbird support them. Everyone else falls back to system fonts.
• max-width on mobile — Gmail mobile apps strip media queries. Responsive designs don't respond.

Checking before you ship

The traditional workflow: code the email, send it to Litmus or Email on Acid, wait for screenshots, find the bugs, fix them, repeat. That's a $500/month tool and a 30-minute cycle per iteration.

We built a faster path. The Emailens Figma plugin lets you check your email's compatibility score across 15 clients directly inside Figma — before you write a single line of code.

How it works

What designers get

• Per-client scores before handing off to development
• CSS warnings that explain why a design choice won't work in specific clients
• Email-safe HTML export as a starting point for developers
• A shared language with developers: “this scores 88 in Outlook because of border-radius” instead of “it looks wrong”

What developers get

• Fewer “it looks different in Outlook” bug reports
• Compatibility data before they start coding
• The full Emailens web app for testing with React Email, MJML, Maizzle, or raw HTML — with real per-client screenshots and framework-native fix snippets

The email rendering landscape in 2026

Email is still stuck between 2005 and 2026. Apple Mail supports modern CSS. Gmail is a locked-down sanitizer. Outlook uses a Word engine from the Windows Vista era. There is no “works everywhere” CSS property set.

The only way to know if your email works is to check each client. Emailens tracks 250+ CSS properties across 15 clients that cover 95%+ of real email opens. The Figma plugin brings that analysis into the design phase — where it's cheapest to fix.