Architecting the
JavaScript & Figma API Logic
How I reverse-engineered the archaic rules of email client rendering and mapped them to modern Figma nodes.
1. Parsing the Figma Abstract Syntax Tree (AST)
The core challenge was translating Figma's modern vector-based layout system (Auto Layout, Frames, Groups) into the deeply nested <table> structures required by legacy email clients.
Using JavaScript and the Figma Plugin API, I wrote a recursive function that traverses the designer's selected frame, analyzing node properties (width, height, fill, strokes, text content) node by node.
const selection = figma.currentPage.selection;
if (selection.length === 0) {
figma.notify("Please select an email frame to generate code.");
return;
}
function traverseNodes(node) {
if (node.type === 'FRAME' && node.layoutMode !== 'NONE') {
// Map Auto Layout to a nested HTML table row
return generateTableRow(node);
} else if (node.type === 'TEXT') {
// Extract typography and deeply inline CSS
return generateInlineText(node);
}
// Recursive traversal for nested groups
if ("children" in node) {
node.children.forEach(child => traverseNodes(child));
}
}2. Deep CSS Inlining & Asset Automation
Because platforms like Outlook strip out <head> style tags, every single piece of typography, padding, and background color had to be translated into inline CSS on the fly.
Furthermore, the script identifies image nodes, utilizes Figma's export async functions to slice them at 2x resolution (for Retina displays), and outputs image tags with the correct max-width fallbacks for mobile responsiveness.
Need a technical systems builder on your team?
I bring this same engineering mindset to CRM architecture, GA4 pipelines, and Technical SEO.