Why this works
The Figma MCP writes designs. Figma’s official MCP server lets an agent create and edit layers on any board. On its own, that means an agent can design anything, including things that look like emails. But here’s the part that matters: if your file contains an Email Love design system, the agent isn’t designing freehand. It’s assembling your components. The mj-wrapper stacks with auto-layout that the Email Love plugin knows how to export as clean HTML are the same structures an agent can clone, restack, and rewrite. The result is a real email, not a picture of one. The Email Love plugin ships it. When the build is done, you don’t need anything new. Select the finished frame and export through the plugin, exactly like an email you built by hand.What you can build with what
| You have | Agent can do | What you get |
|---|---|---|
| Any Figma board + Figma MCP | Design anything, including email-shaped frames | Pictures of emails. The plugin or AI Import would need to convert them before they could ship. |
| Your Email Love file + Figma MCP | Assemble real emails from your synced components | Export-ready emails, because the structure is yours |
| Your Email Love file + the plugin’s export | Ship what the agent built | Production HTML in your ESP |
Before you start
You’ll need three things in place:- The Email Love plugin installed in Figma
- A synced design system in your Figma file: mj-wrapper components uploaded through the plugin. See Creating and Managing Design Systems.
- The official Figma MCP connected to your AI agent, so it can read and edit your file
The workflow
Point your agent at your Figma file
Give it the file link and a brief: what emails you need, what they should say, which components to lean on. The Figma MCP handles access.
The agent assembles from your components
It clones your synced mj-wrapper components, stacks them with auto-layout, and rewrites the text for each email. Because it’s building on your structure, everything it makes is already in the format the plugin exports.
Your team reviews in Figma
The build lands on your board like any other design work. Teammates comment, tweak copy, and swap imagery right in Figma. No new review tool to learn.
Export from Figma to your ESP
Select the finished frame and export through the Email Love plugin, same as any email you designed by hand. The plugin renders production HTML and pushes it to Customer.io, Klaviyo, Braze, and others, with the correct unsubscribe merge tag applied for your ESP. See Export Overview for the full list.
What this looks like in practice
We ran this exact workflow on our own lifecycle program. An agent built 37 emails inside our Figma file in one working session: hero sections, alternating two-column feature rows, case-study blocks, pricing rows, and gray image placeholders left for the design team to art-direct. Every email was assembled from synced components, reviewable and commentable by the team in Figma, and export-ready through the plugin. That’s the enterprise angle in miniature. Once a design system is synced into your file, an agent can build an entire lifecycle program inside your own Figma, on your components, reviewed by your team, and exported through the plugin.Tips and limits
- Agents assemble better than they draw. Point them at your synced components rather than asking for freehand layouts. Cloning and restacking your structure is where they shine.
- Treat new imagery as placeholders. Have the agent drop in gray placeholder blocks at the right dimensions, then let a human art-direct the real images.
- CTA link targets are set at export. Don’t worry about wiring final URLs during the build. See Adding Links.
- Building on the canvas is free. Agents can assemble and revise as much as you like. Exports are what’s metered on the Free plan (5 per month); paid plans are unlimited.
Related Articles
- Email Creation MCP: Prefer chat over canvas? The Email Love MCP lets an agent compose and render emails from the same synced components, no Figma open.
- Creating and Managing Design Systems: Sync your components so agents can build with them.
- Element Reference: Section, Column & Wrapper: The structure agents assemble.