Skip to main content
Sections, columns, and wrappers are the structural backbone of your email. They don’t contain visible content themselves. They organize everything else. Understanding these three components is the key to building reliable, responsive email layouts.

​
Wrapper

In the layers panel, you’ll see this as Wrapper (Groups rows and sets the background for this section). A wrapper is the outermost structural container. Think of it as a “super-section” that can hold multiple rows and apply a shared background color or image across all of them.
You can rename any layer in the Figma layers panel without breaking the export. The plugin stores MJML metadata separately. Use descriptive names like “Hero Wrapper”, “Product Grid Wrapper”, or “Footer Wrapper” to keep complex emails organized.

​
When to Use a Wrapper

  • When you want a background color or image to span across multiple sections
  • To group related sections visually (like a hero area with a headline section + image section)
  • For full-width background colors that extend beyond the 640px content area

​
Properties

  • Background color: Set via Figma fill. Extends edge-to-edge.
  • Background image: Set via Figma fill. Requires VML for Outlook (handled by the plugin).
  • Padding: Controls internal spacing around all contained sections.

​
Row (Section)

In the layers panel, you’ll see this as Row (Contains columns that sit side by side). A row represents a horizontal section in your email. Every piece of content lives inside a row (which may or may not be inside a wrapper).

​
Key Concepts

  • Full-width vs. contained: Sections default to your email’s max width (640px). Full-width sections stretch edge-to-edge.
  • Background: Each section can have its own background color or image.
  • Direction: Content flows left-to-right by default.

​
Properties

​
Column

In the layers panel, you’ll see this as Column (Your images, text, buttons, and other content go in here). Columns are vertical divisions within a row. They hold your actual content: text, images, buttons, spacers, and dividers all go inside columns.

​
Column Rules

  • Maximum 4 columns per section for reliable rendering
  • Columns stack vertically on mobile (left to right becomes top to bottom)
  • Column widths can be set as pixels or percentages
  • Equal-width columns are most reliable; unequal widths work but test carefully
  • A section with a single column creates a standard full-width content block

​
Properties

  • Width: Set via Figma frame width. Use percentages in the plugin for responsive behavior.
  • Background color: Individual column backgrounds (set via Figma fill). Side-by-side columns match the height of the tallest one, so each color fills the row. See Column Backgrounds.
  • Padding: Internal padding around column content
  • Vertical alignment: Top, middle, or bottom alignment of column content
  • Border: Add borders around individual columns

​
The Complete Hierarchy

Here’s how everything nests together: Email Frame → Wrapper (optional) → Row → Column → Content
Never place content directly inside a section. Content must always be inside a column. The plugin will flag this error during export, but getting the hierarchy right from the start saves time.

​
Common Layout Patterns

​
Single Column

One section with one column. The simplest layout. Great for text-heavy emails, announcements, and newsletters.

​
Two Column

One section with two columns. Perfect for side-by-side content like image + text, or feature comparison.

​
Three Column

One section with three columns. Use for product grids, feature highlights, or icon-based layouts. Stacks neatly on mobile.

​
Mixed

Multiple sections with different column counts. A hero (1 column) followed by products (3 columns) followed by a CTA (1 column). This is the most common pattern in marketing emails.