Skip to main content
Email Love reads Figma Auto Layout to turn visual alignment into email HTML. Align the correct layer for the result you want.

​
Choose the layer first

Changing a parent can move every child. Changing a leaf frame affects only that image, button, or text block.

​
Align columns in a Section

  1. Select the Section that contains the columns.
  2. Use Figma’s Auto Layout alignment controls.
  3. Choose top, center, or bottom alignment for columns with different heights.
  4. Open Preview to confirm the email version matches the intended vertical relationship.

​
Align content inside a Column

  1. Select the Column.
  2. Use Auto Layout to align its children left, center, or right.
  3. Check individual text, image, and button blocks if one element needs a different treatment.
Keep related elements aligned consistently. A centered headline with a left-aligned paragraph and right-aligned CTA usually looks accidental unless the design has a clear reason.

​
Align one image or button

Select the image or button frame, then set its horizontal Auto Layout alignment. Use the outer -Frame layer because it controls where the content sits inside the Column. For full-width buttons, use the button width control instead of stretching a centered auto-width button by hand.

​
Align text

Select the text layer and use Figma’s text alignment controls for left, center, or right alignment. Text alignment is separate from the position of the text block inside its Column.

​
Check mobile alignment

Desktop and mobile can use different alignment. Select the relevant Wrapper, text, image, or button block and use Mobile Styles for the mobile override.

​
Common problems

​
The canvas is centered but Preview is left aligned

You may have aligned the inner image, button, or text instead of its outer Email Love frame. Select the mj-image-Frame, mj-button-Frame, or Column and set the alignment there.

​
One column sits lower than the others

Select the Section and check its column alignment. Also look for padding or a Spacer at the top of the lower Column.

​
Text is aligned correctly but the block is in the wrong place

Text alignment controls the lines inside the text box. Column or text-frame alignment controls where the box sits. Check both levels.

​
Mobile ignores the desktop alignment

A mobile override may already be set. Open Mobile Styles on the selected layer and clear or update the alignment value.