HTML Email Best Practices: Design Your Email in Figma
Good HTML email starts with the design: a clear message, readable content and a layout that works on a small screen. You can make those decisions in Figma and use Marka Email Generator to turn the finished design into HTML for your email platform.
This guide walks through a product-update email, from an editable Figma template to a test send. Start with a Figma email template and open Marka in Figma to follow along.
1. Give the email one clear job
Before arranging layers, write the message and the action you want a reader to take. For a product update, that might be: “Your new project dashboard is ready” and “Explore your dashboard.”
Build the first draft around five sections:
| Section | What to put in your Figma frame |
|---|---|
| Header | Your logo and a little breathing room |
| Introduction | One headline and a short explanation |
| Main content | A product screenshot with useful supporting text |
| Action | One prominent button with a descriptive label |
| Footer | Sender details and the links your email platform needs |
Put the main message before the image so readers can understand the email even when pictures do not load. Replace placeholder copy early: real headlines and long product names change the space your design needs.
2. Start with an editable email layout
Duplicate a template from the email design system, then replace its logo, copy and imagery. Keep an untouched copy nearby so you can compare the original structure if an edit changes the preview.
For a new project, Marka can create a 600px frame with Auto Layout. Treat that as a starting canvas and review how your content fits at narrower widths. See the project setup instructions.
Use padding and spacing consistently. For example, try 24px around a content section and 16px between its headline and paragraph, then adjust by looking at the email at actual size.
3. Build reusable sections in Figma
Make the header, button and footer shared components. For the next campaign, duplicate the email frame and change the message while keeping those brand elements consistent.
Give layers practical names such as “Intro,” “Product image” and “Primary action.” Keep the file understandable for the marketer who will update next month's email. A short note beside the frame can record the subject, destination URL and approved copy.
Component edits help you maintain the Figma file. Export and review the revised email before using it in your sending platform.
4. Check mobile layout while you design
Look at the narrow version before adding more sections. Can someone read the headline, understand the offer and find the button without zooming?
Marka offers Responsive mode using Auto Layout and Constraints, and Breakpoints mode for separate desktop and mobile frames. Choose the approach that fits your layout using the mobile layout guide.
A single column is a useful starting point. When using two columns, decide which content should appear first on mobile and check the exported preview. Long URLs, oversized logos and fixed-width images deserve an extra look.
5. Make the content readable
Start body copy around 16px and review it at actual size. Give paragraphs comfortable line spacing and choose a fallback font that keeps the layout readable if the brand font is unavailable.
Keep the headline, body copy and button label as text. Use images for product screenshots and illustrations. Add useful image descriptions where available, and avoid putting the only explanation of an offer inside a graphic.
Check that text and buttons stand out against their backgrounds. For light and dark appearances, follow the Figma dark-mode workflow.
6. Add links and export with Marka
Review the destination of every button and text link. Add a preheader that complements your subject, such as “See what's new in your project workspace.”
Open your project in Marka, review the preview and export the email. Follow the export walkthrough for image hosting and platform handoff. Template access and plugin export allowances are separate; check Marka plans for the current limits.
7. Review the email your reader receives
Send a test through your email platform. Check desktop and phone layouts, links, image loading and light/dark appearance. Include Gmail, Apple Mail and the Outlook versions your audience uses; the Figma canvas and plugin preview do not replace those inbox checks.
If something needs adjusting, return to the Figma frame, make the visual change and export again. Keep a short record of what you checked so the next campaign starts from a known design.
Your next email starts with a frame
Choose a Figma email template, customize the message and export it with Marka. For the full design-to-export sequence, continue with making an email in Figma.
