Email Design System For Sketch & Figma

One Sketch file, one Figma file, 10 templates, desktop and mobile, reusable symbols,
components and styles, ready for you to customize.

Download Design Files

Sketch and Figma email design system

Sketch logo Figma logo

Why use an email design system?

Consistency across email is hard

Working across design files with different Designers often introduces inconsistencies.

Using a system ensures every Designer uses the same components, colors, font styles and layout, ensuring consistency and professional looking emails.

Your time is valuable

Recreating design assets and artifacts over and over again is a waste of your time.

This system includes a reusable grid, Sketch symbols, modules, font styles, colors and layer styles. You set this stuff up once and don’t have to think about it again.

Seamless pixels to code

Hand-off to Developers can be tricky. Often the outcome is not what you expected. Especially in email where email client support is crazy.

Our design system aligns 1:1 with our HTML templates helping to bridge the gap between design and code.

Nathan Curtis

“A design system offers a library of visual style and components documented and released as reusable code for Developers and/or tool(s) for Designers.”

Nathan Curtis
Sketch color palette

Consistency with a design system

Your brand and emails deserve to look professional. Your transactional emails should look like your promotional emails. The emails you send from your marketing platform should look like the emails you send from your codebase. That starts with a system.

Enable your team to move fast

Creating a system means you can spend more time on creativity or optimizing numbers. Not recreating components over and over again. Not chasing down team members telling them they’re using the wrong hex code or typeface.

Sketch type styles
Sketch spacing rules

Jump start design QA with Developers

Creating a system means Developers are more likely to get it right first time. Developers are happy as they're not rebuilding components over and over again. Designers are happy as their designs are rendered as intended. Marketing & Product are happy as their projects are shipped and in production faster.

Establish a set of reusable styles & components

Colors, type, spacing, buttons, alerts, tables, footer, articles… define them with styles and symbols so you can reuse them throughout your email templates. Use Sketch symbol overrides or Figma components to customize text and color.

Sketch components and symbols
Sketch email grid

Responsive grid for desktop and mobile

With 50% of emails opened on mobile devices it’s important to design for both desktop experience and mobile. These templates stick to a 6 column grid and collapse on mobile.

Brad Frost

“Your Sketch library is not a design system.”

Brad Frost

A Sketch library is just the beginning

These Sketch & Figma templates are tools for Designers that help make up your larger design system. To truly enable your team you need good code and living breathing documentation. Take a look at our HTML templates when you're ready to convert your designs to code.

Design system with code

Sketch

Download a .sketch file with pages, layers, symbols and styles ready to go.

Figma

Download a .fig file with pages, layers, components and styles ready to go.

10 Templates

Notifications, newsletter, receipt, e-commerce, welcome email and more.

6 Column Grid

Templates are aligned to 6-column grid and 8 pixel spacing units.

Reusable Components

Make use of symbol overrides to customize buttons and components.

Desktop & Responsive Mobile

Templates include both desktop 600px and responsive mobile examples.

Download the Sketch & Figma email design system for $9

Download Sketch & Figma Files

Email templates for Sketch

Email templates for Figma

Frequently Asked Questions About Email Design System For Sketch & Figma

Why are these so cheap, what's the catch?

This design system is an affordable resource for Designers. Arguably the more complicated part of email is coding the designs so that they don't fall apart across email clients and devices. That's where we offer these templates as HTML/CSS.

I've just downloaded the design files, what do I do next?

Read the README which has instructions on how the Sketch/Figma file is set up. First thing you'll want to do is adjust the colors, layer styles and font styles to suit your brand and design system. Once you do this you should notice the changes automatically take effect.

Are these templates available for XD or Photoshop?

Not yet. If you'd like to see these for another design tool please create an issue on GitHub (or upvote an existing request).

I may have found a bug, how do I report it?

We're tracking bugs in this GitHub repo. Please create a new issue and we'll respond within 24 hours. If you don't use GitHub please email us.

About Designer & Developer
Lee Munroe

Lee Munroe, email designer and developer

Lee Munroe is an Email Designer and Developer based in San Francisco, California.

Lee was Design Lead & Developer Evangelist at Mailgun by Rackspace, an email service for Developers, where he open-sourced several email related tools for Developers including an automated workflow. His GitHub stars for email related developer tools amount to over 15,000.

As well as open-sourcing software, Lee has spoke at several leading industry conferences about email development including Litmus Email Design Conference (Boston), WebU (Toronto), Future of Web Design (San Francisco), O'Reilly Fluent Conference (San Francisco).

Over 1,000 Happy Customers Use These Email Templates in Production

#1 on Product Hunt

Top voted product on launch day with 2,000 votes & ranked #1 in developer tools.

Product Hunt logo

Whoa there email maestro!

Subscribe to our HTML Email newsletter and we'll send you a free simple responsive HTML email that you can download and use today.

Free email

No thanks