Figma to Beefree JSON
TL;DR
Designers mock up email templates in Figma, but there's no bridge from that canvas into our email builder. Every layout gets rebuilt by hand, and small details drift in the handoff. So I built a Figma plugin that lets you compose an email visually on Figma then export it straight into Beefree's JSON schema. A one-click flow convert, enrich, log in, and import the finished template directly into RGE Studio, Beefree's email builder product, without ever leaving Figma. A companion Claude Code skill closes the other gap — it takes any existing Figma frame, not just ones built with the plugin, and restructures it into something the plugin can export.
The problem
Beefree's email builder and Figma's canvas don't speak the same language. A designer can mock up a perfectly pixel-accurate template in Figma, but turning it into something Beefree can actually render means a developer manually re-creating every row, column, and module, translating fonts, paddings, and colors by hand. It's slow, and every manual step is a chance for the final template to drift from the design.
What I built with the help of Claude Code
A Figma plugin with a module palette — Row, Heading, Paragraph, Button, Image, Divider, List, Menu, Icons — that inserts real Figma nodes onto the canvas. Every node carries its Beefree-relevant properties (font, radius, padding, alignment) as plugin data, so editing mostly stays inside Figma's native property panel instead of a custom UI bolted on top. Selecting a template frame and exporting produces a valid Beefree JSON — structured rows and weighted columns that map 1:1 to what's on the canvas. For now the whole flow only works against RGE Studio's PRE (pre-production) environment.
From any Figma frame, not just ones built with it
Building templates from scratch inside the plugin's own row/column palette works well when you're starting fresh, but plenty of templates worth importing already exist in Figma as ordinary mockups, assembled long before the plugin existed. So I paired the plugin with a skill that takes any existing Figma frame — however it was built — and rebuilds it into the strict Template → Row → Content Area → Column → module structure the plugin's exporter expects, tagging every node with the plugin data it needs along the way. Point the skill at a frame and it hands back a new, tagged frame sitting right next to the original, ready to select and export. The plugin is no longer limited to templates you build inside it.
Where it stands
It's an unpublished, dev-mode plugin for now — anyone who wants to run it clones the repo and imports the manifest locally — but end to end it works: build a layout on the canvas, and one click later it's a live template in RGE Studio, restricted for now to PRE accounts. What started as a solo build has since gotten sign-off from Beefree's product team to keep pushing it toward a supported internal tool.