[DEV] Figma to HTML Email Builder — Plugin

Problem Statement

Translating newsletter designs into email-safe formats are a true pain in the neck. Unless you create your design directly in code, there is no way to guarantee that your design will come out how you want it to look. What you then end up with is having to choose between using a JPEG for the full newsletter content or building it on Outlook on Word just so you wouldn't have to risk any image or layout breaking.

Solution

I initially tried to look for a Figma plugin that I could use, but none of them could quite translate my designs correctly into email format. Then I realized two things:

1. There was absolutely no way that the code was going to be able to faithfully translate the design to code because the viewport dimensions were not static. Which meant...
2. I was solving the wrong problem.

So I pivoted, reworked the plugin on Kiro, and instead made it so that users could either work with a template already or select components from a library depending on their need at that time.

Module Library

The component library is the heart and soul of the module library, which comprises 11 different types:

• Header, Hero, Body (1-col, 2-col, 3-col), Carousel, Quote, Status, Divider, Spacer, Footer
• Each module has 2-4 variants (e.g., Hero: Image Background, Solid Background, Split)
• All modules are responsive — multi-column layouts stack to single column on mobile

Preset Themes and layouts

The plugin also has five color themes that the user can choose from, as well as layouts different use cases like newsletter, anouncement, report, product showcase, and more.

Other Design Decisions

• Font governance built in — An approved font list prevents drift. Too much liberty in font usage risks compatibility issues. The key in bridging design and code is balance.
• 8px spacing grid enforced — Spacing constraints (0-64px range) prevent layout drift between components.

Tech Stack

TypeScript, Figma Plugin API, fluid-hybrid responsive HTML generation, VML (for Outlook), inline CSS transformation (for Gmail).

Results & Impact

• Complete email design system installable as a Figma plugin
• 11 module types with 30+ total variants
• 3 export targets (Outlook, Gmail, Universal)
• Font governance prevents brand drift across campaigns
• Responsive behavior built into every component — no separate mobile design needed
• Eliminates the designer → developer handoff gap for email campaigns