<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
Prerequisites
Before you begin, make sure you have:- An active Parcel 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)
Open the Export Panel
- Select the email frame you want to export in Figma
- Click the Export button in the top right of the plugin
- Pick Parcel from the export dropdown. You can also start typing “parcel” to filter the list.
Export Your Email
- With Parcel selected, click Export
- 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>) - Your browser downloads a zip file containing the Parcel-ready HTML and any image assets
Import the File Into Parcel
- Unzip the download. You’ll see a
.htmlfile and (if image hosting wasn’t used) a folder of images. - Open Parcel and create or open the project you want to drop this email into
- Create a new template (or open an existing one you want to replace) and paste the contents of the
.htmlfile into the Parcel editor - Save. Your email is now editable in Parcel using its native component syntax.
src URLs in the HTML to match.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. 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 thesrc 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 or reach out to our support team at hello@emaillove.com for assistance.
Related Articles
- Export Overview: Understand all export options and how the plugin converts your Figma design to HTML
- Image Hosting: How the plugin handles image hosting during export

