Build with the Figma MCP

AI agents can now build real, export-ready emails directly in your Figma file. Not mockups. Not pictures of emails. Actual emails, assembled from your design system, that your team can review in Figma and ship to your ESP. The official Figma MCP gives the agent hands on your canvas. The Email Love workflow supplies safe email structure, either from your published components or through the AI Import conversion engine. The Email Love plugin then exports the result, same as any email you designed yourself.

What an agent can do

Point an agent at your Figma file and it handles real production work. Four jobs, in the rough order teams grow into them. Build email templates. Give it a brief and it assembles emails from your design system: your header, your hero, your footer, in your voice. The output is real email structure the plugin exports, not a picture of an email. This is the everyday use, and most of this page is about it. Build a design system. No components yet? The agent turns a design you already have into your first Email Love components, using the same conversion engine behind AI Import. Your first email doubles as the first piece of your library. Document your design system. When an agent builds a library it organizes it, too: a cover, a foundations page with your colors and spacing as real Figma variables, a type specimen you can read at a glance, and one page per section. The result reads like a system someone maintains, so a teammate who did not build it can still find their way around. Migrate an existing library. Templates built before Email Love, in your own Figma or an agency’s? Two free skills audit what you have and rebuild it as a working Email Love design system, without touching your original. See Migrating an existing design system. All four end the same way: the Email Love plugin exports the result to your ESP, same as any email you designed by hand.

Before you start

Every build needs:

The Email Love plugin installed in Figma
The official remote Figma MCP connected to your AI agent, with use_figma, get_metadata, and get_screenshot
The Email Love workflow installed for Claude or Codex

If you already have a synced design system, the agent builds from its mj-wrapper components. See Creating and Managing Design Systems. If you do not have one yet, the workflow converts a design you already have into your first email. Both routes are explained under Why these emails actually export below.

The conversion route sends a rendered image of your design, and any metadata you pin, to the Email Love design-converter service. Remove personal or confidential content first and review the Codex data-handling guidance before using it with sensitive material.

Install the Claude skill

If your agent is Claude, install the official Email Love Figma Builder skill before anything else. A skill is a set of expert instructions Claude loads automatically when the task matches, and this one teaches Claude the entire workflow on this page, plus the parts a starter prompt can’t carry:

A guided brief interview (what email, the goal and CTA, key content) before it touches the canvas
A full inventory of your component library, with the option to pick components yourself from a visual contact sheet or let Claude choose by content fit
Inspiration from Email Love’s library of 500,000+ real brand emails via the free Email Inspiration MCP, when connected
Structural verification before hand-off, so every email it builds actually exports

Pick your surface:

Claude.ai
Claude Code (terminal)
Claude Code desktop app
Team setup

Custom skills work on every plan, including Free, on web and desktop (not the mobile apps).

Enable code execution under Settings → Capabilities. Skills require it. (Team and Enterprise: an organization owner must enable code execution and skills in Organization Settings first.)
Open the releases page and download emaillove-figma-builder.skill from the newest release. Each release attaches one .skill bundle per skill, so take the one named for the skill you want.
Go to Settings → Capabilities → Customize → Skills and upload the file.
Ask Claude to build an email in your Figma file. The skill activates automatically when the task matches.

Run these two commands from any shell, once:

claude plugin marketplace add email-love/claude-skills
claude plugin install emaillove-figma-builder@email-love

Inside an interactive claude session, the same two commands work as /plugin slash commands.Installed once, the plugin loads across all your Claude Code surfaces, the desktop app included, and updates arrive automatically when we release new versions.

The desktop app has no /plugin command in chat, and its plugin browser (the + button next to the prompt box, then Plugins) can only install from marketplaces it already knows about; it cannot add a new one. Two ways in:Easiest: run the two commands from the terminal tab once. The plugin then loads in the desktop app automatically; nothing else to do.Terminal-free: add the marketplace to ~/.claude/settings.json, restart the app, then install from the plugin browser:

{
  "extraKnownMarketplaces": {
    "email-love": {
      "source": { "source": "github", "repo": "email-love/claude-skills" }
    }
  }
}

Commit this to your project’s .claude/settings.json and everyone who trusts the workspace gets the plugin automatically; no individual installs:

{
  "extraKnownMarketplaces": {
    "email-love": {
      "source": { "source": "github", "repo": "email-love/claude-skills" }
    }
  },
  "enabledPlugins": {
    "emaillove-figma-builder@email-love": true
  }
}

With the skill installed you can skip the starter prompt below; just tell Claude what you want built and share your file link. The rest of this page explains the mechanics, which apply to any agent.

Install the OpenAI Codex plugin

The Email Love Codex plugin contains two skills: one for building emails and one for auditing and migrating a legacy design system. Codex loads the right workflow when the task matches, so you do not need to copy an AGENTS.md file or paste the long starter prompt.

Add the Email Love marketplace

Run this once from a terminal:

codex plugin marketplace add email-love/codex-agents --ref v3.0.0

Install the Email Love plugin

codex plugin add email-love@email-love

Start a new Codex task or CLI session after installation so both skills are available.

Connect Figma

