Supported by

If you’re tired of designing something beautiful in Figma and then wasting hours recreating it in a drag-and-drop tool or wrestling with HTML (and honestly, who isn’t?), this integration is going to save you serious time. Let’s dive into how you can design beautiful emails in Figma and export them as responsive, accessible HTML directly into your Iterable account.

What You’ll Need Before We Start

Before we jump in, make sure you have:

• A Figma account with the Email Love plugin installed
• Admin access to your Iterable account (you’ll need to create API keys)
• A designed email ready to export in Figma

Got all that? Perfect. Let’s get started.

Step 1: Setting Up Your Iterable API Key

The first thing we need to do is grab an API key from Iterable. This is what allows our plugin to securely connect to your account and create templates.

Here’s how to set it up:

Navigate to API Settings

• Log into your Iterable account
• Head to Integrations → API Keys
• Click on the green API Keys button

Create Your New API Key

• Give it a descriptive name (I usually go with “Email Love Figma Plugin”)
• Select “Server Side” as the type of API key
• Click Create API Key
• Copy the API key that appears

That’s it! You’ll see your new API key appear – we’ll need this in just a minute.

Select Your Iterable Region You’ll also need to know whether you’re using Iterable’s US or EU API. This is typically determined by where your account was set up and can be confirmed with your Iterable team if you’re unsure.

Step 2: Connecting the Plugin to Iterable

Now let’s hop back into Figma and connect everything:

1. Open your designed email in Figma
2. In the Email Love plugin, click on the Export tab
3. Select Iterable from the dropdown menu
4. Click Change API Key
5. Paste your API key from Iterable
6. Give this connection a name (helpful if you work with multiple Iterable accounts)
7. Select your Iterable region (US or EU) from the dropdown
8. Click Set API Key

Step 3: Export Your Email

This is the fun part – watching your design become a live template:

1. Select the email frame you want to export
2. Click Export to Iterable
3. Wait a couple seconds (grab a coffee if you want, but it’s pretty quick!)
4. You’ll see a “Request complete” message

Step 4: Find Your Template in Iterable

Let’s confirm everything worked:

1. Go back to your Iterable account
2. Navigate to Content → Templates
3. Your new template will appear in the list
4. The template name will match your Figma frame name, making it easy to identify which template is which (because let’s be honest, we’ve all been there with “Email Template v47 Final FINAL”)

Step 5: Use Your Template

Now for the payoff – using your beautiful design:

1. Open your new template in Iterable
2. You can edit content directly in the rich text editor if needed
3. Set up your campaign details
4. Your responsive, accessible email is ready to customize and send

Why This Integration Matters

Look, I’ve been in email marketing for over 15 years, and I can’t tell you how many hours I’ve watched teams waste recreating designs from scratch or copying HTML between tools. This integration eliminates that friction entirely.

But it’s not just about saving time (though you’ll save a lot of it). This approach gives you something even more valuable: freedom.

When you design and store your email templates in Figma, you’re not locking all your content into your ESP. Think about it – if you ever need to migrate from Iterable to another platform, or if you want to use the same design across multiple ESPs, you’re not stuck. Your source of truth lives in Figma, where you can easily edit and export it again to wherever you need it.

I’ve seen too many teams get trapped by proprietary drag-and-drop builders. Sure, they’re convenient at first, but try moving 50+ email templates to a new platform when your company gets acquired or your ESP pricing changes. Not fun.

With this workflow, your designers work in the tool they love (Figma), your developers get clean, responsive code, and your email marketers can focus on strategy instead of fighting with HTML. Plus, you maintain complete ownership and portability of your email designs.

Everyone wins, and you’re never locked in.

Pro Tips for Success

Name your Figma frames thoughtfully – whatever you call your frame becomes the template name in Iterable, so “Welcome Series Email 1” is much more helpful than “Frame 47.”

Test in Iterable first – while our plugin generates solid, tested HTML, always preview and test your emails in Iterable before sending to ensure everything looks perfect with your data.

Keep your API keys organized – if you’re working with multiple Iterable accounts or regions, give each API key connection a clear, descriptive name.

What’s Next?

This integration is just one way we’re working to streamline email production workflows. The Email Love Figma plugin includes 40+ pre-built email components, image hosting, and integrations with other major ESPs too.

If you’re not already using the plugin, you can start with our free trial and see how it fits into your workflow.

Need Help?

We’ve got loads of Iterable customers using this integration successfully, so if you run into any issues or have questions about setting this up for your team, just reach out. I’m always happy to help troubleshoot or walk through the setup on a quick call.

The goal here is to make email production faster and more enjoyable for everyone involved – because when the tools work smoothly, you can focus on creating emails that actually move the needle for your business.

Want more email marketing tips and tools? Subscribe to our newsletter for weekly insights from the Email Love team.

Build it faster: the Email Love Figma to HTML email plugin turns your Figma designs into production-ready HTML email you can export to any ESP in minutes.

Much love,
Andy

Email: [email protected]
Twitter: @emaillove