Getting Started

The Email Love Figma Plugin is designed to help marketing and creative teams cut their email production time in half by enabling you to export accessible and responsive email HTML directly from Figma. With hundreds of pre-built templates and components, you can focus on what matters most: crafting engaging content and effective designs that convert.

​

Need Help?

Rolling the plugin out to a larger team? Book a meeting with us to learn about the Enterprise plan.

​

Prerequisites

Before you start designing beautiful emails with Email Love, make sure you have these essentials in place:

​

1. Figma Account

You’ll need an active Figma account to use the plugin. If you don’t have one yet, create your free account at Figma.com.

​

2. Email Love Figma Plugin Installation

Installing the plugin is quick and easy:

1. Click the resources icon (four squares) in the Figma toolbar
2. Search for “Email Love”
3. Click to install the plugin

The free plan includes 5 free exports per month to get you started. Once you’re ready to upgrade, open the plugin settings and pick a plan; checkout happens right in the plugin. If you purchased a license key through Gumroad previously, you can still add it in the plugin settings.

​

3. Get the Ultimate Email Design System File

We strongly recommend duplicating our Ultimate Email Design System file from the Figma Community. This file contains hundreds of pre-built templates and components organized and ready to customize for your brand. Start here rather than building from scratch. You’ll save hours and ensure your emails export correctly every time.

​

4. Basic Understanding of the Email Structure (Helpful but Optional)

The plugin uses MJML under the hood, but you’ll never see MJML jargon in your layers panel. Instead, the plugin uses plain English names with helpful hints. Understanding the basic structure will help you work more efficiently:

• Wrapper: Groups rows together and sets the background for a section
• Row: A horizontal row that contains columns side by side
• Column: Holds your content elements (up to 4 columns per row)
• Elements: Text Block, Image Block, Button, Divider, Spacer, and more

Don’t worry, you don’t need to write any code. This structure is built into our components, and each layer includes a description of what it does right in the Figma layers panel. Learn more about MJML

​

5. Watch the 15-Minute Quick Start Tutorial

Before diving in, watch our walkthrough video that covers:

• Installing and opening the plugin
• Creating your first email frame
• Adding and customizing components
• Editing text, links, and buttons
• Adjusting padding and mobile styles
• Previewing and exporting your email

Watch the tutorial here

​

Quick Tips Before You Start

Name your frames carefully: The frame name becomes your template name in your ESP (Braze, Iterable, Klaviyo, etc.) Always add a footer: Our footer components automatically include the correct unsubscribe merge tag for your email platform Use auto layout for spacing: Don’t drag elements around. Use the padding controls to adjust spacing between elements Customize components: Turn our base components into Figma components for your brand, and they’ll appear in your asset library for easy reuse Test mobile styles: Use the Mobile Styles tab to adjust padding, font sizes, and alignment for mobile devices

​

Ready to Build Your First Email?

Once you have the plugin installed and the design system file duplicated, you’re ready to start building. Head to the quickstart guides to learn the step-by-step process: start from a template, build from scratch, or convert an existing design.