Upload your email to Customer.io

The Email Love Figma Plugin pushes your email designs straight into Customer.io Design Studio over the API — no copy-paste required. Enter your App API Key, set a subject and preheader, click Export, and the email (plus all of its images) shows up in your Design Studio account, ready to drop into a campaign or broadcast.

Download the Email Love Figma Plugin here

Prerequisites

Before you begin, make sure you have:

An active Customer.io account with Design Studio access

An App API Key (not a Tracking API Key) — create one in Customer.io under Settings → API Credentials → App API keys

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 (required for export)

Step 1: 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 Customer.io from the export dropdown

The dropdown is alphabetised, so Customer.io sits in the A–Z list of ESPs underneath the HTML, MJML, and Composa options.

Step 2: Connect Your Customer.io Account

Choose your Region — US (api.customer.io) or EU (api-eu.customer.io). This must match the region your Customer.io workspace is on, otherwise the API key will fail to validate.

Paste your App API Key into the API key field

The plugin validates the key against Customer.io's Design Studio folders endpoint — if the key is wrong, in the wrong region, or doesn't have Design Studio access you'll see an error here

Your API key is stored locally in the plugin so you only have to enter it once per region.

Step 3: Fill in Your Email Details

Enter the Subject line for the email

Enter the Preheader text (the snippet that shows up in the inbox preview)

Optional: toggle Overwrite existing template if you want to update an email that already exists in Design Studio rather than create a new one

The email's name in Design Studio is taken from your Figma frame name, so rename the frame before exporting if you want it to show up with a specific title.

Step 4: Export to Customer.io

Click Export

The plugin uploads each image in your design to Customer.io's asset library (POST /v1/assets/files), rewrites the HTML to point at the hosted asset URLs, then creates the email in Design Studio (POST /v1/design_studio/emails)

You'll see progress for image upload and email creation in the plugin

On success you get a confirmation toast — your email is now live in Customer.io Design Studio

If you toggled Overwrite existing template, the plugin uses PUT /v1/design_studio/emails/:id instead, which creates a new version of the existing email in Customer.io.

Step 5: Use Your Email in a Campaign or Broadcast

Log into Customer.io and go to Design Studio → Emails

Find the email you just exported (it'll be at the top of the list, named after your Figma frame)

Use it in any campaign or broadcast like you would any other Design Studio email

Editing Your Email in Customer.io

You can edit the email directly in the Design Studio editor in Customer.io. For larger design changes we recommend editing in Figma and re-exporting with Overwrite existing template turned on, so your Figma file stays the single source of truth.

What the Plugin Does for You

Hosts your images on Customer.io's CDN via the /v1/assets/files endpoint (BMP, JPEG, PNG, GIF supported, 3MB per file max)

Inserts the unsubscribe token — the Email Love Footer's unsubscribe link is replaced with Customer.io's {{unsubscribe_url}} token automatically

Generates responsive, deliverable HTML that renders consistently across major email clients

Region-aware — calls the US or EU Customer.io API based on what you select

Troubleshooting

"Invalid API key" or 401/403 errors: Double-check that you're using an App API Key, not a Tracking API Key. Also confirm the Region in the plugin matches your Customer.io workspace (US vs EU). App API keys are created in Settings → API Credentials → App API keys.

Images not appearing in Customer.io: Each image must be under 3MB and in a supported format (BMP, JPEG, PNG, or GIF). If a single image fails, the rest of the export still goes through — check the browser console for which image failed and re-export.

"Overwrite existing template" didn't update my email: The toggle only updates an email the plugin previously created from this Figma frame. If you renamed the frame or are pointing at a different Customer.io workspace, the plugin will create a new email instead.

Unsubscribe link not working: Make sure your design includes an Email Love Footer with an Unsubscribe link. Without one, the plugin has nothing to swap Customer.io's {{unsubscribe_url}} token into.

Email shows up but content looks broken: Re-export rather than editing the HTML directly in Customer.io. For ongoing changes, treat Figma as the source of truth and use Overwrite existing template to push updates.

Need help? Join our Discord community or reach out to our support team at hello@emaillove.com for assistance.

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