From Figma to Email in Minutes with MiN8T

MiN8T Editorial

Email Design & Workflow

Published April 2, 2026 - Updated April 2, 2026

Your designer just spent two weeks perfecting a promotional email in Figma. The layout is gorgeous: a full-bleed hero image with overlapping text, a three-column product grid with rounded corners, custom web fonts, and a gradient call-to-action button that practically glows. The brand team has signed off. The CMO is thrilled. Everyone agrees it is the best email the company has ever designed.

Then it lands on the developer's desk, and the nightmare begins.

That gradient button? Outlook renders it as a flat gray rectangle. The custom font? Gmail strips it. The overlapping text? It vanishes in Yahoo Mail. The three-column grid? It stacks in random order on a dozen different mobile clients. What was supposed to be a quick production step turns into two weeks of hand-coding table-based HTML, testing across 90+ email clients, and a chain of Slack messages that starts politely and ends in all caps.

This is the design-to-email gap, and it has been the single biggest source of friction in email marketing since the first HTML newsletter was sent in the late 1990s. In this guide, we will break down exactly why this gap exists, walk through the pain points of the traditional workflow, and show you a modern approach that takes a Figma design from mockup to inbox-ready HTML in minutes rather than weeks.

1 The Design-to-Email Gap

If you come from a web development background, you might wonder why email is so difficult. After all, it is just HTML, right? Not quite. Email HTML is a fundamentally different rendering environment from the modern web, and understanding the difference is the first step toward closing the design-to-email gap.

Web CSS vs. Email CSS: Two Different Worlds

Modern web browsers share a relatively standardized rendering engine. Whether your user opens your website in Chrome, Firefox, Safari, or Edge, the experience is nearly identical. You can use Flexbox, Grid, custom properties, animations, and virtually any CSS feature from the last decade. Figma's auto-layout feature maps almost perfectly to CSS Flexbox, which is why design-to-web handoff tools like Figma Dev Mode work so well.

Email clients are a different story entirely. There are over 90 major email client and device combinations in active use today, and they all render HTML differently. Microsoft Outlook for Windows uses the Microsoft Word rendering engine, which dates back to 2007 and has not been meaningfully updated since. It does not support max-width, border-radius, background-image with CSS, Flexbox, Grid, or even basic CSS positioning. Gmail strips your entire <style> block if it encounters a single CSS syntax error. Yahoo Mail adds its own styles on top of yours. Samsung Mail ignores media queries.

Why Figma Designs Don't Translate Directly

Figma is a web design tool. Its output assumes a web rendering context. When a designer creates a layout in Figma, they are implicitly using concepts that have no equivalent in email:

• Auto-layout (Flexbox): Outlook does not support Flexbox at all. Email layouts must use nested HTML tables.
• Border-radius: Rounded corners on containers simply disappear in Outlook. You need VML (Vector Markup Language) as a fallback.
• Custom fonts: Only Apple Mail and a handful of other clients support @font-face. Gmail, Outlook, and Yahoo all ignore it.
• Overlapping elements: CSS position: absolute does not work in most email clients. Layered designs must be flattened into images.
• Gradients: CSS gradients are stripped by Gmail and ignored by Outlook. You need a VML gradient fallback or a background image.
• Viewport-relative units: vw, vh, calc(), and clamp() are all unsupported in the majority of email clients.

2 The Old Workflow and Its Pain Points

For most organizations, the design-to-email workflow has looked roughly the same for the past fifteen years. It involves multiple handoffs, redundant work, and an agonizing feedback loop that can stretch a single email from concept to send over weeks.

Step 1: The Designer Creates the Mockup

A designer receives a creative brief and builds the email layout in Figma (or Sketch, or Photoshop, or Illustrator). They focus on visual impact: typography, spacing, color, imagery, and brand consistency. The mockup looks stunning in the design tool. It gets approved by stakeholders. Everyone is happy.

Step 2: The Handoff

The approved design is "handed off" to a developer. This might mean a Figma link, a PDF export, a series of annotated screenshots, or sometimes just a Slack message that says "can you make this an email?" The developer stares at the design and mentally catalogs everything that will not work in email HTML.

