Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens
Sign in
Blog

Figma Email Designs: Check Outlook and Gmail Before Handoff

A Figma frame is drawn on a browser canvas, while inboxes render HTML through Word, sanitizers and WebKit, so check the design against the clients your readers use before you build it.

The checker needs a computer screen.

A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →

Philippe Kam, founder of Emailens · Published 26 Mar 2026 · Updated 28 Oct 2026

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Part of the HTML email guide · all guides

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.

The design was never wrong; it was drawn for a browser canvas, and every inbox rewrites HTML its own way. This post is about closing that gap at the Figma stage, before anyone writes code. For why clients differ in the first place, see the HTML email guide.

What breaks between a Figma email design 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: border-radius is not supported in Outlook Classic. Your rounded buttons render square there.
  • flexbox / CSS grid: display:flex is not supported in Outlook Classic. grid-template-columns is not supported in Gmail. 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's mobile apps drop media queries when the account is not a Google account, so for those readers a responsive design does not respond.

Looking up a symptom you already shipped? The email rendering bugs list maps each one to its cause and fix.

Check a Figma email before you hand it off

The traditional workflow: code the email, send it to a screenshot service, wait for the results, find the bugs, fix them, repeat. Every round trip happens after the design is already built.

The Emailens Figma plugin moves that check earlier: it scores your email's compatibility across 21 clients directly inside Figma, before you write a single line of code. It draws on the same data as the web app: 300 CSS and HTML features tracked across 21 clients.

How the Emailens Figma plugin works

Select a frame. The plugin reads your auto-layout structure, text, images, and styles.

Click Preview. Your design is converted to email HTML and analyzed against 21 email clients, among them Gmail, Outlook (New, Classic, iOS, Android), Apple Mail (macOS, iOS), Yahoo, Samsung, Thunderbird, HEY Mail and Superhuman.

Read the scores and warnings. Each client gets a 0-100 compatibility score. CSS warnings tell you exactly what breaks and where: “border-radius ignored by Outlook Classic”, “3+ columns may stack in Samsung Mail”.

What designers get from the check

  • 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 from the check

  • 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

Try the Figma plugin

Install from Figma CommunityLearn more about the plugin

Free to use. 15 previews per day, no account needed.

Questions

Why do Figma designs look broken when coded into HTML email?

Figma uses modern web layout primitives (Flexbox auto-layout, absolute positioning, border-radius and web fonts). Email clients support them unevenly: display:flex is not supported in Outlook Classic. border-radius is not supported in Outlook Classic. @font-face is not supported in Gmail. The result is unstacked columns, square corners and fallback typography.

Can I export HTML directly from Figma for email newsletters?

Generic HTML export plugins generate modern CSS (Flexbox/Grid/divs) that completely fails in Outlook and Gmail. Email HTML requires nested tables with specific presentation attributes, inlined CSS, and VML fallbacks for buttons and background images.

How does the Emailens Figma plugin help designers?

The Emailens Figma plugin inspects design layers directly on the canvas, alerts designers when properties won't render in Outlook or Gmail (such as background images or unsupported fonts), and renders real-time inbox previews before handoff.

Which inboxes should a designer check a Figma email in first?

The most common breaking clients are Windows Outlook (Word rendering engine), Gmail mobile and web (CSS sanitization and font stripping), and Apple Mail (dark mode color shifts).

Your next question

Also useful: Email Rendering Playground · HTML email checker · Emailens for Figma

Paste the email that broke.

The checker needs a computer screen.

Get new email CSS fixes by email, or follow by RSS.