Build Emails in Figma with Claude or Codex

Give Claude or OpenAI Codex a brief and a Figma file link. It builds a real Email Love email on your canvas that your team can edit, review, and export to your ESP. Not a screenshot. Not a mockup. A real email. The agent builds campaigns from your published Email Love components. If you are starting without a design system, its first job is to build or migrate one from your existing emails and designs.

What you need

There are three pieces:

The Email Love Figma plugin, installed in Figma and ready to open in the file where you want to build
The Email Love workflow, installed in Claude or Codex so the agent understands export-safe email structure
The official remote Figma MCP, which gives the agent access to your canvas

To write to the canvas, you also need a Full Figma seat and edit permission for the file. The Figma connection must include use_figma, get_metadata, and get_screenshot. A connection without use_figma is read-only.

Your agent asks for approval before it writes to Figma. Approve the use_figma calls. Declining them stops the build, even when the connection is working.

Set up your agent

Choose the agent you use. You only need to complete one tab.

Claude Code
Claude.ai
Claude Cowork
OpenAI Codex

Install the Email Love workflow

Run these commands once:

claude plugin marketplace add email-love/claude-skills
claude plugin install email-love@email-love

This installs the email builder and the design-system migration workflows.

Connect the remote Figma MCP

Figma recommends its official Claude Code plugin:

claude plugin install figma@claude-plugins-official

Or connect the server manually for your user account:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Authenticate and restart Claude

Start a new Claude Code session. Run /mcp, select Figma, and complete the sign-in flow. Confirm that the connection includes use_figma before asking it to build.

Roll out to your whole team

To offer the plugin automatically to everyone who works in one of your repositories, add this to the repository’s .claude/settings.json and commit it:

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

Each teammate is prompted to install the plugin the first time they trust the folder, with no commands to run. Anyone who prefers to opt out sets "email-love@email-love": false in their personal .claude/settings.local.json.

Install the Email Love skill

Enable Code execution and file creation under Settings → Capabilities.Download emaillove-figma-builder.skill from the latest Email Love release. Then open Customize → Skills, click + → Create skill → Upload a skill, and upload the file. Make sure the skill is switched on.

Connect the remote Figma MCP

Open Customize → Connectors, click + → Add custom connector, and add:

https://mcp.figma.com/mcp

Complete the Figma sign-in flow. On Team and Enterprise plans, an organization owner must add the connector before members can connect it.

Start a new chat

In a new conversation, click + → Connectors and enable Figma. Confirm that the connection exposes use_figma, then share your Figma file link and brief.

If use_figma is missing, Claude can plan the email or prepare an AI Import handoff, but it cannot write to your Figma Design file.

Install the Email Love skill

In Claude, enable Code execution and file creation under Settings → Capabilities.Download emaillove-figma-builder.skill from the latest Email Love release. Open Customize → Skills, click + → Create skill → Upload a skill, and upload it. Skills enabled in Claude are also available in Cowork.

Connect the remote Figma MCP

Open Customize → Connectors, click + → Add custom connector, and add:

https://mcp.figma.com/mcp

Complete the Figma sign-in flow. Remote connectors added to your Claude account are available in Cowork too.

Start a Cowork task

Open the Cowork tab in Claude Desktop. Start a new task, enable Figma from + → Connectors, and confirm that it exposes use_figma. Then share your Figma file link and brief.

Cowork uses remote connectors through Anthropic’s cloud. A local Figma desktop MCP connection is not available inside Cowork.

Install the Email Love plugin

Open Email Love in the Codex Plugins Directory and install it.

Connect Figma

In the Codex app, open Plugins, click + next to Figma, then choose Install Figma and complete the sign-in flow.For the Codex CLI, connect it manually instead:

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

Start a new task

Start a new Codex task after both plugins are installed. Confirm that Figma provides use_figma, then share your Figma file link and brief.

Developer install from GitHub

To test an exact repository release instead of the reviewed public plugin:

codex plugin marketplace add email-love/codex-agents --ref v4.5.0
codex plugin add email-love@email-love

Replace v4.5.0 with main only when testing unreleased work.

First, prepare your design system

Before you build a campaign email, your Figma file needs a working Email Love design system. Choose the route that matches your starting point:

Use your synced design system

If your Email Love components are already synced, the agent can inventory them and start building campaigns.

Migrate a legacy library

Have old Figma templates, ESP emails, or an agency library? Audit and rebuild them as a new Email Love design system before campaign work begins.

Build a new design system

No library yet? Give the agent your best existing email or design. It builds the foundations and reusable modules first.

Building or migrating a design system sends rendered images of your source designs, plus any metadata the agent pins, to the Email Love design-converter service. Remove personal or confidential content first and review the data-handling guidance before using sensitive material.

Build your first email

Once your design system is ready and synced, copy this prompt and replace the brackets:

Using the synced Email Love design system in [Figma file link], build a
promo email.

Audience: [who will receive it]
Goal: [what you want them to do]
Offer or message: [the key facts]
CTA: [one button label and destination]

Match the voice from existing campaigns in the file. Leave missing imagery
as gray placeholders for our design team.

Then the workflow is simple:

The agent checks your file

It inventories the synced Email Love components and studies existing campaigns before it changes anything.

It chooses components

It selects your header, hero, content, CTA, and footer components based on the brief. It never detaches or redraws their internal structure.

It builds on your canvas

Approve the Figma writes as they appear. A normal email takes a few minutes, and the agent reports progress by section.

Your team reviews and exports

Edit copy, swap imagery, and comment in Figma. Then select the finished frame and export it through the Email Love Figma plugin, the same way you export an email built by hand.

What to expect

A build takes minutes, not seconds. Most of the time is spent waiting for Figma canvas operations.
One primary CTA works best. Give the agent one action for each email.
New imagery may stay gray. The agent preserves image blocks so your design team can art-direct them later.
Links are provisional. Verify CTA and image links in the Figma plugin before export.
The result stays editable. Your team can review, comment, and make normal Figma edits.
Building is free. Exports count against your Email Love plan. The Free plan includes five exports per month.

If the build does nothing

Check these in order:

Is use_figma available? If not, the connection is read-only. Connect the official remote Figma MCP, not the desktop server.
Do you have a Full Figma seat and edit access? Read access is not enough for canvas writes.
Did you approve the tool calls? Declining a use_figma request stops the build.
Did you start a new task after installation? Skills and plugin tools load when a new Claude or Codex session starts.
Is the Email Love Figma plugin current? Older releases may not recognize agent-created email frames.

If the agent still cannot write to Figma, ask it for an email plan or use the AI Import handoff instead.

Go further

Advanced Figma MCP guide

Learn how export-safe structure works, use another agent, create email roots, and prepare reusable modules.

Create and sync a design system

Upload your own Email Love components so agents can reuse them in every campaign.

Migrate an existing library

Audit and rebuild legacy email templates without modifying the source.

Add email inspiration

Let the agent search Email Love’s library for patterns, pacing, and subject-line direction.

Get help from an agent

Use read-only diagnosis prompts for structure, preview, setup, and export problems.

Need help?

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

​What you need

​Set up your agent

​First, prepare your design system

Use your synced design system

Migrate a legacy library

Build a new design system

​Build your first email

​What to expect

​If the build does nothing

​Go further

Advanced Figma MCP guide

Create and sync a design system

Migrate an existing library

Add email inspiration

Get help from an agent

​Need help?

What you need

Set up your agent

First, prepare your design system

Build your first email

What to expect

If the build does nothing

Go further

Need help?