Step 3: The Developer Recodes From Scratch

The developer does not "export" the Figma design. They recode it from scratch using table-based HTML, inline CSS, and a collection of email-specific hacks accumulated over years of painful experience. This is skilled, specialized work. A complex two-column layout with a hero image, product cards, and a footer can take 8 to 16 hours of development time.

Step 4: The Testing Gauntlet

The developer sends test emails to a rendering preview service and discovers that the design breaks in at least five email clients. They spend another day writing Outlook conditional comments, adding MSO-specific VML, fixing Gmail's aggressive style stripping, and testing the dark mode color inversions that no one anticipated.

Step 5: The Feedback Loop

The developer sends the coded email back to the designer for review. The designer notices the spacing is off, the font fell back to Arial, and the rounded corners are missing. They request changes. The developer explains the technical constraints. The designer pushes back. Multiple rounds of revision follow. Each round takes a day because the developer has other tickets to work on.

The Hidden Costs

• Developer time: Skilled email developers command $80-150/hour. At 12 hours per email, that is $960-1,800 in development cost alone.
• Opportunity cost: While the developer is hand-coding table layouts, they are not building product features.
• Design compromise: Designers learn to "dumb down" their designs preemptively, avoiding anything that might cause email rendering issues. The result is emails that look safe but uninspired.
• Velocity: Marketing teams cannot iterate quickly. A/B testing different layouts is prohibitively expensive when each variant requires manual development.

3 The Modern Workflow: Figma to MiN8T to ESP

The modern workflow eliminates the developer bottleneck entirely. Instead of handing a Figma file to a developer and waiting days for coded HTML, the designer (or a marketer with design sense) uses a visual email editor to recreate the design directly. The editor handles the email HTML translation, the responsive breakpoints, the Outlook fallbacks, and the CSS inlining automatically.

The Three-Stage Pipeline

Stage 1: Design in Figma. The designer still uses Figma for ideation, brand exploration, and stakeholder approval. Figma remains the best tool for rapid visual prototyping. The key difference is that the designer now designs with email constraints in mind (more on this in Section 5), creating mockups that are achievable in email without heroic workarounds.

Stage 2: Build in MiN8T. Using the approved Figma mockup as a visual reference, the email is assembled in MiN8T's drag-and-drop editor. This is not a crude approximation of the design. MiN8T's block library includes every layout pattern that works reliably across email clients: single-column, multi-column with configurable stacking, hero images with bulletproof buttons, product grids, social blocks, and more. The editor generates clean, tested email HTML behind the scenes.

