The Email Love Figma plugin supports four types of dynamic content that you can design in Figma and export to your ESP. This guide walks through each type, from basic merge tags to advanced looping content.
Important: Every ESP has slightly different syntax for personalization. The examples in this guide use MailerLite and handlebars syntax, but the concepts apply to all major platforms including Salesforce, Hubspot, Klaviyo, Braze, Iterable, and many more. Always reference your ESP's documentation for specific merge tag syntax.
1. Merge Tags
Merge tags are the simplest form of personalization. They pull in data you store in your ESP (like first name, product details, preferences, or purchase history) and insert it directly into your email.
How to Add Merge Tags
- In your Figma design, locate the text field where you want to add personalization
- Copy your ESP's merge tag syntax from your platform's documentation
- Paste the merge tag directly into the text field in Figma
- The plugin will preserve this code when you export
Example Syntax by ESP
MailerLite:
Hello {$name|default('kind email peeps')}
Klaviyo:
Hello {{ person.first_name|default:"there" }}
Mailchimp:
Hello *|FNAME:there|*
Braze (Liquid):
Hello {{ ${first_name} | default: 'there' }}
Iterable (Handlebars):
Hello {{#if firstName}}{{firstName}}{{else}}there{{/if}}
Salesforce Marketing Cloud (AMPscript):
Hello %%=IIF(NOT EMPTY(@firstName), @firstName, "there")=%%
Customer.io (Liquid):
Hello {{ customer.first_name | default: 'there' }}
All of these will:
- Display the subscriber's first name if available
- Fall back to a default value if the name field is empty
Pro Tip: Always include a default value in your merge tags. This ensures your email looks good even if you don't have that data for every subscriber. Get creative with your defaults instead of using boring phrases like "Hello there."
What You Can Merge
You can merge any data stored in your ESP:
- First name, last name, full name
- Product names or prices from abandoned carts
- Subscriber preferences
- Birth dates or anniversaries
- Custom fields specific to your business
2. If/Else Statements (Conditional Content)
If/else statements let you show different content blocks to different subscribers based on data you store about them. This is more advanced than merge tags because you're controlling entire sections of your email, not just individual text strings.
How to Add If/Else Statements
- Locate the Code Component at the bottom of the Email Love plugin panel
- Add your if/else logic using your ESP's templating language (handlebars, Liquid, Jinja, etc.)
- Drag the code component to wrap around the content you want to conditionally display
- Add an "else" code component for the alternative content
- Close the statement with a final code component
Two Ways to Use Code Components
Option 1: Wrap Entire Sections
Place code components above and below entire content sections to show/hide them based on conditions.
{{#if customer == 'pro_member'}}
[Content Section: Golden Gate Bridge]
{{else}}
[Content Section: Hot Air Balloon]
{{/if}}
Option 2: Wrap Individual Elements
Place code components inside a section to conditionally show/hide specific elements like images, text blocks, or buttons.
Example Use Cases
- Show premium content to paid subscribers
- Display different CTAs based on subscription tier
- Personalize product recommendations by location
- Show different messaging to new vs. returning customers
3. Dynamic Images
Dynamic images let you swap image URLs based on merge tags or external personalization services. The image displayed will change based on subscriber data or real-time content from your website.
How to Add Dynamic Images
- Select the image frame in Figma
- Open the Properties panel in the Email Love plugin
- Find the Override Image Source option
- Paste your dynamic image URL or merge tag
Example: Nifty Images Integration
Nifty Images is an image personalization tool that works great with Email Love. Here's how it works:
- Set up your dynamic image in Nifty Images (or similar tool)
- Copy the dynamic image URL
- Paste it into the Override Image Source field in Figma
- The plugin will use this URL in your exported HTML
The image will update automatically based on:
- Latest content from your website
- Subscriber location or preferences
- Real-time data like countdown timers
- Weather or stock availability
Use Cases for Dynamic Images
- Pull the latest blog post featured image
- Show location-specific store images
- Display personalized product recommendations
- Add countdown timers for sales
- Show real-time inventory or pricing
4. Looping Content (Catalog Data)
Looping content is the most advanced personalization type. It's commonly used with platforms like Iterable, Braze, and Salesforce Marketing Cloud to pull catalog data and repeat content blocks multiple times based on subscriber-specific information.
How Looping Works
Looping content pulls data from a catalog in your ESP and repeats a content block for each item assigned to that subscriber. For example:
- If a subscriber has 3 items in their cart, the content block repeats 3 times
- If they have 5 upcoming classes, it shows all 5
- If they have 10 recommended products, all 10 appear
How to Add Looping Content
- Add a Code Component at the start of your loop
- Insert your catalog logic (using handlebars or your ESP's syntax)
- Design the content that will repeat (text, images, buttons)
- Add a closing Code Component to end the loop
- Wrap this entire structure in a table or column
Example (Iterable/Handlebars Syntax)
{{#each catalogCollection}}
<h3>{{title}}</h3>
<p>{{details}}</p>
{{/each}}
This will pull all items from the specified catalog collection and display each one using your designed template.
Common Use Cases
- Order confirmation receipts showing all purchased items
- Abandoned cart emails with each cart item
- Personalized product recommendations from catalogs
- Event registrations showing all upcoming sessions
- Course enrollments listing all assigned classes
Important: The content inside the loop can include text, images, or buttons. The plugin treats it as a repeatable block that your ESP will populate with actual data at send time.
ESP-Specific Notes
Syntax Varies by Platform
Each ESP uses different templating languages. Reference the documentation below for your specific platform:
ESP | Templating Language | Documentation Link |
ActiveCampaign | Custom syntax | |
Blueshift | Liquid | |
Braze | Liquid | |
Customer.io | Liquid | |
Dotdigital | Liquid | |
Emarsys | Emarsys Scripting Language (ESL) | |
HubSpot | HubL (HubSpot Markup Language) | |
Iterable | Handlebars | |
Klaviyo | Django/Liquid | |
Loops | Custom syntax | |
Mailchimp | Custom syntax | |
MailerLite | Custom syntax | |
Marketo | Tokens & Velocity | |
MoEngage | Custom syntax | |
Sailthru | Zephyr | |
Salesforce Marketing Cloud | AMPscript | |
Zeta Global | Custom syntax |
How the Plugin Handles Dynamic Content
The Email Love plugin doesn't process or validate your personalization code - it simply inserts your templating language as raw code into the exported HTML.
This means:
- ✅ Works with any ESP's templating language
- ✅ Supports Handlebars, Liquid, Jinja, HubL, AMPscript, Velocity, Zephyr, and custom syntaxes
- ✅ You have complete control over your personalization logic
- ⚠️ You're responsible for using the correct syntax for your ESP
- ⚠️ Always test your personalization in your ESP before sending
Testing Your Personalization
After exporting your HTML from Figma:
- Import the HTML into your ESP
- Use your ESP's preview function to test personalization
- Send test emails to yourself with different data values
- Verify that merge tags pull correct data
- Check that if/else statements show the right content
- Confirm dynamic images load properly
- Test looping content with different numbers of items
Need Help?
If you run into issues or have questions about implementing personalization:
- Email us - Reach out directly for support
- Join our Discord community - Get help from other Email Love users and our team. This is the best place for real-time troubleshooting and tips from other marketers using the plugin
Powered by