Help Center
How can we help? πŸ‘‹

Understanding Email Love Frames, Layers, and Components

The architecture behind Email Love

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

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

  1. 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.
  1. 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.
  1. 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 with the heading style might be converted into an mj-text element with the h2 attribute in MJML, specifying it as a heading level 2.
      • 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.
  1. HTML Generation (Optional): 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.

Additional Considerations

  • Layer Naming and Organization: While Email Love can interpret your design, clear and descriptive layer names and a logical layer hierarchy within Figma can significantly improve conversion accuracy and efficiency.
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
Wraps content to control its styling and behavior
Provides additional styling options for specific sections of your email
Β 
Did this answer your question?
😞
😐
🀩