Understanding Email Love Frames, Layers, and Components – Email Love

Email Love acts as a bridge between your Figma design and email code. When you build an email using Email Love components, the plugin analyzes the frames and layers within your Figma artboard and translates them into corresponding MJML code (or email-optimized HTML code, depending on your preference).

Important: The plugin only works with designs built using Email Love components. You cannot convert arbitrary Figma frames or existing email designs into MJML—the layer structure must use Email Love's section, column, and content components for the export to work. See the Using Email Love with an Existing Email Design article for details on rebuilding existing emails.

The Role of Frames and Layers

Frames: In Figma, frames represent individual design elements or sections within your email layout. These frames become the building blocks for your email in MJML.

Layers: Each element within a frame is built using layers. Layers can be text, images, shapes, or even nested frames. Email Love analyzes the properties and positioning of these layers to understand how to structure the MJML code.

Conversion Process Breakdown

Frame Analysis: Email Love identifies each frame in your Figma design and determines its role within the email structure. For instance, a frame might be converted into an mj-section element in MJML, representing a distinct visual block within your email.

Layer Interpretation: Within each frame, Email Love examines the individual layers. It extracts information like text content, image source, button styles, and the relative positioning of these elements.

MJML Code Generation: Based on the analysis of frames and layers, Email Love generates the corresponding MJML code. This code defines the structure and styling of your email using MJML tags and attributes. Here's an example:

A Figma text layer is converted into an mj-text element in MJML. The plugin applies your font size, weight, color, and alignment as inline CSS styles on a <div> element in the final HTML—not as semantic heading tags like <h1> or <h2>.

A Figma image layer linked to an image file is converted into an mj-image element with the src attribute pointing to the image source.

HTML Generation: If you choose to export as HTML, Email Love translates the generated MJML code into clean and well-formatted HTML. This HTML code incorporates the necessary tags and attributes to render your email design across different email clients.

Layer Names in the Figma Panel

Not everyone on your team knows MJML — and they shouldn't have to. The plugin now uses plain English layer names so that designers, marketers, and anyone working in Figma can understand the email structure at a glance. When you add new components, your layers panel will show names like Wrapper, Row, Column, Text Block, and Button instead of technical MJML tags like mj-wrapper or mj-section.

Structural layers also include a helpful hint in parentheses explaining what they do:

Wrapper (Groups rows and sets the background for this section)

Row (Contains columns that sit side by side)

Column (Your images, text, buttons, and other content go in here)

Group (Groups columns together for responsive stacking)

💡

You can rename any layer in the Figma layers panel without breaking your email export. The plugin stores MJML metadata separately from the visible layer name, so the export engine always knows the correct structure regardless of what you name your layers. Rename wrappers to "Hero Section" or "Footer" — organize however makes sense for your team.

Existing Templates with MJML Layer Names

If you have existing templates that use the older MJML-style layer names (like mj-wrapper, mj-section, mj-column), they will continue to work and export correctly — no changes needed on your end. The plugin fully supports both naming styles. Old templates keep their original layer names and are not automatically renamed. Only new components you add going forward will use the simplified names.

MJML Components supported by the Plugin

Layer Name	Description	Use Cases
Button	Creates a clickable button	Call to action (CTA) buttons, social media buttons, etc.
Column	Defines a column within the email layout	Structures your email content into multiple columns for responsive design
Group	Groups multiple columns together for responsive stacking	Organizes related content blocks or layouts within your email
Image Block	Inserts an image into your email	Hero images, product images, logos, etc.
Row	A horizontal row that contains columns	Represents a distinct visual block within your email content
Text Block	Defines text content within your email	Paragraphs, headings, captions, etc.
Wrapper	Top-level container for rows. Can be renamed for organization	Group related rows, apply shared backgrounds, and organize your email structure
Hero Block	Creates a full-width background image section with overlaid content	Hero banners, promotional headers, background image sections with text overlays
Divider	Inserts a horizontal divider line	Visual separation between content sections, spacing elements
Spacer	Adds vertical spacing between elements	Controlling whitespace between sections and components
Social	Renders social media icon links	Social media links in footers, follow-us sections