Designing your email in Figma

Sendra reads your design’s structure, not a picture of it. A frame built with auto layout exports as live text, real images and clickable buttons, and adapts to phones.

The email frame

The email is one auto layout frame.

• Set the frame’s direction to vertical, its width to a fixed value, and its height to hug contents. Most emails are 600 pixels wide.
• Put every section inside it: header, content, footer.
• Name it. The name becomes the file name when you export.

Auto layout all the way down

Use auto layout for every frame inside the email, not only the outer one. Sendra reads spacing, padding and alignment from auto layout settings, and turns rows and columns into the table structure email clients need.

• A row (horizontal auto layout) with two or more children becomes columns.
• A column (vertical auto layout) stacks its children.
• Fill container on a child shares the available width with its siblings. Two fill columns split a row in half.
• Hug contents keeps a child at the size of what is inside it, which suits text, buttons and icons.
• A fixed width keeps a child at that exact width.

A frame inside the email that does not use auto layout keeps its text live, but stacking and spacing on phones come from auto layout, so its contents do not adapt there. Turn auto layout on before you export.

Text

Text stays live text. Readers can select it, search it, resize it, and screen readers can read it.

• Google Fonts are linked automatically.
• Any other font needs a fallback. In the export window, choose the fallback email clients use when your font is not installed, or paste the URL of a font file you host.
• Leave text boxes room to grow. A different font, or a reader’s larger text setting, makes lines wrap.
• Keep text out of images. Text inside an image cannot be read by screen readers and cannot be resized.

Choose a fallback with a similar width

A fallback that is wider or narrower than your font changes where lines wrap. Pick one that is close in width, then check the preview. Fonts in email lists the choices.

Images

• Use a rectangle or a frame with an image fill for photos and illustrations. Each becomes an image in the email.
• Layers placed inside a frame that has an image fill stay live, on top of that image.
• Choose PNG or JPG for each image in the export window. Animated GIFs keep their animation when their format stays GIF.
• Write alt text for every image that carries meaning, from the Customize tab. Alt text is what a reader hears, and what shows when images are turned off.
• To send an image at a specific size, set that size in Figma. Sendra exports it at the size it has in the design.

Buttons

A button is an auto layout frame with a fill, a corner radius and a text layer inside it. Add the link from the Customize tab, on the frame itself, so the whole button is clickable.

Icons, logos and vector artwork

Vector shapes, icons and logos are exported as images automatically, at the size they have in the design. Icons placed side by side export as separate images, each with its own alt text and link; shapes that overlap each other export as one image. Keep icons small and give each one alt text, or leave the alt text empty for a purely decorative shape.

To export any other layer as an image, select it and turn on Export as image in the Customize tab. Use this for a group of overlapping layers or a piece of artwork you want reproduced exactly.

Layout on phones

On a phone, the email narrows to the width of the screen. Columns in a row stack, images scale down to fit, and small icons keep their size. Mobile layout covers the controls for stacking, spacing, text size and widths on phones.

Dark mode

Email clients that use dark mode may change your colours. The preview shows the email in both modes, and Dark mode explains the override for a layer whose colours must stay fixed.

What exports as a single image

These parts of a design are exported as one image, so plan for it:

• Any layer you switch to Export as image.
• A rotated layer, with everything inside it.
• A group or frame with a mask.
• A frame that clips its content, when decorative layers inside it spill past its edges.
• Vector shapes that overlap each other, with no text among them, such as an illustration built from several shapes. Separate icons side by side stay separate images, each with its own alt text and link.
• A complex vector shape on its own. Simple shapes, such as rectangles and ellipses, stay shapes.
• A rectangle or a frame with an image fill and nothing live inside it.

Everything else, text included, exports as live content.

Where the output is tested

Sendra’s output is tested in Gmail, Outlook for Windows, Outlook on the web, Apple Mail, Yahoo Mail and AOL. Use Send test to see your email in the inboxes your readers use before you send it for real.

A checklist before you export

• The email frame uses vertical auto layout with a fixed width.
• Every frame inside it uses auto layout.
• Fonts are Google Fonts, or have a fallback or a font file URL.
• Every meaningful image has alt text.
• Every button and linked image has a link.
• The Mobile preview reads well.
• Preview text and language are set in Properties.