Set up your 600px frame and grab brand assets
Before you draw a single rectangle, you need the right canvas size and your core assets ready. We always design desktop email frames at exactly 600 pixels wide. That is the standard width for almost every major email client, from Gmail to Apple Mail.
Instead of guessing brand styling, pull the exact assets straight from the client site. We use three simple browser extensions: a color picker to grab exact hex codes, a font finder to identify web fonts, and an image extractor (like Image Downloader) to pull high-res product photos and logos.
Having your copy separated beforehand makes the process ten times faster. Your copywriter should deliver text split clearly by section, headline, body copy, and button text so the designer can focus purely on visual hierarchy.
Master auto layout early (it saves hours later)
If you build an email template using loose shapes and unlinked text boxes, making edits will be miserable. The moment a brand changes three words in a headline, the entire layout breaks and you have to manually reposition everything below it. That is a massive waste of time.
We use Figma's auto layout (Shift + A) on every single component. Group your text and button together, hit Shift + A, and set your vertical or horizontal alignment. When you type new copy, the button and container automatically resize and push the rest of the layout down.
One thing I like to do is group sections into distinct frames and use the gap setting on the right-hand panel. This allows you to manage consistent 16px or 24px spacing across an entire module with a single value.
Build an above-the-fold hero section that converts
The top section of your email carries the heaviest load. It needs to tell the subscriber who you are, what the offer is, and give them a place to click before they even begin scrolling.
Start with a clear preheader bar at the very top, containing a subtle promotion or discount code alongside a distinct, rounded CTA button. Rounding the corners makes it instantly recognisable as a clickable element rather than a flat graphic banner.
For the primary headline, aim for 45 to 50 pixels in font size and keep the text under roughly five words. Pair it with layered product imagery. A simple trick we use is cutting out product photos, placing them over coloured ellipse shapes, and using Figma masks to let the product break out of the container. It adds instant depth without adding bloat.
Structure dynamic product grids and social proof
When presenting products, do not just drop flat product cutouts onto a blank background. You want them to feel tactile and elevated.
Drop a soft shadow beneath each product container by creating a small dark ellipse, placing it behind the product, and applying a layer blur. Lower the opacity to around 20% to 30%. It makes the product look like it is floating off the screen.
For the review and trust badge sections, keep these best practices in mind:
- Wrap customer reviews in quotation marks and format the customer's name separately below to establish clear authenticity.
- Turn the review card into an auto layout frame with a light background fill so you can adjust padding without breaking the box.
- Pull official trust badges directly from the site and align them horizontally with uniform spacing.
Format clean footers with exact brand elements
The footer is where subscribers go when they want reassurance, social links, or account management. Keep it clean and aligned with the brand's live store.
Only include social media icons for platforms the brand actively maintains. We pull standard SVG vector icons from libraries like Flaticon and scale them to a consistent 50 by 50 pixels. Make sure all icons belong to the same visual family, whether that is solid fill or line art.
Add a subtle top stroke (1 or 2 pixels) to separate the footer from the main content body. Drop in the required unsubscribe copy and brand address cleanly below the social links.
Scale to a 375px mobile version seamlessly
Over 60% of ecommerce email opens happen on mobile devices. Designing a desktop version is only half the job; you must create a dedicated mobile layout to hand off for development.
Duplicate your completed 600px desktop frame. Select the entire frame, hit the 'K' key to activate Figma's scale tool, and resize the width down to 375 pixels. This gives you the standard mobile viewport while scaling every element proportionally.
Once scaled, convert multi-column product grids into single-column vertical stacks. Open your product group's auto layout settings and switch the direction from horizontal to vertical. Check your body copy sizes immediately; ensure no body text drops below 16 pixels, otherwise it will be unreadable on a phone screen.
Final Thoughts
Building high-converting emails comes down to clean structure and reusable components. When you master auto layout and design modular sections in Figma, building a full 6-email flow takes a fraction of the time. Set up your master templates properly once, and the rest of your campaign production runs on rails.
Want to upgrade your email creative?
If you want high-performing, custom-designed email campaigns built and managed for your ecommerce store, take a look at our Email Campaigns service to see how we help brands scale retention revenue.
