> ## 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. # Send with confidence using Copilot > Catch and fix email structure issues before export 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. ### What Copilot catches * **Structure problems**: Components nested in the wrong containers, missing required wrappers, invalid parent-child relationships * **Layout mismatches**: Figma layouts that don't translate correctly to email structure * **Content issues**: Invalid tag names, broken template variables, leaf components with children they shouldn't have * **Image problems**: Missing alt text, images outside proper containers, oversized dimensions * **Component gaps**: Empty carousels, accordions without content, heroes missing required attributes *** ## Getting Started ### Accessing Copilot Open the Email Love Figma plugin and navigate to the Copilot tab. You'll see it on the left hand panel. Copilot tab shown in the left hand panel of the Email Love plugin ### Before you scan 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. ### Running your first scan 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. Copilot looks at your actual design (the rendered layout, structure, and colors of the selected frame), not just the layer names, so it catches issues that only show up in the real output. ### Jumping to an issue Many issues include a **clickable link to the element** they refer to. Click it and Copilot selects the offending node (or nodes) directly on your Figma canvas, so you can see exactly what it's flagging without hunting through your layers. ### Fixes that touch multiple elements Some fixes apply across **several nodes at once**. When a single issue affects multiple elements, Copilot's fix selects and resolves all of them together rather than making you repeat the fix one element at a time. ### Canceling a scan Diagnostics run in the background and can be **canceled** at any time, useful on large or complex frames. Cancel, adjust your selection, and run again whenever you like. *** ## Understanding Issues ### How issues appear Each issue shows up as a card with several pieces of information: * **Issue type**: A short name describing the problem (like "missing-required-ancestors" or "image-missing-alt-text") * **Severity**: Error, warning, or informational * **Path**: Where in your design the issue occurs * **Details**: What Copilot expected versus what it found * **Fix status**: Whether Copilot can fix this automatically ### Severity levels **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. ### Reading issue details Most issues include "expected" and "found" information. For example, a vertical layout mismatch might show: * **Expected**: 1 column (vertical stacking) * **Found**: 3 columns (horizontal layout) This tells you exactly what Copilot thinks should change. *** ## Issue Types & Fixes ### Structure Issues ### Missing required ancestors **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. *** ### Invalid parent-child relationships **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. *** ### Invalid strict parent **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`. *** ### Nested structural components **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. *** ### Container mismatch **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`. *** ### Vertical layout mismatch **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. *** ### Content Issues ### Component has children **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. *** ### Invalid tag name **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 you might see in your export** | **What Copilot converts it to** | | ------------------------------------------------ | ------------------------------------------------ | | A layer named "Text" or similar Figma text layer | `mj-text` (the MJML text component) | | A layer that's clearly an image frame | `mj-image` (the MJML image component) | | Generic container frames | `mj-section` or `mj-column` depending on context | ### Broken template variable **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. *** ### Image Issues ### Image outside proper container **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. *** ### Image missing alt text **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. *** ### Oversized image dimensions **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. *** ### Component-Specific Issues ### Hero missing background height **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. *** ### Group with insufficient columns **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. *** ### Nested wrappers **What it means**: Wrappers are nested inside other wrappers, creating unnecessary complexity. **How Copilot fixes it**: Unwraps the inner wrapper while preserving child order. *** ## Working with Fixes ### Auto-fix vs manual review Some issues have clear, safe fixes that Copilot applies automatically when you click **Fix**. Others require your judgment. **Copilot auto-fixes**: * Wrapping components in required containers * Promoting misplaced structural components * Merging columns for vertical layouts * Replacing invalid tag names * Unwrapping unnecessary nesting **Copilot flags but won't auto-fix**: * Template variable syntax * Missing hero heights * Empty interactive components * Image dimension warnings * Alt text (unless intent is obvious) ### Reviewing suggested fixes 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. ### Issues requiring manual intervention When you see "No auto-fix available," Copilot needs your input. These typically involve: * Business logic (template variables) * Design decisions (image dimensions, hero heights) * Content creation (alt text, accordion content) * Ambiguous intent (when Copilot can't tell what you meant) *** ## Best Practices ### Run Copilot before every export 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. ### Design patterns that avoid issues **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. ### Setting up files for clean exports 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. *** ## Troubleshooting ### Fixes don't resolve the issue 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. ### Unexpected behavior If Copilot suggests a fix that seems wrong, don't apply it. Instead: 1. Note the issue type and path 2. Check your Figma structure manually 3. Contact support with details ### Getting help Reach out to our team via: * **Slack**: If you're on an Enterprise plan, use your dedicated channel * **Email**: [support@emaillove.com](mailto:support@emaillove.com) * **In-app**: Use the feedback button in the plugin **When reporting issues, include:** * The issue type Copilot flagged * A screenshot of the affected Figma layers * What you expected versus what happened *** ## Quick Reference | **Issue** | **Auto-fix?** | **Action** | | -------------------------------- | ------------- | ----------------------------- | | **Missing required ancestors** | Yes | Wraps in required containers | | **Invalid parent-child** | Yes | Wraps in correct container | | **Invalid strict parent** | Yes | Promotes to valid level | | **Nested structural components** | Yes | Promotes to correct hierarchy | | **Container mismatch** | Yes | Wraps in columns | | **Vertical layout mismatch** | Yes | Merges to single column | | **Self-contained component** | Yes | Unwraps children | | **Invalid tag name** | Yes | Replaces with valid MJML | | **Broken template variable** | Yes | Manual syntax fix needed | | **Image outside container** | Yes | Wraps in column | | **Missing alt text** | Sometimes | Add descriptive text | | **Oversized image** | No | Warning only | | **Hero missing height** | No | Manual attribute needed | | **Empty accordion/carousel** | No | Add content or remove | | **Insufficient group columns** | No | Informational only | | **Nested wrappers** | Yes | Unwraps inner wrapper | Need help with something not covered here? Email us at [support@emaillove.com](mailto:support@emaillove.com) or reach out in [Discord](https://discord.com/invite/ANv9PjVdzP).