Send with confidence using Copilot

The Copilot feature scans your Figma designs and identifies structural issues that would cause problems when exporting to email. It catches broken MJML hierarchies, invalid nesting, accessibility gaps, and layout mismatches before they become headaches in your inbox.

Think of Copilot as your pre-flight checklist. It spots the issues that would otherwise surface as rendering bugs across email clients, saving you from the dreaded "it looked fine in Figma" moment.

Open the Email Love Figma Plugin and navigate to the Copilot tab. You'll see it on the left hand panel.

Select the template frame that you want to check. Copilot scans all of the components inside of the frame. You cannot scan individual components outside of a frame.

Copilot automatically analyzes your selection and returns a list of issues organized by severity. Each issue includes the problem description, where it occurs in your design, and whether an automatic fix is available.

Each issue shows up as a card with several pieces of information:

Errors will cause export failures or major rendering problems. Fix these before exporting.

Warnings may cause inconsistent rendering across email clients. You should address these, but your email will still export.

Informational issues are suggestions for improvement. Your email will work fine, but addressing these makes it better.

Most issues include "expected" and "found" information. For example, a vertical layout mismatch might show:

This tells you exactly what Copilot thinks should change.

What it means: A component isn't nested inside the containers MJML requires. For example, text content needs to live inside a column, which needs to live inside a section.

How Copilot fixes it: Wraps the component in the required containers, preserving your content and maintaining the node order.

Example: mj-text floating directly in a section gets wrapped in mj-column. If both column and section are missing, Copilot creates both.

Special case: Content inside mj-hero (text, buttons, images) doesn't need column wrappers. Copilot knows this and won't add unnecessary containers.

What it means: A component is inside a parent that doesn't allow it. MJML has specific rules about what can go where.

How Copilot fixes it: Wraps the component in the correct container while keeping everything in the same location.

Example: mj-text directly inside mj-section gets wrapped in mj-column. The text stays in the same section, just properly contained.

What it means: Some components have very limited options for valid parents. This issue appears when a component is under a parent that's explicitly forbidden.

How Copilot fixes it: Moves the component up to the nearest allowed parent level, preserving sibling order.

Example: mj-column inside mj-body (skipping the required section) gets moved into the nearest mj-section.

What it means: Structural components like sections, wrappers, and groups are incorrectly nested inside content containers or each other.

How Copilot fixes it: Promotes the structural component to the correct hierarchy level, keeping all its children intact.

Example: An mj-section accidentally nested inside mj-column gets promoted to sit alongside that column's parent section.

What it means: Your Figma layout is set to horizontal (side-by-side), but the MJML structure doesn't use columns to achieve that layout.

How Copilot fixes it: Wraps non-column children in mj-column containers. For true side-by-side layouts, it uses mj-group inside mj-section.

What it means: Your Figma frame uses vertical (stacked) layout, but the MJML output has multiple columns creating an unintended horizontal arrangement.

How Copilot fixes it: Merges all columns into a single full-width column, stacking the content vertically as your Figma design intended.

Example: A section with vertical layout in Figma but 3 columns in MJML becomes 1 column with all content stacked in order.

What it means: Components like images and buttons shouldn't contain other MJML elements. They're "leaf" nodes—the end of the branch.

How Copilot fixes it: Unwraps the children and moves them to a valid container, or replaces the leaf node with an appropriate container.

Example: mj-image somehow containing mj-text gets unwrapped, with the text moved to the parent column.

What it means: Your design contains tag names that aren't part of the MJML specification—usually Figma-specific names that didn't convert properly.

How Copilot fixes it: Replaces invalid tags with the appropriate MJML component based on context.

Common replacements:

What it means: Template syntax like {{ first_name }} isn't closed properly, which will break when your ESP tries to render it.

What Copilot does: Surfaces the issue clearly but doesn't auto-fix. Template variables involve your business logic, and Copilot won't guess at what you intended.

What you should do: Check your template syntax manually and close any unclosed brackets.

What it means: An image isn't inside mj-column or mj-hero, which are the only valid containers for responsive images in MJML.

How Copilot fixes it: Wraps the image in mj-column and ensures it's nested inside a valid section or hero.

What it means: The image doesn't have meaningful alt text, which hurts accessibility and causes problems when images don't load.

What Copilot does: Adds descriptive alt text only when the image intent is obvious from context. Otherwise, it flags the issue for you to address.

Why this matters: Many email clients block images by default. Alt text ensures your message still communicates even without visuals.

What it means: Image dimensions exceed recommended email-safe limits, which can cause slow loading or display problems.

What Copilot does: Warns you but doesn't resize automatically. Image optimization involves quality tradeoffs that should be intentional choices.

Recommendation: Keep images under 600px wide for most email layouts. Compress images before uploading.

What it means: mj-hero components need a background-height attribute to render correctly across email clients.

What Copilot does: Flags the issue but doesn't auto-insert a height. Guessing dimensions often creates worse problems than leaving them blank.

What you should do: Add an appropriate background-height value based on your design. Common values range from 300px to 600px depending on content.

What it means: mj-accordion exists but has no accordion elements inside it.

What Copilot does: Flags the issue. It won't create placeholder content.

What you should do: Either add accordion elements or remove the empty accordion component.

What it means: mj-carousel exists but has no carousel images inside it.

What Copilot does: Flags the issue without generating fake images.

What you should do: Add carousel images or remove the empty carousel.

What it means: mj-group contains fewer than two columns. Groups exist specifically to hold multiple columns side-by-side.

What Copilot does: Treats this as informational. It won't add artificial columns.

When to act: If you need side-by-side columns, add another column. If you only need one column, you probably don't need the group wrapper.

What it means: Wrappers are nested inside other wrappers, creating unnecessary complexity.

How Copilot fixes it: Unwraps the inner wrapper while preserving child order.

Some issues have clear, safe fixes that Copilot applies automatically when you click Fix. Others require your judgment.

Copilot auto-fixes:

Copilot flags but won't auto-fix:

Before clicking Fix All, review what Copilot plans to change. Each fix card shows what will happen. If something looks off, fix issues individually instead.

When you see "No auto-fix available," Copilot needs your input. These typically involve:

Make it part of your workflow. Scan → Fix → Export. It takes seconds and catches issues that would otherwise surface in QA or, worse, in your subscribers' inboxes.

Use Auto Layout intentionally: Horizontal auto layout in Figma should map to multi-column MJML layouts. Vertical auto layout should map to single-column stacked content.

Keep your hierarchy clean: Sections contain columns. Columns contain content. Don't skip levels.

Name your layers: Descriptive layer names help Copilot (and you) understand intent when converting to MJML.

Set alt text in Figma: Add alt text to images before export rather than fixing it later.

Start with Email Love's component library. These components are pre-structured for valid MJML output.

When building custom layouts, think in email terms: sections as rows, columns as... columns, and content as what goes inside columns.

Sometimes a fix reveals another underlying issue. Run Copilot again after applying fixes—you may have a chain of problems that need addressing in sequence.

If the same issue keeps appearing after fixing, your Figma structure might have deeper problems. Try rebuilding that section using Email Love components as a base.

If Copilot suggests a fix that seems wrong, don't apply it. Instead:

Reach out to our team via:

When reporting issues, include:

Need help with something not covered here? Email us at support@emaillove.com or reach out in Discord.