Free Email Design System and UI Kit for Figma and Sketch

Figma logo Sketch 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.

“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

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.

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.

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.

“Your Sketch library is not a design system.”
— Brad Frost

A design 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.

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 free

Download Figma & Sketch Files

Email templates for Figma

Email templates for Sketch

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 Belfast.

Lee spent over 10 years in the San Francisco Bay Area working for successful messaging companies including Mailgun and OneSignal, where he led design and product teams, and open-sourced email tools for developers including an automated workflow. His GitHub stars for email tools amount to over 20,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 2,000 Happy Customers Use These Email Templates in Production

It was an absolute breeze to have responsive emails in production because of HTMLemail.io

Highly recommended!
— WeddingWoo (@weddingwoo) September 3

Never create another responsive HTML email again with @leemunroe's handy pack of common templates HTMLemail.io
— Si Jobling (@Si) August 11

coding emails. what fun. at least I have @leemunroe's cool grunt email workflow to help with the too-much-fun i'm having. i feel less alone!
— Raphaëlle Cantin (@ar_sea) April 19

Using @leemunroe’s HTML Email templates, which is saving so much time and headache: HTMLemail.io
— Kyle Gawley (@kylegawley) October 12

And if you need a quick start guide into building HTML email templates, may I suggest @LeeMunroe’s fantastic post HTMLemail.io
— Patrick Haney (@notasausage) December 9

PROTIP: If you're building a responsive HTML email from scratch, you can't beat @leemunroe's simple starter template HTMLemail.io
— Chris Gabriel (@trampish) November 20

#1 on Product Hunt

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

I think I love you. I can already feel my email headaches flying away :-)
— Adam Davies (Web Developer) August 11