How to design your first email in FIGMA?

An Introduction to FIGMA

Designing your first-ever email is always an exciting process. Add FIGMA into this mix and you are sure to kickstart your campaign on the right foot! 

Why?

FIGMA is one of the most desired and popular tools taking the UI/UX design world by storm these days. This powerful design tool helps you create anything — emails, websites, applications, logos, and much more. By learning to use FIGMA, you’ll take your first steps into User Interface Design and User Experience Design. Before you learn how to design your first email in FIGMA community, let’s take you through a few elements. 

What Makes an Email Design Good?

Before getting into designing your first FIGMA HTML email template, here’s an easy way to get responsive HTML email code in just a few seconds! 

• Keep it simple and focused: It helps create a responsive HTML template that works in every email client and all mobile and tablet apps. 
• Ensure it’s captivating: Have a mix of illustrations, colors, and a striking featured image.
• Be creative: Your email template should stand out from the rest of the countless others flooding your receiver’s inbox. 
• Consistency is key: With a consistent layout, website developers only require a small number of reusable templates for your pages. 
• Give your content room to breathe: It beautifies the user experience so users can emphasize focus points. 

Let’s move to how we can create a good email design!

Structure/Layout 

When checking out how to design your first email in FIGMA for beginners, structure/layout is an element you shouldn’t ignore. The email layout helps you get an idea of how you are going to place your images, texts, and videos in the email. The way you structure your layout determines how visually engaging and appealing it is going to look. 

Width size

Here are some tips on the best widths and sizes to use for your FIGMA email format and designs. 

•  Take a blank layer and rename it.
•  The standard width of an email is 600 px.
•  However, any email size can be used such as 700 or 800px. 
• For our design, the width is 600 px, so all content should be in 540 widths.

There are many advantages to using a 600px email design such as:

1. Users can give a clear display of the content, images, and other user interfaces of the email clearly without scattering its pixels.

2. Most email templates are set at 600 px as their standard sizes to draft mail for the client. 

3. Its dimensions suit all of the all-screen size devices and the user gets a clear view of the email in a better way. 

• Height can be adjustable according to design on a free FIGMA email template.

First, we have to take a frame and set the width to 600px, and rename it as “Email”. 

Image 1: Taking a frame from the menu bar

Image 2: Width size from toolbar

To rename, you have to double-click on the frame text and rename it.

Image 3: Renaming the frame

Image 4: Renaming the frame as “Email”

–      Branding/Color:  When learning how to design your first email in FIGMA for free and also for email design in general, we should choose colors wisely. Preferably, do not choose vibrant colors but always focus on using brand colors.

Image 5: Color code

For selecting colors for your design, you will see on the right panel that there is a fill section. You have to select that and choose your required colors from there.

Image 6: Color panel section

–         Header & banner

• We can put a logo or images that represent the branding process.
•  Put it in the center or left/right and align it according to your needs.
•  The banner width should be 600 px.

Image 7 & 8: Banner section

–         Gutter space: 20/30/40 px

•  We can maintain 30 px gutter space on either side of the container (standard).
•  All of the content should be in a container of 540 width.
• To check the gutter space, select the content and press Alt.

Image 9: Showing the gutter space

–         Typography:

• Requires you to be consistent with fonts.
• For a FIGMA Gmail template, Web safe fonts such as Open sans, Poppins, Roboto, Tahoma, and Verdana fonts would be a good choice.
• Heading text should be different from body text.
• Heading text should be 18 and body text should be 14 (standard).

Image 10: Web safe fonts

Image 11: Heading text size 

Image 12: Body text size

For text, you should select the text tool, drag a text box and type your text. From the right panel, the text section you can change the text style, font size and line spacing, alignment, etc. 

Image 13: Selecting the text tool

Image 14: Drag blank text box

Image 15: Text 

Image 16: Text toolbar

–         Images in email

•  Putting some images to make your email design look good is a wonderful idea.

Image 17: Image section

• Make sure the image sizes are the same.
• Spacing between images should be consistent.

For putting an image in an email design, first, you have to take a rectangle (image size depends on design).

Image 18: Selecting rectangle from the menu bar

Image 19: Putting blank rectangle

Then, from the right panel, you have to select fill and then choose the “Image” option. After that, you have to put your image there. 

Image 20: Selecting the fill section

Image 21: From the fill section select the image

Image 22: Putting the image

–         One/two/three column layout:

One Column Layout:

• There will be one column content (one image and below that put some texts).
• We need to keep 30 px gutter space on both sides.
• So, all content should be in a container of 540 width. 

Image 23: One column layout

Two Column Layout:

• There will be two column content.
•  We need to keep 30 px gutter space on both sides.
• So, all content should be in a container of 540 width but there will be two columns, we need to keep 20 px spacing between two columns.
• The column width would be 260 px, height depends on design.
• We can also present a two column layout in another variation. 

Image 24: Two column layout

Image 25: Two column layout (Section 1)

Image 26: Two column layout (Variation 2)

Three Column Layout:

•   There will also be three column content.
•   We need to keep the same spacing between the three columns.

Image 27: Three column layout 

Group the Section/ Layout:

For any kind of layout, we need to group each section. This makes our work easy and organized. For grouping the section, you have to press and hold the shift button and select your image layer and text layer. After that press CTRL + G. Then, rename that section and to do that, you have to double click on that group layer and then rename it.

Image 28: Selecting the image and text layer 

Image 29: Press CTRL + G (To make them in one group)

Image 30: Double click that layer to rename it 

Image 31: Renaming the section

Image 32: Group section

–         CTA: Height should be a minimum of 40 px.

We use this height as this is user-friendly for mobile UI. 

Image 33: CTA section

–   Footer:

•  Put a logo if required.
• There should be copyright.
• You can put social media icons/links.
• There should be an unsubscribe link.

Image 34: Footer

Image 35: Group section

You should group your entire email design section and rename it section-wise.That will make your work easy and your email design will look organized. 

FULL EMAIL DESIGN IMAGE

So there you have it! If you want to know more about how to design your first email in FIGMA using javascript or how to design your first email in FIGMA to HTML, get in touch with our Crafted Email experts today!