Overview
Customer.io is a customer engagement platform for automated email, push, SMS and in-app messages. The Email Love Figma plugin connects to your workspace by API and rebuilds the email you designed in Figma in Design Studio, from native Design Studio components.
- Works with
- The Figma plugin and Email Love Builder
- Export type
- Editable Design Studio emails by API
- You need
- An App API key and your region (US or EU)
- Where it lands
- Design Studio > Emails
- Exporting again
- Creates a new version of the same email when the update toggle is on
What it does
- Builds the email from native Design Studio components, so your team can edit it in the Design Studio editor.
- Uploads your images to Customer.io’s asset library.
- Sets the subject line and preheader you enter in the plugin.
- Converts your unsubscribe link to
{{unsubscribe_url}}. - Keeps corner radius, borders, button padding, letter spacing, spacers, full-width backgrounds and navigation link styles.
How to export from Figma to Customer.io
In Customer.io, open Settings > API Credentials > App API keys and create a key.
In the plugin, choose Customer.io, pick US or EU and paste the key.
Enter the subject line and preheader. Turn on Enable Updatable Templates to update an email you exported before.
Click Export.
Find the email at the top of Design Studio > Emails, named after the Figma frame.
Email Love Builder and Customer.io
Email Love Builder exports to Customer.io too. Your marketers build emails from your approved components in the drag-and-drop editor, without opening Figma, and export them to the same Customer.io account.
Each component in the Builder is mapped to its Figma component, so your designers update it in Figma and re-sync it. See Email Love Builder.
Good to know
- Your workspace needs Design Studio access, and the App API key must be for the same region as the workspace. A Tracking API key will not work.
- Images must be BMP, JPEG, PNG or GIF, and under 3 MB each.
- Borders that differ on each side have no Design Studio equivalent, so they export as inline styles.
- Add an Email Love Footer with an unsubscribe link before you export.
Resources
FAQ
Can I export emails from Figma to Customer.io?
Yes. The Email Love Figma plugin connects to Customer.io with an App API key and rebuilds the email you designed in Figma as an editable email in Design Studio.
Can I edit the email in Customer.io Design Studio?
Yes. The plugin builds the email from native Design Studio components, so your team can edit it in the Design Studio editor.
Can I update a Customer.io email after I export it?
Yes. Turn on the update toggle and export the same Figma frame again. The plugin creates a new version of the email you exported before instead of a new email.
Does Email Love Builder work with Customer.io?
Yes. Email Love Builder works with Customer.io too, so your marketers can build emails from your approved components in the drag-and-drop editor and export them to the same account.
