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 Braze 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 Braze 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 Braze API Key

The first thing we need to do is grab an API key from Braze. 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

1. Log into your Braze account
2. Head to Settings → APIs and Identifiers
3. Click on the API Keys section

Create Your New API Key

1. Click Create New API Key
2. Give it a descriptive name (I usually go with “Email Love Figma Plugin”)
3. Scroll down to the Permissions section
4. Under Templates, check the box for Create New Template
5. Click Create API Key

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

Find Your Braze Instance

You’ll also need to know your Braze instance. This is usually visible in your URL (like EU02, US01, etc.). You can also find it in the REST endpoint link on the same page.

Step 2: Connecting the Plugin to Braze

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. You’ll see Braze as an option in the dropdown menu
4. Click Change API Key
5. Paste your API key from Braze
6. Give this connection a name (helpful if you work with multiple Braze accounts)
7. Select your Braze instance 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 Braze
3. Wait a couple seconds (grab a coffee if you want, but it’s pretty quick!)
4. You’ll see a “Successfully exported” message

Step 4: Find Your Template in Braze

Let’s confirm everything worked:

1. Go back to your Braze account
2. Navigate to Templates → Email Templates
3. Your new template will be at the top of the list

The template name will include your Figma frame name plus the date, 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. Create a new email campaign in Braze
2. When selecting your template, you’ll find your newly exported design at the top
3. Select it, and boom – 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 Braze 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 part of the template name in Braze, so “Homepage Hero Email” is much more helpful than “Frame 47.”

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

Keep your API keys organized – if you’re working with multiple Braze accounts or instances, 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 Braze 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.

Much love,
Andy

Email: [email protected]
Twitter: @emaillove