Figma Email Templates for E-commerce: Design Better Campaigns Faster

If you're designing email campaigns for an e-commerce store in 2026, you're almost certainly using Figma. It's become the default design tool for marketing teams, agencies, and freelance designers — and for good reason.

But email design has unique constraints that web and app design don't. You can't use flexbox, CSS grid, or external stylesheets. Many email clients still rely on table-based layouts. And what looks perfect in Figma can break spectacularly when it hits Outlook.

This guide covers how to set up Figma email templates correctly from the start, so your designs translate cleanly into real emails — whether you export as HTML or as images.

Why Figma Is the Best Tool for Email Design

Compared to Photoshop, Canva, or any other design tool, Figma offers three critical advantages for email:

• Components and variants: Design a button once, reuse it across 20 templates. Change the master component and every instance updates automatically. This alone saves hours when managing a campaign calendar.
• Auto Layout: Figma's auto layout works like CSS flexbox — set direction, padding, spacing, and alignment. This maps directly to how email layouts are structured, making the design-to-code translation much smoother.
• Real-time collaboration: Your copywriter can update text while you adjust the layout. Your marketing manager can leave comments directly on the design. No more emailing PSDs back and forth.

Canva is faster for beginners, but it lacks the component system and precision control that email design requires. Photoshop is still useful for image editing, but it's not built for layout systems and collaboration.

Setting Up Your Email Template Frame

Getting the foundation right prevents headaches later. Here's the exact setup:

Frame Dimensions

• Width: 600px — This is the universal email standard. Every major email client expects 600px or narrower. Some brands use 640px, but 600px is the safest.
• Content container: 540-560px — Leave 20-30px padding on each side. This prevents content from touching the edges on mobile clients that add their own padding.
• Height: variable — Don't set a fixed height. Let the content determine the email length. Use auto layout set to vertical with "hug contents."

Grid System

• 8px spacing grid: Use multiples of 8 for all spacing (8, 16, 24, 32, 40, 48px). This creates consistent visual rhythm and makes responsive scaling predictable.
• Layout grid: Apply a 6-column grid to your 600px frame. This gives you flexibility for 1-column, 2-column, and 3-column layouts within the same template.

Building Your Component Library

The real power of Figma for email is building reusable components. Here's what every e-commerce email component library should include:

Essential Components

• Header: Logo + navigation links (optional). Keep it simple — most email clients strip complex navigation. A centered logo with one or two text links is the standard.
• Hero banner: Full-width image or gradient with headline and CTA. Create variants for different campaign types (sale, new arrival, editorial).
• Product card: Image + product name + price + CTA button. This is the workhorse component for e-commerce emails. Create variants for 1-column (full width) and 2-column layouts.
• CTA button: Your most important component. Create variants for primary (filled), secondary (outlined), and different sizes. Minimum tap target: 44x44px for mobile.
• Text block: Heading + body text with auto layout. Set up with your brand's typography scale.
• Footer: Social links + unsubscribe + physical address (required by CAN-SPAM). Keep it consistent across all emails.

Using Figma Variables

Figma variables let you define your design tokens — colors, spacing, typography — in one place. When your brand updates its orange from #FF4F00 to a slightly different shade, you change the variable once and every component using it updates instantly.

For email templates, define variables for:

• Brand colors (primary, secondary, accent)
• Text colors (heading, body, muted)
• Background colors (primary, secondary, card)
• Spacing values (section padding, element gaps)
• Border radius (buttons, cards, images)

The Figma-to-Email Workflow

Once your design is complete, you need to get it into your email platform. There are two main approaches:

Approach 1: Export as HTML

Plugins like Emailify can convert your Figma design into HTML code that you paste directly into Klaviyo's custom code editor. The advantage is live text that's searchable, translatable, and accessible. The disadvantage is rendering inconsistencies — what looks perfect in Figma may break in Outlook's dark mode or render with fallback fonts.

This approach works best for text-heavy emails (newsletters, educational content, transactional emails) where the text content is more important than pixel-perfect design.

Approach 2: Export as Images (Slice and Upload)

Export your design as a full image, slice it into horizontal sections, compress each section, and upload to Klaviyo as image blocks. The advantage is pixel-perfect rendering in every email client — including dark mode. The disadvantage is that text within images isn't searchable or translatable.

This approach is what most e-commerce brands use for marketing campaigns — product launches, seasonal sales, brand storytelling — where visual design drives engagement. For a deep dive into image compression, check our image compression guide.

Approach 3: Hybrid

Use image-based sections for visually important areas (hero, product showcase) and HTML-coded sections for dynamic content (personalized product recommendations, text with merge tags). Klaviyo's editor supports mixing both in a single email.

Common Figma Email Design Mistakes

Even experienced designers make these mistakes when designing emails in Figma:

• Designing wider than 600px: It seems limiting, but 600px is the maximum safe width. Anything wider gets cropped or triggers horizontal scrolling in many email clients.
• Using unsupported CSS features: Flexbox, CSS grid, position absolute, background images — none of these work reliably in email. If you're exporting to HTML, design with table-based layouts in mind.
• Forgetting mobile: Over 60% of emails are opened on mobile. If your 2-column product grid doesn't stack to single-column on narrow screens, you're losing the majority of your audience.
• Oversized images: Exporting a hero image at 3000px wide when it only needs to be 1200px (600px at 2x for retina). Larger exports = larger file sizes = slower loading. See our Klaviyo image size guide for exact dimensions.
• Not using components: Rebuilding buttons, headers, and product cards from scratch for every campaign is a massive time waste. Invest an hour in building a component library and it will pay for itself immediately.
• Skipping dark mode testing: Your Figma design always shows light mode. But 80%+ of mobile users have dark mode enabled. Test how your email renders before sending. Read our dark mode email guide for detailed strategies.

Free Figma Email Templates to Get Started

If you're starting from scratch, the Figma Community has excellent free email template collections. Search for "email template e-commerce" and look for collections that include:

• Multiple campaign types (welcome, promotional, transactional)
• Component libraries (not just flat designs)
• Both desktop and mobile variants
• E-commerce-specific layouts (product grids, cart summaries)

Duplicate a community file, customize the colors and typography to match your brand, and you'll have a production-ready template system in under an hour.

Frequently Asked Questions

What width should I use for email templates in Figma?

Use a 600px wide frame. This is the industry standard that renders correctly across all email clients. For the content area, use 540-560px to leave comfortable side padding.

Can I use custom fonts in email templates?

If you export as HTML, custom fonts only work in Apple Mail and a few other clients. Gmail and Outlook fall back to system fonts like Arial. If you use the image-based approach (exporting as images), any font renders perfectly since it's baked into the image pixels.

Are there free Figma email templates?

Yes — the Figma Community has dozens of free collections. Search for "email template e-commerce" and look for files with component libraries, not just flat mockups.

How do I get my Figma design into Klaviyo?

Two approaches: (1) Export as HTML using a plugin and paste into Klaviyo's code editor, or (2) export as images, slice into sections, and upload as image blocks. The image-based approach is faster and renders more consistently across clients.

Should I design mobile and desktop versions separately?

For HTML emails, design both. For image-based emails, design at 600px and it scales proportionally on mobile. Most e-commerce brands design one 600px version that works on both desktop and mobile.