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

# Advanced Figma MCP Guide

> How Email Love agents preserve export structure, create root frames, and prepare reusable modules in Figma

This guide covers the mechanics behind [building emails with the Figma MCP](/plugin/ai/agents-in-figma). You do not need it for a normal campaign build.

Use it when you need to:

* Understand why an agent-built email exports correctly
* Use an agent that does not have the Email Love workflow installed
* Create a new email root when the file has no donor frame
* Save an agent-built block as a reusable design-system module

## The tools in this workflow

Each tool has a different job:

1. The **Email Love workflow for Claude or Codex** teaches the agent how to build export-safe emails. Installing it does not connect an MCP server.
2. The **official Figma MCP** lets the agent read and write your Figma canvas. Normal email builds require its `use_figma` tool.

The optional [Email Inspiration MCP](/plugin/ai/email-inspiration-mcp) is separate. It searches real marketing emails for patterns and ideas, but it does not build or export anything.

## Why these emails export

An email can look correct in Figma and still export as a flat image or lose content. Email Love structure includes plugin data that is not visible on the canvas, so an agent must not invent its own email scaffolding.

The Email Love workflow uses one of two routes:

### Route A: instance published components

When the file has a synced design system, the agent places instances of its `mj-wrapper` components. It can change text, images, properties, links, and approved mobile settings. It does not detach the instance or rearrange its internal layers.

### Route B: generate and transcribe structure

When the file has no matching component, the agent sends the customer's design to the same conversion engine as [AI Import](/plugin/ai/ai-import). It receives structured MJML and transcribes that structure into Figma nodes.

If neither route can produce a section, the agent stops and asks. It does not draw an email-shaped frame and pretend it will export.

## Use another agent

Claude and Codex should use the official Email Love workflow. If another agent has the remote Figma MCP but no Email Love workflow, give it this starter prompt:

```text theme={null}
Build emails in my Figma file using the Figma MCP.

File: [paste your Figma file link]

The file contains an Email Love design system. Start each email by
duplicating an existing Email Love email frame. Fill it with instances
of my published components and rewrite their content.

Never detach an instance. Never hand-build mj-section or mj-column
structure. If no component fits, stop and ask me instead of drawing the
section freehand.

Campaign brief:
[What emails you need, the audience, the message, and one CTA per email]

Reuse our header and footer. Match the voice in our existing campaigns.
Leave missing imagery as gray placeholders. Leave existing CTA links
unchanged for us to verify in the Email Love plugin.
```

This prompt is a fallback, not a replacement for the full workflow. It cannot carry all of the structure checks, conversion rules, and repair steps in the installed skill.

## Create an email root from scratch

Duplicating an existing Email Love email is safer because the copy carries every plugin setting. When no donor exists, an agent can create the empty root and opt it in with this public marker:

```js theme={null}
frame.setSharedPluginData('emaillove', 'nodeType', 'mainFrame')
```

It must also seed every root theme and fallback setting. Empty values are not neutral and can produce incorrect dark-mode defaults.

```js theme={null}
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')
```

The root is only an empty container. Everything inside it must come from published components or generated structure.

## Save a block for reuse

An email and a reusable module have different top nodes:

* An **email template** is a whole email with a root frame carrying the template marker.
* A **module** is one reusable `mj-wrapper` component with no template marker on it or inside it.

Ask the agent to prepare a module with a direct prompt:

```text theme={null}
Componentize the header, hero, and footer from this email as separate
mj-wrapper modules with no template marker. Name them clearly and add
properties only for content our team will change between campaigns.
```

Then upload them:

<Steps>
  <Step title="Select a design system in the Figma plugin">
    Use the dropdown in the top left.
  </Step>

  <Step title="Open the destination section">
    Choose Header, Heroes, Single Column, Footer, or the closest existing category.
  </Step>

  <Step title="Select the wrapper components on the canvas">
    You can select several wrappers and upload them as one batch.
  </Step>

  <Step title="Click Upload and confirm">
    The plugin reports the success and failure count when the batch finishes.
  </Step>
</Steps>

Do not put email-level theme colors on a reusable module unless the block deliberately needs its own dark-mode treatment. See [Creating and Managing Design Systems](/plugin/components/design-systems) for the full upload and sync workflow.

## Advanced limits

* **Agents assemble better than they draw.** Published components are the strongest source of structure and brand consistency.
* **Treat generated imagery as a design-team task.** Preserve image blocks and use clear placeholders when final assets are missing.
* **Verify links before export.** Existing private link data in the Figma plugin can take precedence over values an agent writes.
* **Use a capable model for migrations.** A routine campaign is smaller than auditing and rebuilding a full design system.
* **Expect canvas round trips.** Node count predicts build time better than how visually complex an email looks.
* **Keep the Figma plugin current.** Older releases may not recognize agent-created email roots.

## Related Articles

* [Build Emails in Figma with Claude or Codex](/plugin/ai/agents-in-figma)
* [Import Existing Designs with AI Import](/plugin/ai/ai-import)
* [Creating and Managing Design Systems](/plugin/components/design-systems)
* [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system)
* [Element Reference: Section, Column & Wrapper](/plugin/getting-started/section-column-wrapper)

## Need help?

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