The Email Love Figma Plugin supports Customer.io, letting you export your email designs from Figma and bring them into Customer.io as layouts. While the current workflow uses copy-paste (API integration is coming soon), the plugin handles image hosting, responsive HTML generation, and automatic unsubscribe token insertion so you can focus on design.
Prerequisites
Before you begin, make sure you have:
- An active Customer.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 (required for export)
Step 1: Export Your HTML from the Plugin
- Select the email frame you want to export in Figma
- Click the Export button in the top right corner of the plugin
- Select "Customer.io" from the dropdown menu
- Click "Copy Customer.io code" to copy the HTML to your clipboard (or click Download to save it as a file)
The plugin automatically hosts your images and inserts Customer.io's unsubscribe merge tag into your footer.
Step 2: Create a Layout in Customer.io
- Log into your Customer.io account
- Navigate to Content > Email Layouts
- Click "Create layout" and then "Start from scratch"
- Give your layout a descriptive name (e.g., "February Newsletter Template")
Step 3: Add Your HTML to the Layout
- In the layout editor, delete the existing HTML but keep the
{{content}}merge tag — this is required by Customer.io for message content
- Click "Save" to create the layout
- Click "Edit layout" again
- Paste your Email Love HTML above the
{{content}}merge tag
- Click "Save" and then "Done editing"
Important: The {{content}} merge tag must remain in your layout. Customer.io uses it to inject campaign or broadcast content into the layout. Always place your Email Love HTML above this tag.
Step 4: Use Your Layout in a Campaign or Broadcast
- Navigate to Campaigns or Broadcasts in Customer.io
- Create a new message
- Select Email as your channel
- Click "Upload content"
- In the Code section, select your layout from the list
- Click "Create email"
Your email is now ready to send through Customer.io campaigns and broadcasts.
Editing Your Email in Customer.io
Once your HTML is in a layout, you can edit it in two ways:
In the layout editor: Navigate to Content > Email Layouts, find your layout, and click "Edit layout" to modify the HTML directly.
In the campaign editor: When creating a campaign, you can make content-level edits after selecting your layout.
For significant design changes, we recommend editing in Figma and re-exporting rather than modifying the HTML directly. This keeps your Figma file as the single source of truth for your email design.
Troubleshooting
Images not loading: The plugin hosts images automatically during export. If images appear broken after pasting into Customer.io, try re-exporting from the plugin. See Image Hosting for more details.
Unsubscribe link not working: Make sure your design includes an Email Love Footer with an Unsubscribe link. The plugin replaces this with Customer.io's {{unsubscribe_url}} token during export.
Layout looks different in Customer.io: If the email renders differently than expected, check that you pasted the complete HTML and that the {{content}} merge tag is positioned below your pasted code, not inside it.
Email content not appearing in campaigns: Make sure the {{content}} merge tag is still present in your layout. Without it, Customer.io cannot inject campaign content into the layout.
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
- Send with Confidence Using Copilot — Scan your email for issues before exporting
Powered by