> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started
> What you need before using Email Love
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.
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.
## Need Help?
Write to **[support@emaillove.com](mailto:support@emaillove.com)** and a human will get back to you.
Join the Email Love Discord for quick answers from the team and other builders.
Rolling the plugin out to a larger team? [Book a meeting with us](https://calendar.notion.so/meet/matthayes/matthayes) 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](https://www.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**](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)"
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](https://www.figma.com/community/file/1247396968159079452/the-ultimate-email-design-system). 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](https://www.youtube.com/watch?v=5-EV2iSQFKU\&t)
### 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](https://www.loom.com/share/b8fdf58902c84e679d9fd20915ce1e29)
## 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](/plugin/quickstart/from-template), [build from scratch](/plugin/quickstart/from-scratch), or [convert an existing design](/plugin/quickstart/existing-design).