The Email Love Figma plugin lets you design emails in Figma and export them as production-ready HTML directly into your OneSignal account. This guide walks you through the complete setup process.
Prerequisites
Before you begin, make sure you have:
- An active OneSignal account
- The Email Love Figma plugin installed
- At least one email designed in Figma using the plugin
- Email messaging enabled in your OneSignal app
Step 1: Get Your OneSignal API Credentials
You'll need two pieces of information from OneSignal to connect the plugin: your App API Key and your App ID.
- Log into your OneSignal dashboard
- Select the app you want to export templates to
- Navigate to Settings > Keys & IDs
- Copy your App ID
- Copy your App API Key
Not sure where to find these? Read the OneSignal documentation on Keys & IDs.
Important: Keep your API credentials secure. Do not share them publicly or commit them to version control.
Step 2: Connect OneSignal to the Email Love Figma Plugin
Now you'll connect your OneSignal account to the plugin using the credentials you just copied.
- Open Figma and navigate to your email design
- Select your email frame
- Launch the Email Love Figma plugin
- Click the Export button
- From the dropdown menu, select OneSignal
- Paste your App API Key
- Paste your App ID
- Give this connection a name (helpful if managing multiple OneSignal apps)
- Click Set API Key
The plugin will validate your credentials against the OneSignal API. You'll see a "Validating OneSignal..." message while this happens. Once validated, your credentials are securely encrypted and stored.
Your OneSignal account is now connected to the plugin.
Managing multiple accounts: You can save multiple OneSignal API key sets and switch between them — useful if you manage different OneSignal apps for different brands or clients.
Step 3: Export Your Email Template
Once connected, exporting emails to OneSignal takes just a few seconds.
- With your email frame selected, click the Export button
- Select OneSignal from the dropdown
- Enter a name for your email template
- Click Export to OneSignal
- Wait a few seconds for the upload to complete
- You'll see a success message when the export is finished
The plugin converts your Figma design to responsive HTML and uploads it directly to your OneSignal templates library.
Step 4: Access Your Template in OneSignal
Your exported email will appear in your OneSignal templates.
- Log into your OneSignal dashboard
- Navigate to Messages > Templates
- Your newly exported template will appear in the list
- Click on the template to preview or edit it
You can now use this template when creating email campaigns in OneSignal.
Using Your Template in Campaigns
To send an email using your exported template:
- In the OneSignal dashboard, go to Messages > New Message
- Select Email as the message type
- Choose your exported template from the template picker
- Configure your audience, scheduling, and delivery options
- Send or schedule your campaign
Personalization with Liquid Tags
OneSignal templates support Liquid syntax for dynamic personalization. You can use personalization tags in your Figma design before exporting, and they'll be preserved in the HTML output.
Common OneSignal personalization tags include:
{{ first_name | default: "there" }}— User's first name with a fallback
{{ email }}— User's email address
To add personalization tags in Figma, simply type the Liquid tag directly into your text layers. The plugin will preserve them during export.
Troubleshooting
Credential validation fails: If you see an error when setting your API key, double-check that both your App API Key and App ID are correct and that they belong to the same OneSignal app. You can verify them in your OneSignal dashboard under Settings > Keys & IDs.
Export fails or times out: Make sure email messaging is enabled in your OneSignal app settings. If you recently created your API key, wait a moment before retrying. Check your internet connection and try again.
Template not appearing in OneSignal: Navigate to Messages > Templates and refresh the page. Templates sometimes take a few seconds to appear after export.
Images not loading in preview: The plugin hosts images automatically during export. If images appear broken, try re-exporting or check the Image Hosting article for details.
Personalization tags not rendering: Liquid tags only render when the email is sent to actual users. Use OneSignal's preview feature with a test user to verify your personalization.
Need Help?
If you have questions about the OneSignal integration, reach out to us at support@emaillove.com.
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
- Personalize Your Email Content — Add dynamic content and personalization to your emails
Powered by