Creating and Managing Iterable Snippets with Email Love – Email Love

Iterable Snippets let you create reusable content blocks — headers, footers, CTAs, legal disclaimers — that update everywhere at once. Change a snippet in Iterable, and every template that references it gets the update automatically. The Email Love Figma Plugin connects directly to Iterable's Snippet API, so you can design these reusable blocks in Figma and export them without touching code.

This guide walks through the full workflow: designing snippets in Figma, exporting them to Iterable, and referencing them in your email templates.

Why Use Snippets?

Without snippets, updating a shared element like a footer means editing every single template that uses it. For teams managing dozens or hundreds of templates, that's a maintenance nightmare.

Snippets solve this by turning repeated content into a single source of truth. Common use cases include:

Headers and navigation bars — keep branding consistent across all campaigns

Footers — update legal text, social links, or unsubscribe language in one place

Promotional banners — swap seasonal offers across your entire template library with one edit

Legal disclaimers — ensure compliance language is always current

Social media blocks — add or remove social channels without touching individual templates

Prerequisites

Before you begin, make sure you have:

An active Email Love Figma Plugin subscription

An Iterable account with API access

Your reusable content section designed in Figma

Step 1: Design Your Snippet in Figma

A snippet is any reusable section of an email — a header, footer, banner, or any block you want to maintain centrally.

Create a new Email Love frame in Figma (or use an existing one)

Build your reusable section inside the frame using Email Love components

Name your frame carefully — the frame name becomes your snippet name in Iterable

Design tips for snippets:

Keep snippets self-contained. A header snippet should include everything from the top logo through the navigation links.

Consider how the snippet will look across different templates. Design it to work with various content widths and color schemes.

If your snippet uses custom fonts or colors, make sure they match your broader email design system.

Step 2: Export Your Snippet to Iterable

Select the frame containing your snippet design

Click the Export button in the top right corner of the Plugin interface

Select Iterable Snippet from the dropdown menu

If you haven't connected your Iterable API key yet, click "Change API Key" and follow the API setup steps (see the Upload your email to Iterable guide for detailed API key instructions)

Click Upload to export your snippet to Iterable

Important: The Snippet API connection is separate from the Template API connection. Even if you've already connected your Iterable API key for template exports, you'll need to connect it again for snippets.

Step 3: Find Your Snippet in Iterable

Log into your Iterable account

Navigate to Content → Snippets

Your newly exported snippet will appear in the list with the same name as your Figma frame

Click on the snippet to preview it and copy the reference code

The reference code looks like this: {{snippet "your-snippet-name"}}

Copy this — you'll need it in the next step.

Step 4: Reference Your Snippet in an Email Template

Now that your snippet lives in Iterable, you can drop it into any email template using the Raw Code Component in the Email Love plugin.

Open the email template in Figma where you want to use the snippet

In the Email Love plugin, scroll to the bottom of the component list on the left side

Click on Code (the last option in the list)

A Raw Code Component will be added to your design

Paste your snippet reference code ({{snippet "your-snippet-name"}}) into the code field

Export your template to Iterable using the standard export process

When you preview your template in Iterable, the snippet reference will be replaced with the actual snippet content.

Tip: For more about using the Raw Code Component, see the Using the Raw Code Component guide.

Handling Custom CSS in Snippets

If your snippet uses custom CSS (such as custom fonts, animations, or media queries), that CSS needs to live in the email's <head> section — not inside the snippet itself.

Here's how to handle this:

Export your snippet section as a full email first (not as a snippet)

Copy the CSS from the <head> section of the exported HTML

In the Email Love plugin, go to the Properties section of your email template

Paste the CSS into the head section field

Now export your template — the CSS will be included in the <head>, and your snippet will render correctly

This extra step is only needed for snippets that rely on custom CSS. Standard text, images, buttons, and layout components work without it.

Updating a Snippet

One of the biggest advantages of snippets is centralized updates. There are two ways to update a snippet:

From Figma (recommended):

Make your design changes in Figma

Export the updated snippet using the same process as Step 2

The new version will overwrite the existing snippet in Iterable

All templates referencing that snippet will automatically display the updated content

Directly in Iterable:

Go to Content → Snippets in Iterable

Click on the snippet you want to edit

Make your changes in Iterable's editor

Save the snippet

Pro tip: If you maintain your design source of truth in Figma, always update snippets from Figma to keep your designs and live templates in sync. Editing directly in Iterable can cause your Figma designs to drift from what's actually deployed.

Managing Multiple Snippets

As your snippet library grows, keep things organized:

Use a clear naming convention — prefix snippet names with their type (e.g., header-primary, footer-legal, banner-promo-q1)

Keep a Figma page dedicated to snippets — create a separate page in your Figma file for all snippet designs so your team knows where to find and update them

Document which templates use which snippets — a simple spreadsheet or Notion table linking snippets to templates helps your team understand the impact of changes

Snippets vs. Full Template Exports

When should you use a snippet versus exporting a full template?

Use snippets when:

The content appears in multiple templates (headers, footers, navigation)

You need to update the content centrally without re-exporting every template

Your team wants to mix and match sections across campaigns

Use full template exports when:

The email is a one-off campaign with unique content throughout

Every section is specific to that template

You don't need centralized update management

Most teams use a combination: full template exports for the email body with snippet references for shared elements like headers and footers.

Need help? Contact Email Love support at support@emaillove.com or join our Discord community.