> ## 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.

# Export Figma emails to Parcel

> Export your Figma email design as Parcel-ready HTML for code-level editing and testing.

The Email Love Figma Plugin exports your email designs in [Parcel](https://parcel.io/)'s native component format (`<x-base>`, `<x-section>`, `<x-row>`, `<x-column>`) so you can drop them straight into Parcel's editor and continue iterating in code. Unlike most ESP integrations, Parcel works as a **download**: pick Parcel from the export dropdown, click Export, and the plugin gives you a zip file you can import into your Parcel project.

[Download the Email Love Figma Plugin here](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder)

## Prerequisites

Before you begin, make sure you have:

* An active [Parcel](https://parcel.io/) account
* The Email Love Figma plugin installed
* At least one email designed in Figma using the plugin
* An Email Love Footer with an Unsubscribe link in your design (recommended)

There's no API key, no Master Secret, no login flow. Parcel is a download destination, not a direct API push. See the [Parcel sharing & playground docs](https://parcel.io/docs/sharing/playground) for background on how Parcel handles imports.

<Steps>
  <Step title="Open the Export Panel">
    1. Select the email frame you want to export in Figma
    2. Click the **Export** button in the top right of the plugin
    3. Pick **Parcel** from the export dropdown. You can also start typing "parcel" to filter the list.

    The dropdown is alphabetised, so Parcel sits in the P section of the A–Z list of ESPs underneath the HTML, MJML, and Email Love Builder options.
  </Step>

  <Step title="Export Your Email">
    1. With Parcel selected, click **Export**
    2. The plugin sends your design to the Email Love backend, which converts it to Parcel's native component format (`<x-base>` / `<x-section>` / `<x-row>` / `<x-column>`)
    3. Your browser downloads a zip file containing the Parcel-ready HTML and any image assets

    There's no API call to Parcel. The export ends with the download. You'll bring the file into Parcel in the next step.
  </Step>

  <Step title="Import the File Into Parcel">
    1. Unzip the download. You'll see a `.html` file and (if image hosting wasn't used) a folder of images.
    2. Open [Parcel](https://parcel.email/) and create or open the project you want to drop this email into
    3. Create a new template (or open an existing one you want to replace) and paste the contents of the `.html` file into the Parcel editor
    4. Save. Your email is now editable in Parcel using its native component syntax.

    If images came down as separate files, upload them to your usual image host (or the Parcel asset workflow your team uses) and update the `src` URLs in the HTML to match.
  </Step>
</Steps>

## Why download instead of direct API push?

Parcel's primary sharing methods (`parcel.openInPlayground`, `parcel.embed`) rely on browser cross-origin handoff: form POST and `postMessage` respectively. Figma plugins run inside a sandboxed iframe where those handoffs are unreliable, so we settled on a zip download as the cleanest, most reliable UX. You get the exact same Parcel-native output, you just bring it into Parcel yourself.

## What the Plugin Does for You

* **Generates Parcel-native HTML** with `<x-base>`, `<x-section>`, `<x-row>`, and `<x-column>` components so your email is immediately editable in Parcel's component system
* **Hosts your images** (when image hosting is enabled in the export settings) so the HTML references CDN URLs that work as soon as you paste into Parcel, no manual upload needed
* **Preserves your unsubscribe link**: the Email Love Footer's unsubscribe link is kept intact so the downstream ESP you send through can wire it up
* **Generates responsive, deliverable HTML** that renders consistently across major email clients once Parcel re-exports the email for sending

## Troubleshooting

**Nothing downloads when I click Export:** Check your browser's download permissions for [emaillove.com](http://emaillove.com). The export ends with a browser download, so a popup blocker or download prompt may be holding it up. Try Export again from a fresh tab if needed.

**Images aren't loading after I paste the HTML into Parcel:** If you exported with image hosting **off**, the zip includes a separate images folder and the HTML references local file paths that won't work once pasted into Parcel. Either re-export with image hosting **on**, or upload the images to your own host and update the `src` URLs in the HTML before saving in Parcel.

**Parcel doesn't recognise the components after I paste:** Make sure you're pasting into Parcel's **code view**, not the visual editor's plain-HTML mode. Parcel's `<x-*>` components only render correctly when pasted into a Parcel-aware editor.

**The exported HTML looks plain (no `<x-row>` / `<x-column>`):** Double-check that you selected **Parcel** in the export dropdown, not generic HTML or MJML. The Parcel-native output only happens when `Parcel::Html` is the chosen export.

**Unsubscribe link not working:** Make sure your design includes an Email Love Footer with an Unsubscribe link. Without one, there's nothing for the downstream ESP to swap a real unsubscribe URL into when you eventually send through Parcel.

**Need help?** Join our [Discord community](https://discord.com/invite/ANv9PjVdzP) or reach out to our support team at [hello@emaillove.com](mailto:hello@emaillove.com) for assistance.

## Related Articles

* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Image Hosting](/plugin/images/hosting): How the plugin handles image hosting during export