Advanced Figma MCP Guide

This guide covers the mechanics behind building emails with the Figma MCP. 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:

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

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:

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.

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:

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:

Select a design system in the Figma plugin

Use the dropdown in the top left.

Open the destination section

Choose Header, Heroes, Single Column, Footer, or the closest existing category.

Select the wrapper components on the canvas

You can select several wrappers and upload them as one batch.

Click Upload and confirm

The plugin reports the success and failure count when the batch finishes.

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

Need help?

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

​The tools in this workflow

​Why these emails export

​Route A: instance published components

​Route B: generate and transcribe structure

​Use another agent

​Create an email root from scratch

​Save a block for reuse

​Advanced limits

​Related Articles

​Need help?