The Email Love Figma Plugin connects directly to BlueShift, letting you export professionally designed emails from Figma straight into BlueShift Templates. Stop re-building your Figma designs in HTML or in a drag-and-drop builder and cut your email production time in half.
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 BlueShift.
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. Please note, you will need to use an Email Love Footer with an Unsubscribe link for the export to work. We will automatically merge in the BlueShift Unsubscribe token.
- Click the Export button located in the top right corner of the Plugin interface.
- On the Export page, select "BlueShift" from the dropdown menu.
- If you have not added your BlueShift API key, click "Change API Key."
- Login to your BlueShift Account and navigate to Account Settings > API Keys.
- Click on "User API Key."
- Copy the API key to your clipboard.
- Paste your API key into the "BlueShift API Key" box in the Email Love Figma Plugin.
- Give your API key a name (useful if you have multiple BlueShift accounts or brands).
- Select which region your API key uses (US or EU).
- Click the "Set API Key" button.
- Click the "Export to BlueShift" button at the top of the plugin.
- Navigate back to Templates > Email Templates in BlueShift to find your email.
Customizing your email before export
The Email Love Figma Plugin lets you configure all the details you'd normally set up in your ESP directly within Figma:
Images: Select any image and use the Properties tab to add the image URL, alt text, or override the image source for dynamic content (Movable Ink, Nifty Images, countdown timers, etc.).
Buttons: Select any button and add the destination URL in the Properties tab.
Personalization: Add BlueShift merge tags like {{user.firstname}} directly in your text layers.
Mobile styles: Select any element and go to Mobile Styles to hide on mobile/desktop, adjust padding, or change font size, line height, and alignment.
Previewing your email
Before exporting, use the Preview tab to check your email on desktop, mobile, and dark mode. The Appearance tab lets you customize light and dark mode rendering settings, including iOS-specific dark mode behavior and Google font fallbacks.
Edit your email inside of BlueShift
Once you have exported your email, you can navigate to Templates > Email Templates inside of BlueShift where you can then send it to your recipients or edit the content directly in the HTML.
Powered by