Designing in Figma for Email

​

Overview

Email is not a poster. It is a stack of rows that has to render the same way in Gmail, Outlook, Apple Mail, and on every phone. Migma reads the structure of your Figma frame, plus a picture of it, and rebuilds it as real email. The closer your file is to how email actually works, the better the result.

---

​

Build with Auto Layout

Email flows from top to bottom and cannot place one element on top of another. Auto Layout is how you tell Migma the way your sections stack and sit beside each other. Do

• Wrap the whole email in a vertical Auto Layout frame, with each section as a child
• Use horizontal Auto Layout for columns and icon rows
• Keep one main column, around 600px wide

Don’t

• Use free-floating layers or hand-placed positions
• Overlap elements, because email cannot stack one layer on another, so overlaps flatten or disappear

---

​

Keep text and buttons out of images

Headlines, body copy, and buttons must be real text and real buttons, never part of a picture. This is the most common mistake, and it breaks email in ways that look perfectly fine in Figma. Do

• Keep every headline and paragraph as a live text layer
• Build buttons as a real shape with a separate text label
• For a photo behind a headline, put the text above or below it, or over a solid color block

Don’t

• Bake text into an image, because it cannot be edited, translated, or read by screen readers, and it disappears when a client blocks images
• Bake a button into an image, because it is not a real, clickable link

---

​

Use real images, sized for email

Migma exports each image straight from your frame, so what you place is what you get. Do

• Crop and resize each image to its final size in your image editor before placing it
• Aim for hero images around 1200px wide and content images around 600px
• Keep files light, because oversized images can be dropped during import and leave a gap

Don’t

• Drop a giant full-resolution photo onto the canvas and crop it with Figma’s crop tool, because the heavy original is what gets processed and can fail quietly

---

​

Flatten icons and illustrations

Email cannot render vector artwork reliably, so Migma converts your vectors into images. A flattened layer converts far cleaner than a stack of vector paths. Do

• Export logos and custom illustrations as a flattened PNG, then place that image
• For social icons, name the layer after the platform, like Instagram, Facebook, or X, so Migma drops in a crisp icon

Don’t

• Leave logos, icons, and illustrations as live vector shapes or large groups of paths, because they convert into fuzzy or broken images

---

​

Name your layers

Layer names are not only for you. Migma reads them to understand what each block is, and image names become the alt text in the final email. Do

• Name layers for what they are, like logo, hero, headline, nav, footer, or product-photo
• Give every image a real, human name, because it becomes the alt text

Don’t

• Ship the defaults like Frame 1, Group 27, Vector, or Rectangle, because Migma has to guess what they are

---

​

Skip animation in Figma

Figma exports a single still frame, so any animation you place in Figma arrives frozen. Do

• Import the static design, then add an animated GIF inside Migma, where animated images are supported

Don’t

• Place a GIF in Figma expecting it to move, because it arrives as one frozen frame

---

​

Quick checklist

---

​

Import your file

When your file follows these guidelines, importing is the easy part. Connect Figma, copy the link to your frame, and bring it in.