How to Design an Email in Figma: A Complete Step-by-Step Guide

Figma is a good tool for designing email and a poor tool for understanding email's constraints. Nothing in the canvas tells you that a 700px-wide layout will be clipped, that your 12px grey caption is unreadable in a real inbox, or that the three-column grid you just built has to survive becoming a stack. Those rules come from the medium, and you have to bring them with you.

This is the setup and the sequence I use, and the constraints that shape each step.

Set the frame up correctly first

Content width: 600px. This is the settled convention, and the reason is historical — Outlook's reading pane at common desktop resolutions. It has outlived its original cause but remains the safe maximum. Some senders go to 640px or 680px; those are usually fine now, but 600px is the width nothing clips.

Mobile frame: 375px. Design both from the start rather than checking the mobile version at the end. Most email layout failures happen in the collapse, and if you only discover them after the desktop design is signed off, you end up patching rather than designing.

Full canvas: 640px or wider, with a background colour. Real email renders on a background that extends beyond the content column. Designing on white and then discovering the client shows grey behind your content is a common surprise.

A named page per email, and frames named for what they are — 600 · desktop, 375 · mobile. This sounds fussy until you are handing off eleven emails in a sequence.

Understand the vertical budget

Horizontal space is generous; vertical space is not. On a phone, the visible area before the reader scrolls is roughly 350–400px tall once the client's own interface is accounted for.

That is the entire budget for whatever must be seen without scrolling. A 500px hero image spends all of it and more. This single constraint drives more layout decisions than anything else in email design, and it is invisible in a Figma frame that is 2,000px tall and fully visible on your monitor.

Draw a guide at 400px from the top of your mobile frame. Everything above it is what a large share of your readers will actually see.

Build the structure as stacked sections

Email layout is a stack of horizontal bands. Not a grid, not a canvas — a stack. Each band is full-width and contains one idea: header, hero, body block, product row, call to action, footer.

Build each band as its own auto layout frame with vertical padding, and stack them inside a parent auto layout frame. The reason is practical rather than aesthetic: this structure mirrors how the email will actually be built in HTML tables or in an email platform's editor, which means the design translates instead of needing reinterpretation.

Set your parent frame to hug contents vertically and fix its width. Now adding or removing a band reflows the whole email correctly.

Type: pick from what actually renders

This is where Figma most encourages a mistake. Every font on your machine is available in the canvas, and almost none of them are available in an email client.

Live text in email is limited to a small set of widely-installed families — Arial, Helvetica, Georgia, Times, Verdana, Tahoma, Trebuchet, Courier — plus a handful of system stacks. Webfonts work in some clients and silently fall back in others, including Outlook, so a design that depends on one is a design that has two appearances.

The workable approach:

• Use the real brand font for the logo, which is an image anyway.
• Design body and headline text in the font that will actually render, so what you see is what ships.
• If you must use a webfont, design the fallback too. Two frames, both approved. A serif fallback for a sans headline changes the line breaks and often the layout.

Minimum sizes that hold up: 16px body, 14px for secondary text, 22px+ for headlines. 12px captions look refined on a Retina display and are genuinely hard to read on a phone in daylight.

Colour and contrast, checked not assumed

Email is read in conditions you do not control — bright sunlight, a dimmed screen, a client that inverts your palette. Contrast that is marginal on your monitor fails in the wild.

Check body text against its background for at least 4.5:1. The combinations that fail most often are the ones designers reach for: gold on cream, white on pale pink, mid-grey on white, and any two mid-tones from the same palette.

Reserve one colour for actions. The moment your accent appears on a divider or a decorative rule, it stops meaning "this is clickable."

Buttons

Design them as auto layout frames with real padding rather than as fixed rectangles with centred text. Minimum 44px tall for a comfortable tap target, with horizontal padding that survives a longer label.

Two details worth building in: a solid background colour rather than a gradient (gradients render inconsistently), and a label that describes the outcome. Auto layout means a label change does not require redrawing the button.

Componentise once the pattern repeats

The moment you are designing a second email, stop drawing and start componentising. Header, footer, button, product card, section divider — these become components with properties for the text and images that vary.

The payoff is not the first email, it is the fifth. A four-email onboarding sequence built from one component set takes a fraction of the time of four separate files, and a late change to the footer is one edit rather than four.

Put your palette and type scale in Figma variables so a seasonal recolour is a variable swap rather than a hunt through fills.

Design the states you will need

Three that are almost always required and almost never drawn:

Images blocked. Turn off every image in a duplicate frame. Does the email still communicate? If the headline was baked into the hero, it does not.

Long content. Replace every string with one 40% longer. Product names wrap, buttons widen, the layout shifts. Better to find that now.

Empty or minimal. A digest with one item, a cart with one product, a grid with two. Designs built around three-across rows often look broken at two.

The handoff

Whoever builds this — a developer, or you in an email platform's editor — needs things the canvas does not carry:

• Exported images at 2× the display width, since email clients do not do responsive image sets reliably.
• Alt text for every image, written to carry the meaning.
• Hex values, exact spacing between bands, and the type stack including the fallback.
• Every link destination, including the footer ones.
• Both frames — desktop and mobile — with any behaviour that is not obvious called out, particularly how multi-column rows should collapse.

The handoff guide covers this in more detail, including what usually gets lost.

A short checklist before you call it done

• Content width 600px, mobile frame drawn
• The primary action visible within 400px of the top on mobile
• Headline is live text, not baked into an image
• Body type at least 16px, contrast checked at 4.5:1
• One colour reserved for actions
• Buttons at least 44px tall with real padding
• Alt text written for every image
• Images-blocked version still communicates
• Long-content version still holds
• Repeated elements are components, palette is in variables

Where the templates come in

Every design in this library is a Figma file built to the constraints above — 600px desktop frame, mobile frame alongside, named layers, live text where it matters. If you want to skip the setup, duplicate one and start from a structure that already resolves these decisions.

Start with the marketing collection for campaign layouts, or the newsletter collection if you are designing something recurring.