Sendra: The Figma Email Design Plugin That Exports Cross-Client Compatible HTML in One Click

The Long-Standing Pain of Email Development

For any team that has worked on email marketing or product notifications, building HTML emails is a notoriously painful experience. A design that a designer carefully crafts in Figma often requires hours of hand-coded HTML once it lands with a developer — and that code must render correctly across wildly different email clients like Gmail, Outlook, and Apple Mail.

The root of the problem is that email HTML and modern web development are essentially two different worlds. Mainstream email clients (Outlook in particular) have extremely conservative CSS support, making many modern layout techniques unusable. Developers are forced to fall back on table-based nested layouts from over a decade ago, painstakingly assembled with inline styles. A single rendering issue in one client can mean hours of debugging.

Sendra was built to address exactly this pain point. It's a Figma email design plugin focused on converting your email designs directly into clean, responsive HTML that renders correctly across all major inboxes. It recently launched on Product Hunt with 102 upvotes, catching the attention of designers and marketers alike.

The reason Outlook is so conservative with CSS comes down to a fundamental architectural decision: starting with Outlook 2007, Microsoft replaced the rendering engine in its desktop client — previously based on IE — with Microsoft Word's layout engine. This means Outlook processes HTML emails using Word's document logic, not a browser's web logic. Modern CSS properties like Flexbox, CSS Grid, background-image, and border-radius are nearly completely broken in Outlook. This is why email developers still rely so heavily on <table> nested layouts — it's the only approach that achieves stable compatibility between Outlook and modern clients. It's worth noting that the web version of Outlook (Outlook.com) uses a separate rendering engine that behaves differently from the desktop version, adding yet another layer of testing complexity.

Core Features: From Figma Design to Ready-to-Use Email Code

No Rebuilding Required — Just Select a Frame and Export

Sendra's biggest selling point is the smoothness of the workflow. It doesn't require you to use a specific component library or rebuild your design from a template. You simply select any completed Frame in Figma, and the plugin identifies and converts it into email HTML. This means designers can continue working the way they're used to, without changing their creative process just to produce an email export.

This may sound simple, but it's actually the dividing line between Sendra and many similar email development tools. Plenty of email builders require users to construct everything from scratch inside their proprietary editors — high learning curve, limited flexibility. Sendra instead integrates directly with the Figma environment designers already know, dramatically lowering the barrier to adoption.

Granular Mobile Responsiveness and Dark Mode Control

Responsiveness is a non-negotiable for modern emails — over half of all emails are opened on mobile devices. Sendra offers per-element control, letting users independently configure stacking, spacing, and sizing for each element on mobile.

It also supports dark mode overrides. As iOS and major email clients have broadly introduced dark mode, an email without proper dark mode adaptation can easily suffer from unreadable text or awkward logo backgrounds. Sendra lets designers define how their email should appear in dark mode upfront, preventing embarrassing issues after launch.

Dark mode adaptation in email is more complex than on the web, because each client implements it differently. Apple Mail and iOS Mail will automatically apply "smart inversion" to colors that haven't been adapted for dark mode, which can sometimes cause originally white-background logos or images to display with an opaque black background. Gmail's dark mode forcibly replaces certain color values, but with non-transparent rules. Common adaptation strategies include using the @media (prefers-color-scheme: dark) CSS media query to provide alternate styles for supported clients, and using transparent PNGs or SVGs for images to prevent background clipping issues. Sendra's "dark mode overrides" feature essentially packages all of this tedious compatibility work into the design workflow, letting designers define both visual states directly at the design layer.

Real-Device Verification: More Than Just a Preview Tool

Rendering Rules Tested on Real Devices

Sendra makes a point of emphasizing that every one of its rendering rules has been verified on real devices — not just preview tools. This is a technical detail worth paying attention to.

Many email testing services provide "screenshot previews" — generating visual representations of how each client would display an email using simulated environments. But there will always be gaps between a simulated environment and the real client, especially for outliers like Outlook with its Word-based rendering engine. Sendra claims its rule library is validated on actual hardware, which in theory provides a stronger guarantee of email compatibility.

The major email preview testing services on the market (such as Litmus and Email on Acid) generate previews by running real email client instances or screenshot bots on their servers, covering 90+ clients. The limitations of these services include: screenshots are taken at a fixed moment and can't reflect user interaction states; Outlook and similar client simulation environments may lag behind real version updates; and certain rendering differences only appear on specific OS versions or font configurations. Sendra's emphasis on a "real-device-verified rule library" is less about replacing these testing workflows and more about incorporating real device data during the rule generation phase itself — reducing the likelihood that the generated code will have compatibility issues in the first place. The two serve different roles in the product pipeline.

Image Hosting and Sending Real Test Emails

Beyond code conversion, Sendra also handles image hosting — emails require images to have stable external URLs, and Sendra takes care of this automatically. More practically, it can send a test email directly to your inbox, letting you see exactly what recipients will see before you hit "send."

This final "what-you-see-is-what-they-get" verification step is critical for avoiding the risk of discovering problems only after a full send. Once a mass email goes out, it can't be recalled — any display bug directly impacts brand perception and conversion rates.

Product Positioning and Target Teams

Sendra was built by independent developer Joseph Azzi and sits at the intersection of Email, Design Tools, and Email Marketing. From a positioning standpoint, it bridges the gap between design and development, primarily serving marketing teams, SaaS product teams, and freelance designers who need to produce emails frequently.

For small teams without dedicated email development resources, this kind of Figma email plugin is especially valuable — it empowers designers to independently handle the entire flow from design to deliverable HTML, eliminating back-and-forth communication and manual coding costs. For larger teams, it can serve as a standardized step in the process, reducing human error.

Of course, the real-world performance of tools like this ultimately depends on how faithfully their rendering engine can reproduce complex designs. Email HTML has an enormous number of edge cases, and whether the tool can truly deliver "HTML that works in every client" will need to be tested in real projects. But from a product thinking standpoint, Sendra addresses a genuine and high-frequency pain point, and its workflow design is refreshingly pragmatic.

Closing Thoughts

In an era overflowing with design tools and automation solutions, Sendra represents a class of practical products laser-focused on solving specific workflow pain points. It doesn't chase grand narratives — it just does the job of making the Figma-to-email-HTML pipeline reliable. For teams that have suffered through email development headaches, a Figma plugin that genuinely reduces repetitive work may be far more compelling than many flashier concepts.