6 tips for creating emails in Figma

Figma is now one of, if not the most popular, tool for today’s UX/UI design. A few reasons are that the interface is more intuitive, excellent for handoffs and prototyping, and easy collaboration among other features. That’s why not only designers love this tool, but also developers, project managers and marketers alike.

However, there are still certain aspects you should keep in mind as you use Figma to create emails specifically–especially if you’re fairly new to the platform. That’s why in this post, we’re not only going to go over some important tips to follow as you start designing emails in Figma, but we’ll also look at an easy way to get responsive HTML email code in just a few seconds using a tool called Cannoli.

#1 Email type

Before you start designing an email in Figma, you’ll want to take into account the type of email you’re creating.

For example, if you plan on making a campaign of emails with a similar layout, you’d probably want to create a template. In that case, make sure the structure of the email is dynamic enough to allow for small copy or visual changes. If you’re designing for a client, try to get an idea of how they want to use these emails beforehand. It’ll make your workflow much smoother.

On the other hand, if you’re going to be creating a one-off email with a more unique design, you can have more flexibility.

#2 Design system

During the design process, you’ll have to continuously evaluate which elements and components need to be changed. Brands are constantly coming up with new ways to improve their design standards, which means you have to keep up with them as a designer. But even if you’re just working on a personal project, learning to keep your design system as organized as possible will help you avoid confusion.

For example, you may forget to update the footer of certain emails because it’s an element that usually stays the same. But if it has any redundant or outdated information, it could throw off your audience. Keeping your design system updated frequently will only save you time and make the design process much smoother when it’s time to start creating.

A great way to avoid this is to start creating components that are used throughout all your emails ASAP. Some quick wins are headers, paragraphs with toggles for a header, subheader and body text, CTA’s, and footers. Using components and variants ensures that key brand elements are up to date as long as you are keeping your design system up to date. This means depreciated elements like links that don’t work anymore or fonts that aren’t part of the brand guide, a thing of the past.

#3 Layout structure

Throughout the design process, you’ll likely be making changes to multiple aspects of your email’s content, which will impact its overall structure. These changes can make your email longer, shorter, or even involve shifting around entire sections.

One of these changes will likely involve changing the size and placement of images. In Figma, this is fairly easy to do, but you should also consider how your images work in the grand scheme of your design. The size of your graphics or even the way that they wrap around your text can affect how well the email as a whole flows. Sketching out a design beforehand helps, but it’s also important not to feel married to any particular design or structure if that compromises the readability of your email.

#4 Fonts

You likely have a brand-specific font that you would like to include in their email designs. The good news is that Figma allows you to install custom fonts to be used in your design. The not-so-great news is you’ll often find that custom fonts and even well-known, widely-used fonts don’t render properly once an email is completed.

You can definitely still try to use custom fonts, but also have web-safe fonts in your arsenal just to be safe. If you want to learn more about picking out the right web-safe fonts, check out one of our previous blog posts.

#5 Assets

Even if you’re just the designer, knowing ahead of time what the purpose of the email you’re putting together is can save you time with revisions later on. Check that the assets you’ll be using are still in line with the message of the email. This seems like a no-brainer, but when you’re in the process of designing multiple emails or creating templates, it can be easy to gloss over these simple details, which can later create confusion.

Another thing to keep in mind is to make your design as friendly as possible for dark mode. Users are quickly becoming more accustomed to using dark mode and in many cases prefer it to standard light mode. Unfortunately, UX designers don't always take this into account, which can result in an unattractive or flat-out undecipherable viewing experience for audiences. In Figma, be sure to enlist assets for dark mode so that they’re still visible if the background goes dark or changes color.

#6 Exporting and Cannoli

At last, once you’ve finished designing your email, it’s time to export it. Fortunately, this process is very simple using Cannoli, which essentially takes your Figma design and converts it into responsive email code for you with just a click of a button. All you need is the Figma URL of your design to get started.

Once you give Cannoli a URL, you can choose an artboard from your Figma file and from there, Cannoli automatically codes your artboard into email code. After your design is coded, you’ll have the ability to add in any links or preheader text, and you’ll have plenty of flexibility to make changes to both your email copy and the code itself.

If everything looks good, you can then copy the code from Cannoli and paste it into your ESP where it will look identical to your original Figma design and ready to send.

The process is smooth, quick and easy, but it’s important to keep a few things in mind first:

First, make sure that your artboard is an auto layout format and, second, your layers should be named after MJML components.

You may already be familiar with MJML as an email designer, but if not, don’t worry. You can get the hang of this mark-up language in under thirty minutes. In fact, in one of our previous blog posts, we walk you through creating a basic email to get you started.

We are here to make things easier!

If you don’t want to learn MJML, no problem. You can also use our curated templates ready to use. Simply duplicate any of our templates and make them your own. Or, download the Cannoli Figma plugin to easily get started.

Want us to take care of the process?

Let us bring your vision into a pixel-perfect reality. Our team of email experts will deliver production-ready email code tested on the most current devices and email clients. Place your order, complete your payment, sit back and relax!

Ready to get started? Order now.