Stage 3: Export to ESP. When the email is ready, it is exported directly to the team's email service provider: Mailchimp, Klaviyo, HubSpot, Braze, or any of MiN8T's 82 supported integrations. The export includes the HTML, all images (optimized and hosted on MiN8T's CDN), and the responsive CSS, ready for scheduling and sending.

4 Step-by-Step: Recreating a Figma Design in MiN8T

Let us walk through the actual process of taking a Figma email design and building it in MiN8T. We will use a common example: a promotional email with a hero image, a headline, body copy, a three-product feature grid, a testimonial block, and a CTA with a footer.

Step 1: Import Your Brand Kit

Before you build anything, configure your brand settings in MiN8T. Open the Brand Guidelines panel and set your primary colors, secondary colors, and accent colors to match your Figma design tokens. Upload your logo. Set your heading and body fonts. If your brand uses a web font like Inter or Plus Jakarta Sans, MiN8T will embed it with the proper @font-face declaration and automatically specify fallback stacks (e.g., 'Inter', 'Helvetica Neue', Arial, sans-serif) so the design degrades gracefully in clients that strip custom fonts.

Step 2: Choose a Starting Template or Start Blank

MiN8T offers a library of professionally designed starter templates organized by industry and use case. If your Figma design resembles a common pattern (promotional sale, product launch, newsletter digest), starting from a matching template can save time. Otherwise, start with a blank canvas. The template provides the structural skeleton; you will customize every visual detail.

Step 3: Build the Hero Section

Drag a full-width image block onto the canvas. Upload your hero image (MiN8T automatically optimizes it for email: compresses to an appropriate file size, generates a retina @2x version, and hosts it on the CDN). Position your headline text using a text block layered below the image, matching the font size and weight from your Figma mockup. Add your CTA button using the button block, which generates a bulletproof HTML button that renders consistently even in Outlook.

Step 4: Recreate the Product Grid

Drag a multi-column structure block onto the canvas and configure it for three columns. In each column, add an image block (for the product photo), a text block (for the product name and price), and a button block (for "Shop Now"). On desktop, the three columns display side by side. On mobile, MiN8T's responsive engine automatically stacks them vertically, exactly as your Figma mobile frame shows.

Step 5: Add the Testimonial and Footer

Use a single-column block with a background color for the testimonial section. Add a text block for the quote and a small image block for the customer avatar. For the footer, use MiN8T's footer block, which includes pre-built slots for social icons, the unsubscribe link (legally required), your company address, and fine print.

Step 6: Fine-Tune Spacing and Colors

With all blocks in place, switch to the property panel and adjust padding, margins, font sizes, and colors to match your Figma design pixel-for-pixel. MiN8T's property panel exposes the same visual controls a designer is accustomed to: padding per side, background color, border radius (with automatic VML fallback for Outlook), and text alignment.

5 Email Constraints Every Designer Should Know

If you are a designer who has primarily worked on web or mobile projects, email will feel restrictive at first. But these constraints are not arbitrary. They exist because email clients are, frankly, stuck in the past, and your subscribers are using all of them. Here are the rules of the road.

The 600px Canvas

Email content should be no wider than 600 pixels. This is not a guideline; it is a hard limit. Outlook's rendering pane, Gmail's desktop layout, and most webmail clients display emails in a viewport that is 600-660px wide. Designs wider than this will trigger horizontal scrolling or get cropped. In Figma, set your email frame to exactly 600px wide.

Table-Based Layout

Despite what modern web development teaches you, email layouts must be built with HTML <table> elements, not <div> elements with CSS Flexbox or Grid. Outlook's Word rendering engine only understands tables. MiN8T abstracts this away completely - you drag and drop columns and rows, and the editor generates the table HTML automatically - but designers should understand why their Figma auto-layout will not survive a direct CSS export.

Web-Safe Font Stacks

Only a handful of email clients support @font-face: Apple Mail, iOS Mail, and some Outlook.com configurations. Gmail, Outlook desktop, and Yahoo strip custom font declarations entirely. Your Figma design can specify a branded font, but always design with the fallback in mind. If your headline uses Poppins, preview how it looks in Arial. If the fallback destroys the layout (because the metrics are vastly different), consider adjusting the design.

Image-to-Text Ratio

Spam filters penalize emails that are mostly images with little text. A healthy email should have a roughly 60:40 or 70:30 text-to-image ratio. Avoid the temptation to export your entire Figma design as a single image and wrap it in an <a> tag. This approach is inaccessible (screen readers cannot parse it), unresponsive (the image does not reflow), and likely to land in spam.

Image Optimization

• File size: Keep total email size under 102KB to avoid Gmail clipping. Compress images aggressively.
• Format: Use JPEG for photos, PNG for graphics with transparency, and GIF for simple animations. Avoid WebP and AVIF (poor email client support).
• Retina: Export images at 2x their display size and set the HTML width attribute to the 1x value. MiN8T handles this automatically.
• ALT text: Every image needs descriptive ALT text. Many email clients block images by default; your ALT text is the first thing subscribers see.

Dark Mode Considerations

An increasing number of email clients (Apple Mail, Gmail app, Outlook.com) support dark mode, which inverts your colors automatically. Design with this in mind: use transparent PNGs for logos (so the background adapts), avoid text embedded in images (dark mode cannot adjust it), and test with @media (prefers-color-scheme: dark) overrides. MiN8T's preview mode includes a dark mode toggle so you can check the result before sending.

Accessibility

• Use semantic heading tags (<h1>, <h2>) rather than styled <p> tags
• Maintain a minimum contrast ratio of 4.5:1 for body text
• Ensure CTA buttons have a minimum touch target of 44x44px
• Add role="presentation" to layout tables so screen readers skip them
• Never use "click here" as link text; describe the action instead

6 Bridging the Designer-Marketer Gap

The design-to-email gap is not just a technical problem. It is also an organizational one. In most companies, the people who design emails are not the people who send them. Designers create the templates; marketers populate them with content, schedule them, and iterate based on performance data. This division creates a different kind of friction: the marketer changes the copy and accidentally breaks the layout, or the designer updates the template and the marketer does not realize it.

Template Locking: The Guardrail

MiN8T's template locking feature is designed specifically for this problem. A designer (or email developer) creates a master template and locks the structural elements: the layout, the header, the footer, the brand colors, and the image dimensions. The marketer can then edit only the unlocked content areas: headlines, body copy, product images, and CTA text. They cannot accidentally delete a column, change the background color to hot pink, or paste in an unstyled text block that breaks the responsive grid.

This creates a clean separation of concerns. The designer owns the structure and the brand. The marketer owns the content and the schedule. Neither can step on the other's work.

Shared Brand Guidelines

MiN8T's Brand Guidelines module ensures that every email built by any team member automatically uses the correct brand colors, fonts, and logo. When the brand team updates the primary color from #1a73e8 to #0d47a1, every template that references the brand palette updates automatically. No more auditing 50 templates to find the one that still uses the old blue.

Comments and Annotations

Instead of ping-ponging screenshots over Slack, team members can leave comments directly on blocks within the MiN8T editor. A designer can annotate "this image should always be 600x300, cropped to center" on the hero block. A marketer can ask "can we swap this section for a countdown timer?" on the CTA block. The conversation lives where the work happens, not in a separate thread that nobody can find three weeks later.

7 Exporting and Iterating

Building the email is only half the job. The other half is testing, iterating, and shipping. MiN8T's export and collaboration features are designed to make this part as painless as the build.

Version History

Every change you make in MiN8T is automatically saved as a version. Dragged a block to a new position? Version saved. Changed the headline text? Version saved. Applied a new background color? Version saved. If you (or a teammate) makes a change that breaks the design, you can roll back to any previous version with a single click. This is particularly valuable for teams where multiple people touch the same template: you always know who changed what, and when.

Multi-Format Export

When your email is ready, MiN8T supports multiple export formats:

• Direct ESP push: Export directly to Mailchimp, Klaviyo, HubSpot, Braze, SendGrid, or any of 82 supported integrations. The template appears in your ESP's template library, ready to schedule.
• Raw HTML download: Download the email as a standalone HTML file with all CSS inlined and images hosted. Use this for ESPs that are not directly integrated, or for archival purposes.
• AMP email: Export an AMP HTML version for interactive emails in Gmail (forms, carousels, accordions that work inside the inbox).
• PDF proof: Generate a PDF rendering of the email for stakeholder approval or legal review.

Real-Time Collaboration

MiN8T supports real-time collaboration via WebSocket, similar to how Figma allows multiple designers to work on the same file simultaneously. Two marketers can work on different sections of the same email at the same time, with live cursors and conflict-free edits. This is invaluable for large campaigns with tight deadlines where the hero section is being designed while the product grid is being populated.

Preview and Testing

Before exporting, use MiN8T's built-in preview to check the email across desktop, mobile, and dark mode. The preview renders the actual generated HTML, not an approximation, so what you see is exactly what your subscribers will receive. For teams that need full email client rendering previews, MiN8T integrates with testing services to show your email in 90+ real email clients before you hit send.

"We used to dread email production. The Figma handoff alone took a full sprint. With MiN8T, our designers still prototype in Figma, but the build happens in an afternoon. We went from two emails a month to two emails a week." - Director of Marketing, Series B SaaS Company

Related Articles

Email Design

The Ultimate Guide to Responsive Email Design

Brand

How to Maintain Brand Consistency Across Every Email

Editor

Drag-and-Drop vs. Hand-Coding Emails