> ## 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 with the Email Love Figma Plugin

> Set up Email Love, pick your path (AI-assisted or build by hand), and ship your first email

Email Love lets your team design, review, and ship real emails inside Figma. The frames you build export as production-ready HTML to Klaviyo, Customer.io, Braze, Iterable, and any ESP that accepts HTML uploads. Bulletproof tables, dark mode, mobile styles, and the right merge tags for your ESP are all handled for you.

There are two ways in. An AI agent can do most of the heavy lifting inside your Figma file, or you can build directly in the plugin the traditional way. Both routes use the same design system underneath, so you can mix them.

<Note>
  **New to Email Love and bringing an existing email library?** The fastest way to get up and running is to have an AI agent audit and migrate your current library first, before you build anything new. See [Migrating an Existing Design System or Template](/plugin/getting-started/migrate-design-system).
</Note>

## Pick your path

<CardGroup cols={2}>
  <Card title="Build with an AI agent" icon="sparkles" href="/plugin/ai/agents-in-figma">
    Point Claude or OpenAI Codex at your Figma file, brief it, and it assembles emails from your design system. Fastest for routine campaigns and lifecycle sequences.
  </Card>

  <Card title="Build with the plugin" icon="figma" href="/plugin/quickstart/from-template">
    Duplicate a template, swap the content, and export. The original workflow, still the best if you want full manual control.
  </Card>
</CardGroup>

## What you need

For either path:

* **A Figma account.** A Free Figma seat works when you build by hand. Writing to the canvas with an agent requires a Full Figma seat and edit access to the file. If you do not have an account, [sign up at Figma.com](https://www.figma.com/).
* **The Email Love plugin installed in Figma.** Search "Email Love" from the plugin menu, or [grab it from the Figma Community](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder). Free plan includes 5 exports per month; paid plans are unlimited.
* **A design system to build from.** Use your own Email Love design system, [migrate an existing library](/plugin/getting-started/migrate-design-system), or [duplicate the Ultimate Email Design System](https://www.figma.com/community/file/1247396968159079452/the-ultimate-email-design-system) to start with our components and templates.

For the AI path, you also need:

* **Claude or OpenAI Codex.** Either works with the same Email Love workflow.
* **The official Figma MCP** connected to your agent, with access to your file. Setup instructions are in [Build with the Figma MCP](/plugin/ai/agents-in-figma).

## Watch a walkthrough

<iframe src="https://www.loom.com/embed/b8fdf58902c84e679d9fd20915ce1e29" title="Email Love Figma Plugin quick start tutorial" width="100%" height="420" frameBorder="0" allowFullScreen />

A 15-minute walkthrough covering the plugin from installation through your first export. Good background if you plan to work in the plugin directly.

## A few things to know before you start

* **Frame names become template names in your ESP.** Name them carefully.
* **Always add a footer.** Our footer components include the correct unsubscribe merge tag for your platform.
* **Use auto layout for spacing, not manual positioning.** The exporter reads padding, not pixel positions.
* **Test mobile styles.** The Mobile Styles tab lets you override padding, font sizes, and alignment for phones.
* **Building on the canvas is free, exports are metered.** 5 free exports per month on the Free plan; unlimited on paid plans.

The plugin uses MJML under the hood but you never see it. Every layer has a plain-English name. If you want to understand what is happening behind the scenes, see [Email Fundamentals](/plugin/getting-started/email-fundamentals).

## Need help?

<CardGroup cols={2}>
  <Card title="Ask Claude or Codex" icon="sparkles" href="/plugin/ai/agent-help">
    Let an agent inspect your Figma file, diagnose a canvas problem, or prepare a safe fix.
  </Card>

  <Card title="Email support" icon="envelope" href="mailto:support@emaillove.com">
    Write to **[support@emaillove.com](mailto:support@emaillove.com)** and a human will get back to you.
  </Card>

  <Card title="Discord community" icon="discord" href="https://discord.com/invite/ANv9PjVdzP">
    Join the Email Love Discord for quick answers from the team and other Email Love users.
  </Card>
</CardGroup>

Rolling this out to a bigger team? [Book a meeting with us](https://calendar.notion.so/meet/matthayes/matthayes) to talk about the Enterprise plan.