The Email Love Figma Plugin seamlessly integrates with Salesforce Marketing Cloud, allowing you to export your beautifully designed emails directly from Figma to your Marketing Cloud Templates. This integration streamlines your workflow and ensures brand consistency across all your email campaigns.
Export Instructions
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.
- Click the Export button located in the top right corner of the Plugin interface.
- On the Export page, select "Salesforce Marketing Cloud" from the dropdown menu.
First-Time Setup
If you haven't set up your Marketing Cloud integration yet, follow these steps:
Step 1: Configure Marketing Cloud API Integration
In the Email Love Plugin export panel, select Marketing Cloud (API) from the dropdown list, then follow these steps to set up your authentication credentials:
- Login to your Salesforce Marketing Cloud account
- Navigate to Marketing Cloud > Setup > Platform Tools ("Apps") > Installed Packages
- Click New to create a new package
- Enter a package name (e.g., "Email Love Plugin Integration") and description
- Select Enhanced Package functionality
- Click Save to create the package
Step 2: Add API Integration Component
- Under the Components section, click Add Component
- Select API Integration from the component types
⚠️ Important: Once added, API Integration components cannot be removed
- Choose Server-to-server integration as the integration type
Step 3: Configure Permissions
- Set the following permissions for your integration:
Channels:
- Emails: Read and Write permissions
Assets:
- Documents and Images: Read and Write permissions
- Saved Content: Read and Write permissions
Click Save to finalize the component configuration
Step 4: Retrieve Integration Credentials
After creating your API integration, copy the following credentials from your new integration:
- Client ID (example:
4dsdkh797iHkhkhh*6jgu6)
- Client Secret (example:
Hsdsdkhkdhfdhi7iuhjhhsd)
- REST Base URL (example:
https://subdomain.rest.marketingcloudapis.com/)
Step 5: Connect Email Love Plugin
- Open the Email Love Figma Plugin
- Navigate to the export settings
- Select Salesforce Marketing Cloud as your export destination
- Enter your integration credentials:
- Client ID
- Client Secret
- REST Base URL
- Give your connection a name
- Test the connection to ensure proper authentication
Exporting to Marketing Cloud
Once your integration is configured:
- Design your email in Figma using Email Love components
- Select the email frames you want to export
- Choose Marketing Cloud (API) as your export destination
- Click Export to Marketing Cloud
- Your emails will be automatically converted to HTML and uploaded as a template to Salesforce Marketing Cloud.
Additional features
The Email Love Figma Plugin includes advanced options for Salesforce Marketing Cloud (SFMC) that automatically add tracking and functionality tags to your exported HTML. These optional features help you leverage SFMC's built-in capabilities without having to manually edit code.
Alias Tags
What it does: Automatically adds alias attributes to your link tags using your Figma layer names, making it easier to track click performance in Marketing Cloud.
How it works: When you enable the Aliases toggle, the plugin looks at your Figma layer names and adds alias="Your Figma layer name" attributes to:
- Button links
- Image links
- Social icon links
- Navbar links
Example: If your button layer is named "Hero CTA Button" in Figma, the exported link will include alias="Hero CTA Button".
When to use it: Enable this option to automatically label your links for better click tracking and analytics. Pro tip: Use descriptive layer names in Figma (like "Shop Now Button" instead of "Button 1") for more meaningful tracking data.
Conversion Tags
What it does: Automatically marks all links in your email as conversion points for Marketing Cloud tracking.
How it works: When you enable the Conversions toggle, the plugin adds conversion="true" to every <a> tag in your exported HTML.
When to use it: Enable this option when you want to track all link clicks as conversions in your Marketing Cloud reporting.
Impression Tags
What it does: Automatically wraps sections of your email with impression tracking tags to measure content visibility.
How it works: When you enable the Impressions toggle, the plugin wraps any Row, Wrapper, or Hero layers with Marketing Cloud impression region tags:
Opening tag: %%=BeginImpressionRegion("your_figma_layer_name")=%%
Closing tag: %%=EndImpressionRegion()=%%
The impression region is automatically named based on your Figma layer name.
When to use it: Enable this option to track which sections of your email are actually viewed by recipients, helping you understand content engagement beyond just clicks.
Content Slots
What it does: Automatically adds Content Builder slot tags to your exported HTML, allowing you to drag and drop additional content blocks directly in the Marketing Cloud editor.
How it works: When you enable the Content Slots toggle, the plugin adds this code to your HTML:
<div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div>
When to use it: Enable this option when you want flexibility to add or swap content directly in Marketing Cloud without returning to Figma.
How to Enable These Options
- Open the Email Love Figma Plugin
- Select your email frame
- Choose Salesforce Marketing Cloud from the ESP dropdown
- Toggle on any combination of options you need:
- ☐ Content Slots
- ☐ Alias Tags
- ☐ Conversion Tags
- ☐ Impression Tags
- Export or copy your code
All enabled options will be automatically applied to your HTML output.
Troubleshooting
Common Issues:
- Authentication Failed: Verify your Client ID, Client Secret, and REST Base URL are correctly entered
- Permission Denied: Ensure all required permissions are enabled in your API Integration component
- Upload Failed: Check that your Marketing Cloud account has sufficient storage and permissions
Support
Need help? Contact our expert team through:
- Discord: Join our Discord support channel
- Email: Contact us via hello@emaillove.com with any questions
- Book a meeting with us: Put time on our calendar
Benefits of This Integration
- Streamlined Workflow: Design in Figma, deploy to Marketing Cloud instantly
- Brand Consistency: Maintain design system integrity across all campaigns
- Time Savings: Eliminate manual HTML coding and uploading
- Easy migration between platforms: Easily migrate to any marketing platform by not storing all of your emails inside of your ESP
- Expert Support: Backed by Email Love's experienced team
Powered by