scalero-logo

15+ Free Figma Email Templates to Turbo-charge your Conversion Rates

5-excuses_2_blog.jpg

Kristina Lauren

Most marketers understand that email plays a huge role in executing a successful lifecycle marketing strategy. In order to keep your customers engaged and nurtured, you need to communicate regularly with them and email marketing provides one of the most effective ways to do so.

But it’s not enough to simply send out emails—the building blocks of strong email marketing campaigns are well-designed templates that speak to your customers and compel them to engage.

If you’ve exhausted all your current email designs or you’re just looking for some new, inspirational styles to spice up your campaigns, you’ve come to the right place.

We’ve created a library of over 15 free email templates that you can start using today with the help of Figma and a handy email coding tool called Cannoli.

If you’ve never used Figma before, no worries—we’ll not only show you how simple it is to customize these email templates in Figma, but we’ll also guide you through how to convert them into code using Cannoli.

Let’s jump right in!

Welcome Email Templates

When people subscribe to your email list, they're basically giving you permission to contact them. And that's a big deal, because it means they're interested in what you have to say or offer.

Since these are typically the first emails your subscribers will receive (besides an opt-in confirmation email) and they tend to have high open rates, you want to make a good first impression with a stellar email template.

Fortunately, we have three unique designs that you can choose from to suit the feel you’re going for. 

If you’re looking for something that looks modern and minimalist, try the Modern template. 

Want something a little more sophisticated? Go for the Sleek template. 

And if you prefer a more standard look with a clean and professional feel, the Classic template is the perfect choice.

Choose a template:

Winback Email Templates

If a customer hasn't interacted with your emails in a while, it may be a signal that they need a little extra engagement beyond the typical nurture campaign. You can do this with the power of a well-crafted winback email and remind your customers of why they loved your brand in the first place. If you can, offer some kind of discount and mention it in your subject line to make your email even more attractive.

There's no guarantee that every customer will be won over, but it's definitely worth a shot and the templates below can help you boost your chances.

Choose a template:

Abandoned Cart Email Templates

When a customer leaves items in their shopping cart, it's usually because they're not quite ready to buy yet. Maybe they're still comparison shopping, or maybe they just need to save up for a bigger purchase.

Whatever the reason, it's a missed opportunity if you don't follow up with them. And that's where abandoned cart emails come in. Like winback emails, an abandoned cart email reminder is a useful way to remind customers of exactly what they left behind.

Pick a template below to help your customers finish where they left off.

Choose a template:

Plain Text Email Templates

Plain text emails are a great way to get your message across in a clear and concise manner. With the minimal amount of design, they’re meant to be easy to read, allowing subscribers to hone in on the message in your text. 

For example, a plain text email would work well if you wanted to deliver important news to your customers, such as updates on inventory or a personal message from your CEO on the future of the business. But this type of template is also best for any other email that you want to keep simple and direct. 

With these ideas in mind, we’ve designed the following three templates.

Choose a template:

Product Launch Email Templates

When you're launching a new product, email marketing is one of the best ways to get your customers excited and in the loop.

But what makes an effective product launch email template? For starters, you’ll likely want to show off the look of your product, so a template with some visuals is important. Secondly, clear and vibrant CTAs make it as easy as possible for subscribers to click onto your website and convert.

We’ve combined these elements and much more into each of the templates below to help you accomplish a successful email product launch.

Choose a template:

How to use and edit email templates in Figma

Now that you’ve been introduced to the templates, it’s time to learn how to customize them in Figma. Follow the steps below!

1. Choose the template you want in this blog post or go to our template library to see all the options.

2. Once you find the template you want, click on it and choose “Open in Figma” in the next page. Side note: if you’d prefer to only get the actual email code and customize the design in your own code editor, feel free to just hit “Download HTML”.

3. After clicking “Open in Figma”, you’ll be taken to a Figma page where you’ll see the email design you choose, plus others in the same category.

4. At this point, you can log into your Figma account. If you don’t have a Figma account, go ahead and create one using your Google account or sign up with email.

5. Once you’re logged in, highlight and copy the entire design of the template you want, create a new design file, and paste the layers into the new file. To create a new design file, click on the home icon in the upper lefthand corner, then File > New design file.

6. From here, you can edit the email templates however you like, including changing out the copy, imagery and colors. You’ll also notice that these emails have been coded using MJML. While you don’t need to know MJML to use Figma, if you’d like to learn more, check out this in-depth guide.

7. If you only want picture files or PDFs of the email templates, you can simply click on the home icon > File > Export or Export frames to PDF. However, if you want to send your template out to an email list on a platform like Mailchimp, for example, check out the next section.

How to convert your Figma email template into HTML code

For this bit, we’re going to use a free tool called Cannoli that makes it quick and painless to take your email templates and convert them into editable, ready-to-use code. Here’s how it works:

1. Start by heading over to Cannoli.app, then click the “Login” button in the upper righthand corner of the page.

2. You’ll then be prompted to log in with your Figma account and once you do that, you should be directed to your Cannoli dashboard. 

3. Click “New File” and enter a name for your file.

4. Go back to the webpage with your Figma email design file and copy the URL.

5. Paste the URL under “Figma Link”, then select both the Page and Frames you’d like to convert.

6. A preview of your email template will pop up and if everything looks good, hit “Create File” 

7. After a few seconds of loading, you’ll be taken to a page that shows your email template code on the left side of the screen and the actual design on the right. Notice that you can also toggle between MJML and HTML code.

8. If you need to make any last-minute changes, you can edit the text and the code itself directly within the editor.

9. To test your email straight from Cannoli, click “Send Test Email” in the taskbar and enter the email address you want to send to. 

10. To export the code, hit the green “Export” button in the upper righthand corner. Here, you’ll have the option to download an MJML or HTML file that you can then upload to your email service provider (ESP). But you can also copy the code and paste it into your ESP’s code editor.

11. If you use Klaviyo, you can also connect your account to Cannoli to make exporting and importing the email design even easier.

12. Another important note: Cannoli doesn’t just work with our email templates—you can take any email design that you’ve created in Figma and convert it into code. 

In addition to this blog, we’ve also compiled every one of these templates into one neat template library. Each template is free to use, perfectly responsive on both desktop and mobile devices, and can be automatically converted into code using Cannoli.app

Plus, if you’re looking for your next Figma plugin and you enjoyed using Cannoli with these free email templates, you can also take advantage of the Cannoli plugin for Figma. Check it out here.

Join our mailing list

Get your fix of marketing, design and automation tips, all written by industry experts.

hello@scalero.io +1 510-394-2442San Francisco, CaliforniaMexico City, MexicoCopenhagen, Denmark