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-sectionelement 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-textelement 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-imageelement with thesrcattribute 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.
MJML Components supported by the Plugin
It's important not to change the name of the layers and frames within your components as this will break your template when it comes time to export. The one exception is wrappers—you can rename wrappers to whatever you like for easier identification and organization (e.g., "Hero Wrapper", "Footer Wrapper"). Since wrappers are the top-level container for your sections, renaming them helps keep complex emails organized without affecting the export.
MJML Component | Description | Use Cases |
mj-button | Creates a clickable button | Call to action (CTA) buttons, social media buttons, etc. |
mj-column | Defines a column within the email layout | Structures your email content into multiple columns for responsive design |
mj-group | Groups multiple elements together | Organizes related content blocks or layouts within your email |
mj-image | Inserts an image into your email | Hero images, product images, logos, etc. |
mj-section | Defines a section within the email layout | Represents a distinct visual block within your email content |
mj-text | Defines text content within your email | Paragraphs, headings, captions, etc. |
mj-wrapper | Top-level container for sections. Can be renamed for organization | Group related sections, apply shared backgrounds, and organize your email structure |
Powered by