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 over 100 pre-built components and templates, you can focus on what matters most: crafting engaging content and effective designs that convert.
Important: The Email Love Figma Plugin uses the MJML framework for all components and templates. You can build your own custom components, but they must follow the correct MJML frame and layer structure to export properly. We recommend starting with our pre-built components and customizing them to ensure compatibility.
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:
- Click the resources icon (four squares) in the Figma toolbar
- Search for "Email Love"
- Click to install the plugin
The plugin comes with 10 free exports to get you started. Once you're ready to upgrade, you can add your license key purchased through Gumroad directly 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 all 100+ pre-built 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 MJML (Helpful but Optional)
The plugin uses Mailjet Markup Language (MJML) as its framework. Understanding the basic structure will help you work more efficiently:
- Wrapper → Contains your entire email
- Section → Acts as a row for your content
- Column → Holds your content elements (up to 5-6 columns per section)
- Elements → Images, text, and buttons go inside columns
Don't worry—you don't need to write any code. This structure is built into our components, so once you understand how the layers work in Figma, you'll be all set.
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
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 Building Your First Email guide to learn the step-by-step process.
Need help? Join our Discord community, check out our complete help documentation, or book meeting with us to learn about our Enterprise plan.
Powered by