FAQs & Best Practices
Design Guidelines to Follow in Figma

Design guidelines to follow in Figma

For best deliverability experience, we suggest you to follow the following guidelines while designing the email in Figma. We test all design inputs with the following two parameters:

  1. Template width
  2. HTML size

If the design requires no changes, we mark it green. If it requires minor changes, we mark it yellow. If the design requires major changes and could lead to issues like getting marked as spam, or clipping, we mark it red.

Let’s discuss all test parameters individually:

Template width

We flag email templates with <320px width as red. The ideal template width for a good desktop experience is between 600-640px. However, we also allow you to add a breakpoint for a better mobile experience.

Less than 320px design

How to fix?

Redesign the template at 600-640px width size and add breakpoints for the elements that you want to change at 320px or lower.

HTML size

Emails with more than 100KB size have a higher risk of getting clipped by Gmail or being marked as spam by email clients. Therefore, we mark this as red.

Above 100Kb red mark

How to fix?

Here are a few possible fixes to reduce email size:

  1. Use embedded image links instead of Base64 images.
  2. Turn on Minification from the settings.
  3. Reduce content from your figma design.