Connect the remote Figma MCP server and sign in. A connection without use_figma is read-only and cannot build on the canvas.

codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma

Ask for an email

Talk to Codex normally and share your Figma file link: “Build a promo email in [link]. Spring sale, 20% off with code SPRING20, ends Sunday, one CTA to the pricing page.”The skill activates automatically. You can also invoke it explicitly with $email-love-figma-builder.

Approve the Figma tool calls

Codex asks permission before each use_figma call, and every canvas write goes through that one tool. Approve them. If they are declined, or the session cannot prompt you, Codex reports that the Figma write tools “aren’t connected” and builds nothing, even though your connection is fine. This is the most common thing that goes wrong.

To upgrade later, refresh the marketplace and restart Codex:

codex plugin marketplace upgrade email-love

ChatGPT chat cannot build emails in Figma. The Figma app in ChatGPT only creates FigJam diagrams, Figma Slides, and Figma Buzz assets; it cannot edit Figma Design files or place your design system components. Use Claude or Codex for building, and ChatGPT for planning and copy.

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

With a synced design system, it duplicates one of your Email Love email frames as the root, fills it with component instances, and rewrites the text. Without a design system, it generates the structure through the AI Import conversion engine, transcribes it, and applies your brand foundations.

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.

A prompt to start from

If you installed the Claude skill or Codex plugin, skip this prompt. Tell the agent what you want and share your Figma file link. Use this longer prompt only with another agent that has the Figma MCP but not an Email Love workflow:

Build emails in my Figma file using the Figma MCP.

File: [paste your Figma file link]

The file contains an Email Love design system: email frames and
components built as mj-wrapper stacks with auto-layout. Do not design
freehand and do not create a root frame from scratch. Start each email
by duplicating an existing Email Love email frame in the file, then
build inside it: fill it with instances of my components and rewrite
the text. Never detach an instance; change its text instead. Only
frames the plugin recognizes export as email.

Campaign brief:
[Add your campaign brief here: which emails you need, what each one
should say, and which components to lean on]

Rules:
- Give each email its own duplicated frame, laid out side by side on
  the canvas
- Reuse my header and footer components on every email
- Match my brand voice from the existing copy in the file
- For imagery, keep my image blocks and set their fills to a flat gray
  placeholder at the existing dimensions; our design team will
  art-direct them later
- Leave final CTA URLs alone; we set those at export

The shape matters more than the specifics: point at the file, tell the agent to start from an existing Email Love frame, drop in your brief, and set the guardrails. It works the same for a single promo or a full lifecycle program.

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.

Creating a frame from scratch

Duplicating an existing Email Love frame is still the most reliable starting point: the copy carries every plugin setting with it. But agents can now also build the root frame from scratch and opt it in as an email template with a public marker:

frame.setSharedPluginData('emaillove', 'nodeType', 'mainFrame')

Any tool that can run Figma plugin code can write this, including agents working through the Figma MCP. Select the marked frame and the Email Love plugin treats it as a template: rendering components into it, the settings panels, preview, and export all work. Two things to include when going this route:

Seed every root setting. A frame the plugin created gets the theme and fallback settings stamped at creation. A from-scratch frame starts with none, and empty color settings export with dark-theme defaults, so a light email would silently come out with dark globals. Write them the same way as the marker. For a white-background email:

frame.setSharedPluginData('emaillove', 'backgroundColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'contentColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'textColor', '#000000')
frame.setSharedPluginData('emaillove', 'linkColor', '#000000')
frame.setSharedPluginData('emaillove', 'buttonTextColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'buttonContentColor', '#000000')
frame.setSharedPluginData('emaillove', 'lightThemeBackgroundColor', '#ffffff')
frame.setSharedPluginData('emaillove', 'fallBackFontName', 'Arial')

All of these stay editable in the plugin’s settings panel afterward, same as any other template.

Fill it with generated or published structure, never hand-built sections. Instances of your synced Email Love components carry their own structure and export cleanly. If no component fits, the agent converts that section through the AI Import engine instead. A section drawn from visual intuition can look correct and still flatten or disappear on export.

Make sure you’re on the latest version of the plugin; older versions only recognize frames the plugin created itself.

Why these emails actually export

An email can look perfect on the canvas and still arrive broken, because the plugin keeps its real structure in data you do not see by eye. A section drawn freehand looks right and then silently drops out of the sent email, a flat image where you expected live text. So an agent never invents that structure. It works one of two ways, and you manage neither:

Instancing, when you have a design system: it places instances of your components and changes their text and images. It never detaches an instance or redraws its insides.
Conversion, when you do not: it sends the design to the AI Import engine, gets real email structure back, and rebuilds it in Figma node by node.

If a section fits neither route, the agent stops and asks. “No component fits, so I will build it myself” is the one failure this whole design exists to prevent.

Tips and limits

Broader recognition of agent-built structure. The plugin now reads Email Love structure written through the shared emaillove namespace, not only its own private data. This is what makes the from-scratch marker above work, and it closes gaps where parts of an agent-assembled email could be skipped on export.
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 set your image blocks to flat gray fills at their existing dimensions, then let a human art-direct the real images.
Verify CTA links in the plugin. An agent can add a real URL supplied in the brief, but existing links set in the plugin may take precedence. Treat agent-written links as provisional and check them before export. See Adding Links.
Match your model to the job, if your tool lets you choose. Building or migrating a design system is a one-time job with a lot of rules to hold at once, so use your most capable model there. Building a routine campaign against a design system that is already synced and verified is smaller work, and a faster model handles it well.
A build takes minutes, not seconds. Most of the time is round trips to Figma rather than the agent thinking, so expect a single email to take a few minutes and a long one with many sections to take proportionally longer.
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.

Saving what it built as a design-system module

Right after a build, the usual next question is how to keep a block the agent produced. That is a module, and a module is a different shape from an email. Getting this wrong is the most common snag.

An email template is a root frame marked as a template, with wrapper components stacked inside it.
A module is the wrapper itself: an mj-wrapper component, with no template marker on it or anywhere below it.

The plugin decides which one you handed it by looking at the top node of your selection. A wrapper gets stored as a reusable block, and only a wrapper gets the machine-readable component data that lets agents and the Email Love MCP read it back later. A frame carrying the email-template marker gets stored as a whole template instead. So a module built as a small email uploads without complaining and then behaves like an email everywhere that matters. Build the block, not a one-block email. Modules also carry no theme color keys of their own. Those belong on the email that contains them, and a module that sets its own button colors will fight the email it lands in. The exception is a block you deliberately want treated differently in dark mode. To upload them:

Select a design system in the plugin

Use the dropdown in the top left. The upload will refuse to start without one.

Open the section you are uploading into

Header, Heroes, Single Column, Footer, and so on.

Select the wrapper components on the canvas

Select as many as you like. The plugin handles a multi-selection of wrappers as one batch, which is exactly what you want after an agent has built a set of them.

Click Upload inside that section, then confirm

You get an upload summary with success and failure counts.

Full walkthrough, including the 13 predefined sections and how syncing works: Creating and Managing Design Systems.

Migrating an existing design system?

If your email templates were built before Email Love (your own Figma design system, agency templates, or a legacy library), two free skills take you from “what do we even have?” to a working Email Love design system. Installing them. These are Claude skills. In Claude Code, run these once from any terminal (inside an interactive claude session, the same commands work as /plugin slash commands):

claude plugin marketplace add email-love/claude-skills
claude plugin install emaillove-migration-audit@email-love
claude plugin install emaillove-eds-converter@email-love

In Claude.ai, download both .skill files from the latest releases and upload them under Settings → Capabilities → Customize → Skills, exactly like the builder skill above. Using Codex? The same Email Love plugin already includes the migration skill. Start a new task and ask:

Use $email-love-design-system-migration to audit this legacy email design system.
Keep the source file read-only.

The skill audits first, builds only in a separate target file, and converts no more than five modules before a design review.

1. Audit it

Strictly read-only. Point it at your existing file and it classifies every template (live-text convertible, editable-image candidate, hybrid, or not emailable), extracts your brand foundations (type ramp with email-safe fallbacks, palette, proposed theme colors, spacing, and button styles), flags risks such as unlicensed fonts or component masters living in unshared library files, and produces a migration report your team can share internally, with an effort estimate. Ask: “Audit this design system for migration to Email Love: [your file link]“

2. Convert it

This one does the rebuilding. It takes the audit report and builds a working Email Love design system in a new Figma file, in two stages:

Foundations, once: library pages, your type ramp recreated on email-safe fallbacks, your button styles rebuilt with correct email construction, spacers, logo and imagery round-tripped as assets, and a root template frame at your email width carrying the plugin marker and theme colors.
Modules, in batches: each design is rebuilt with correct export structure, its mobile twin merged into Mobile Styles data, componentized and tagged ready to save into the plugin, and verified with a side-by-side screenshot against your original. A design review gates each batch, so nothing runs unreviewed at scale.

Your original file is never modified; everything is built in the new one. Ask: “Run foundations for our migration”, then “run batch 1”.

Or have us do it

The same process, run by the Email Love team with design review included, is Enterprise onboarding. That is the right call when you want the judgment calls made for you: confirming theme colors, resolving font licensing, chasing down missing assets, and signing off on quality. Email hello@emaillove.com.

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.

Need help?

Email hello@emaillove.com and we’ll respond within a business day.

​What an agent can do

​Before you start

​Install the Claude skill

​Install the OpenAI Codex plugin

​The workflow

​A prompt to start from

​What this looks like in practice

​Creating a frame from scratch

​Why these emails actually export

​Tips and limits

​Saving what it built as a design-system module

​Migrating an existing design system?

​1. Audit it

​2. Convert it

​Or have us do it

​Related Articles

​Need help?

What an agent can do

Before you start

Install the Claude skill

Install the OpenAI Codex plugin

The workflow

A prompt to start from

What this looks like in practice

Creating a frame from scratch

Why these emails actually export

Tips and limits

Saving what it built as a design-system module

Migrating an existing design system?

1. Audit it

2. Convert it

Or have us do it

Related Articles

Need help?