Exporting an Email Design

The Export feature in the Email Love Figma plugin allows you to easily convert your email design into email-friendly HTML or MJML, or directly export it to email marketing platforms like MailChimp and Klaviyo. Follow these steps to export your email design.

Ensure that your email design is finalized and ready for export, then click on the frame you want to export to ensure it is selected.

Click the Export button located in the top right corner of the Plugin interface.

On the Export page, select from among the following options:

HTML: Exports your design as email-friendly HTML.

MJML: Exports your design in MJML format.

Klaviyo: Exports your design directly to Klaviyo.

Klaviyo Editable Mode: Exports your design in an editable format directly to Klaviyo.

MailChimp: Exports your design directly to MailChimp.

Iterable: Exports your design directly to the Iterable email marketing software.

Loops: Exports your design directly to the Loops email platform.

Shopify Email: Exports your design directly to Shopify Email.

If you selected an Email Service Provider (ESP) like MailChimp, Klaviyo, and Iterable in Step 3, you are required to enter the API key for the platform. This connects the plugin to your account with the selected ESP.

Choose to either host your images with Email Love, or export them in a separate ZIP file. If you host images with our service, we will upload and host the images for you.

Add your email subject line and preheader text. These will be merged into the email during export.

Click the Export button to start the export process. The plugin will convert your design into the selected format and save it accordingly, or, if exporting to an ESP, the email will appear in the selected platform after export.

Send yourself a test email to preview how the email will look in your inbox. Alternatively, copy the generated code directly from the Export page.

Tips for a Smooth Export Process

Ensure that all elements of your design are correctly aligned and within the frame boundaries to avoid any export issues.

Double-check your API key for MailChimp, Klaviyo, and Iterable to ensure a seamless export.

Review the exported files to confirm that all design elements, such as images and links, are working correctly.

Ensure that you have not renamed any of the frames and layers on the navigation panel on the left of the Figma canvas.

In the case of Iterable and Shopify, your email should include unsubscribe options.

By following these steps, you can efficiently export your email designs from Figma, ensuring they are ready for deployment in your email marketing campaigns.