> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Emails in Figma with Claude or Codex

> Connect an AI agent to Figma, give it an email brief, and build editable, export-ready Email Love emails from your components

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](/plugin/getting-started/migrate-design-system) from your existing emails and designs.

## What you need

There are three pieces:

1. The **[Email Love Figma plugin](/plugin/getting-started/install)**, installed in Figma and ready to open in the file where you want to build
2. The **Email Love workflow**, installed in Claude or Codex so the agent understands export-safe email structure
3. The **[official remote Figma MCP](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)**, which gives the agent access to your canvas

To write to the canvas, you also need a **[Full Figma seat](https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/)** 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.

<Tip>
  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.
</Tip>

## Set up your agent

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

<Tabs>
  <Tab title="Claude Code">
    <Steps>
      <Step title="Install the Email Love workflow">
        Run these commands once:

        ```bash theme={null}
        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.
      </Step>

      <Step title="Connect the remote Figma MCP">
        [Figma recommends](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) its official Claude Code plugin:

        ```bash theme={null}
        claude plugin install figma@claude-plugins-official
        ```

        Or connect the server manually for your user account:

        ```bash theme={null}
        claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
        ```
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    <Accordion title="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:

      ```json theme={null}
      {
        "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`.
    </Accordion>
  </Tab>

  <Tab title="Claude.ai">
    <Steps>
      <Step title="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](https://github.com/email-love/claude-skills/releases). Then open **Customize → Skills**, click **+ → Create skill → Upload a skill**, and upload the file. Make sure the skill is switched on.
      </Step>

      <Step title="Connect the remote Figma MCP">
        Open **Customize → Connectors**, click **+ → Add custom connector**, and add:

        ```text theme={null}
        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.
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    <Note>
      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.
    </Note>
  </Tab>

  <Tab title="Claude Cowork">
    <Steps>
      <Step title="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](https://github.com/email-love/claude-skills/releases). Open **Customize → Skills**, click **+ → Create skill → Upload a skill**, and upload it. [Skills enabled in Claude are also available in Cowork](https://support.claude.com/en/articles/12512180-use-skills-in-claude).
      </Step>

      <Step title="Connect the remote Figma MCP">
        Open **Customize → Connectors**, click **+ → Add custom connector**, and add:

        ```text theme={null}
        https://mcp.figma.com/mcp
        ```

        Complete the Figma sign-in flow. [Remote connectors added to your Claude account are available in Cowork too](https://support.claude.com/en/articles/11725091-when-to-use-desktop-and-web-connectors).
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    <Note>
      [Cowork uses remote connectors through Anthropic's cloud](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp). A local Figma desktop MCP connection is not available inside Cowork.
    </Note>
  </Tab>

  <Tab title="OpenAI Codex">
    <Steps>
      <Step title="Install the Email Love plugin">
        [Open Email Love in the Codex Plugins Directory](https://chatgpt.com/plugins/plugins_6a739f43c3b48191b1281a9b2d48b409) and install it.
      </Step>

      <Step title="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:

        ```bash theme={null}
        codex mcp add figma --url https://mcp.figma.com/mcp
        codex mcp login figma
        ```
      </Step>

      <Step title="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.
      </Step>
    </Steps>

    <Accordion title="Developer install from GitHub">
      To test an exact repository release instead of the reviewed public plugin:

      ```bash theme={null}
      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.
    </Accordion>
  </Tab>
</Tabs>

## 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:

<CardGroup cols={2}>
  <Card title="Use your synced design system" icon="objects-column">
    If your Email Love components are already synced, the agent can inventory them and start building campaigns.
  </Card>

  <Card title="Migrate a legacy library" icon="arrow-right-arrow-left" href="/plugin/getting-started/migrate-design-system">
    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.
  </Card>

  <Card title="Build a new design system" icon="palette" href="/plugin/getting-started/migrate-design-system">
    No library yet? Give the agent your best existing email or design. It builds the foundations and reusable modules first.
  </Card>
</CardGroup>

<Warning>
  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](https://github.com/email-love/codex-agents/blob/main/SECURITY.md) before using sensitive material.
</Warning>

## Build your first email

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

```text theme={null}
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:

<Steps>
  <Step title="The agent checks your file">
    It inventories the synced Email Love components and studies existing campaigns before it changes anything.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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:

1. **Is `use_figma` available?** If not, the connection is read-only. Connect the official remote Figma MCP, not the desktop server.
2. **Do you have a Full Figma seat and edit access?** Read access is not enough for canvas writes.
3. **Did you approve the tool calls?** Declining a `use_figma` request stops the build.
4. **Did you start a new task after installation?** Skills and plugin tools load when a new Claude or Codex session starts.
5. **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](/plugin/ai/ai-import) instead.

## Go further

<CardGroup cols={2}>
  <Card title="Advanced Figma MCP guide" icon="code" href="/plugin/ai/agents-in-figma-advanced">
    Learn how export-safe structure works, use another agent, create email roots, and prepare reusable modules.
  </Card>

  <Card title="Create and sync a design system" icon="palette" href="/plugin/components/design-systems">
    Upload your own Email Love components so agents can reuse them in every campaign.
  </Card>

  <Card title="Migrate an existing library" icon="arrow-right-arrow-left" href="/plugin/getting-started/migrate-design-system">
    Audit and rebuild legacy email templates without modifying the source.
  </Card>

  <Card title="Add email inspiration" icon="magnifying-glass" href="/plugin/ai/email-inspiration-mcp">
    Let the agent search Email Love's library for patterns, pacing, and subject-line direction.
  </Card>

  <Card title="Get help from an agent" icon="circle-question" href="/plugin/ai/agent-help">
    Use read-only diagnosis prompts for structure, preview, setup, and export problems.
  </Card>
</CardGroup>

## Need help?

Email [hello@emaillove.com](mailto:hello@emaillove.com) and we'll respond within a business day.