At Quicko, our three-person marketing team sends 15M+ emails a year, most of them during tax season, when millions of Indians file their ITRs.
In the weeks leading up to a deadline, we send two to three emails every week. Each needs to reach the right people at the right time. That means moving fast without compromising on quality.
But creating a single email used to take us a day and a half, making it harder to keep up with this pace.
Designing every email twice
We started every email in Figma. It gave us the freedom to explore ideas, refine the messaging and get the visuals just right.
Once the design was ready, we moved to Beefree to turn it into HTML that worked across email clients like Gmail, Outlook and Apple Mail. Beefree was built to reliably generate email-compatible HTML, but its block-based editor wasn't built for the kind of creative exploration we did in Figma.
We had to finalise the design first, then recreate it in Beefree. We wanted to eliminate that second step so we could spend less time redesigning and more time getting the communication right.
What we needed
We spent months exploring tools that could simplify this process. Any solution had to meet three requirements:
Emails render correctly across major email clients and devices.
No designing the same email twice.
Emails can be customised for mobile.
We tried tools like Migma, Canva and a bunch of Figma plugins. None of them met all three requirements at a cost that made sense for us.
Why existing Figma-to-HTML plugins weren't enough
Plenty of Figma plugins already turn designs into HTML. So why couldn't we use one of those?
The problem was that website HTML doesn't always work well in email. Websites can use modern CSS features like flexbox and grid to arrange content, but email clients support these inconsistently. The same HTML can look different across inboxes.
Apple Mail supports most modern CSS features. Classic Outlook on Windows uses Microsoft Word's rendering engine instead of a browser, while Gmail has its own limitations, including inconsistent support for media queries.
To ensure emails render reliably across these environments, email HTML typically relies on table-based layouts and inline styles rather than the modern CSS techniques commonly used for websites.
Building the plugin
With AI making it easier to build software, it's tempting to build the entire stack yourself. But building more doesn't always mean solving the problem better.
We already had two tools that worked well for us. Figma gave us the creative freedom to design emails, while Listmonk, a free, open-source platform, helped us execute campaigns reliably at scale. Replacing either would mean rebuilding something that already worked.
The real problem was the gap between them. We wanted to keep Figma as the single source of truth for our email designs, without recreating them in another tool to generate HTML. So we built Email HTML Generator as a Figma plugin.
Keeping the workflow in Figma solved the problem of recreating designs. But we also wanted to make HTML generation accessible to everyone.
At our company, people across functions create and send emails. Since not everyone knows how to write and edit code, we needed to make the process simple enough for anyone to prepare an email without technical help.
Configuring HTML without code
Email HTML needs more than just visual design. Buttons need URLs, and images need a source, whether it’s a CDN link or an uploaded file. Instead of asking users to edit code, we added input fields directly to the plugin.
Users can select a layer, choose its type, and fill in the relevant details. The plugin uses these inputs to generate the corresponding HTML.
Customising layouts for mobile
An email that looks good on desktop may not work as well on mobile. Layouts may need to stack, text sizes may need to change, and some elements may need to be hidden on smaller screens.
The plugin lets users adapt their designs for desktop and mobile without creating separate versions. They can adjust typography, alignment, spacing and padding, and choose which layers appear on each screen size.
Previewing before export
We also added web and mobile previews so users can check whether their setup is working as expected. They can verify layouts at different screen sizes and catch issues before exporting the email.
Catching issues before export
As we tested the plugin, we found that small issues in the Figma setup or generated HTML could break an email or affect how it rendered across inboxes.
That is why we added an Issues tab in the plugin itself which could flag problems in the HTML early on. These issues are grouped into 3 levels based on severity:
Critical: Issues that can break the email, such as a frame without auto layout or an empty image block.
Major: Issues that may cause rendering problems in some clients, such as non-web-safe fonts, background blur or relative links.
Minor: Accessibility issues, such as missing alt text.
Each issue points users to the layer where the problem occurs, making it easier to find and fix.
We made these warnings rather than hard blockers. Some design choices are intentional, and the person creating the email should be able to decide what needs fixing. The goal is to flag potential problems early while giving users the flexibility to make the final call.
What we learnt
AI acted as a catalyst, helping us finally tackle a problem that had slowed down our email production for years. It made building the plugin faster and lowered the technical barrier to getting started.
Our experience in email marketing and design was what helped us turn that opportunity into a useful solution. It guided how we framed the problem, evaluated trade-offs and made decisions. As AI makes implementation more accessible, knowing what to build and why becomes even more important.
From a day and half to half a day
Email production is now 3× faster. That means less time spent on repetitive tasks and more time to focus on the campaigns themselves.
Here are some of the campaigns we’ve crafted this year with plugin:
We built Email HTML Generator to solve a problem in our own workflow, but the problem isn't unique to us. So we've made it available on Figma Community. Try Email HTML Generator on Figma.