> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Export Figma emails to Braze

> Connect your Braze account and export email designs from Figma as Braze templates, including content blocks and in-place updates.

The Email Love Figma plugin streamlines the process of exporting your email designs directly to Braze, eliminating manual HTML transfers and maintaining design integrity. The plugin automatically handles responsive coding, unsubscribe links, and localization tags.

<iframe width="100%" height="400" src="https://www.youtube.com/embed/_1hKaj6rL9s" title="Upload your email to Braze" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## Export Process

<Steps>
  <Step title="Prepare your design">
    * Finalize your email design
    * Select the frame you want to export
    * Ensure you're using an Email Love Footer with an Unsubscribe link (required for export)
  </Step>

  <Step title="Access export options">
    * Click the "Export" button in the top-right corner of the plugin
    * Select "Braze" from the dropdown menu
  </Step>

  <Step title="Configure Braze connection (first-time setup)">
    **API Key Setup:**

    * Click "Change API Key"
    * In Braze, go to Settings > API & Identifiers
    * Click "New API Key"
    * Name your key and select "Templates" under Permissions
    * Click "Create API Key"
    * Copy the API key to the Email Love plugin and click "Set API Key"

    **Instance ID Setup:**

    * Click "Change Instance ID"
    * Select your Braze instance ID from the dropdown
    * Not sure about your instance ID? [Read the Braze documentation](https://www.braze.com/docs/user_guide/administrative/access_braze/sdk_endpoints)
  </Step>

  <Step title="Export options">
    * **Localization:** Check "Add localization tag" to automatically wrap text with Braze translation tags
    * **Template naming:** Enter a name for your email template in Braze
  </Step>

  <Step title="Complete export">
    * Click "Export to Braze" button
    * The plugin will convert your design to responsive HTML and send it to your Braze account
    * Your new template will appear in Braze under Templates > Email Templates
  </Step>
</Steps>

## Advanced Features

* **Automatic token integration:** Braze unsubscribe tokens are automatically merged into your footer
* **Translation support:** Enable localization tags for multilingual campaign support
* **Responsive design:** All exports are optimized for mobile and desktop viewing

<img src="https://mintcdn.com/emaillove/zdvKWcm2hTqSKqVZ/images/plugin/export/braze-1.png?fit=max&auto=format&n=zdvKWcm2hTqSKqVZ&q=85&s=565b07423512e8bb38a42841b6ca146d" alt="Plugin export panel configured for Braze with API key, instance ID, and localization options" width="390" height="505" data-path="images/plugin/export/braze-1.png" />

## Apply Braze Translation Tags to your email

The Email Love Figma Plugin offers seamless localization capabilities when exporting to Braze, automatically wrapping all HTML text content with Braze translation tags. This feature eliminates the need to manually apply translation tags in Braze, saving significant time for teams managing multilingual email campaigns.

<iframe width="100%" height="400" src="https://www.youtube.com/embed/eR2UfPy9I2E" title="Apply Braze translation tags with the Email Love plugin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## How It Works

<Steps>
  <Step title="Design your email in Figma">
    Design your email using the Email Love plugin in your primary language (typically English, but can be any language).
  </Step>

  <Step title="Export to Braze with localization">
    * Click the "Export" button in the Email Love plugin
    * Select "Braze" from the dropdown menu
    * Check the "Add localization tag" box
    * Click "Export"
  </Step>

  <Step title="Review in Braze">
    * Your email HTML will be generated with Braze translation tags (`{% translation %}`) automatically wrapped around all text content
    * Each text element receives a unique ID for translation tracking
    * Translation tags are applied to headings, paragraphs, buttons, and footer text (but not text within images)
  </Step>

  <Step title="Set up localization in Braze">
    * Navigate to your campaign in Braze
    * Add desired locales (e.g., French, German)
    * Save as draft
  </Step>

  <Step title="Translate using your preferred tool">
    * Connect your translation service (Smartling, Localize, Crowdin, etc.) with Braze
    * Select your campaign for translation
    * Request translations using your service's workflow
  </Step>

  <Step title="Preview multilingual versions">
    * In Braze, use the "Multi-language user" option in the preview
    * Select different languages to review translations
  </Step>
</Steps>

## Edit your email inside of Braze

Once you have exported your email, you can navigate to Templates > Edit Templates > Edit Message. Inside of the template editor you will have the option to either edit your email HTML or use a Rich Text editor when you click on the "Classic" tab.

## Export a Braze Content Block

In addition to exporting full email templates, you can also export individual sections of your email as Braze Content Blocks. Content blocks are reusable HTML snippets that can be inserted into multiple email templates within Braze. Perfect for shared headers, footers, promotional banners, or any component you want to manage in one place.

### How to Export a Content Block

<Steps>
  <Step title="Frame your content">
    In Figma, place the content you want to export as a content block into its own frame.
  </Step>

  <Step title="Select the frame">
    Select the frame.
  </Step>

  <Step title="Open the export panel">
    In the plugin, click the **Export** button.
  </Step>

  <Step title="Pick Braze Content Block">
    Select **Braze Content Block** from the export dropdown.
  </Step>

  <Step title="Name your content block">
    Enter a name for your content block.
  </Step>

  <Step title="Export">
    Click **Export to Braze Content Block**. Your content will be uploaded to Braze as a content block, ready to be inserted into any email template.
  </Step>
</Steps>

### Important Notes About Content Blocks

* **Head tags are removed:** When exporting as a content block, the plugin strips out the `<head>`, `</body>`, and `</html>` tags. The export is essentially just the HTML for that section, not a full email document.
* **CSS considerations:** Because the `<head>` is removed, any CSS that would normally live in the head of the email (such as `@media` queries or embedded styles) will not be included in the content block. If your content block relies on CSS from the head, you will need to extract that CSS and add it directly to your email template in Braze.
* **Best for single-column content:** Content blocks generally work best with single-column layouts. Multi-column content may require additional testing to ensure it renders correctly when inserted into different templates.
* **Reusability:** Once uploaded, you can insert the content block into any Braze email template using Braze's content block insertion tool or by referencing it with Liquid: `{{content_blocks.${your_block_name}}}`.

## Troubleshooting

**Export fails or times out:** Verify that your API key has "Templates" permission enabled and that your Instance ID is correct. If you recently created the key, wait a moment before retrying.

**Template not appearing in Braze:** Navigate to Templates > Email Templates and refresh the page. Templates sometimes take a few seconds to appear after export.

**Translation tags not applied:** Make sure the "Add localization tag" checkbox is enabled before clicking Export. Tags are only applied to text content. Images and code blocks are not tagged.

**Images not loading in Braze preview:** The plugin hosts images automatically during export. If images appear broken, try re-exporting or check the [Image Hosting](/plugin/images/hosting) article for details.

## Related Articles

* [Export Overview](/plugin/export/overview): Understand all export options and how the plugin converts your Figma design to HTML
* [Translate Braze Templates with Smartling](/plugin/export/translation/braze-smartling): Complete translation workflow for Braze emails

<img src="https://mintcdn.com/emaillove/zdvKWcm2hTqSKqVZ/images/plugin/export/braze-2.png?fit=max&auto=format&n=zdvKWcm2hTqSKqVZ&q=85&s=b7c9af173e0f7968ed022704a0c7ade7" alt="Braze template editor showing an email exported from the Email Love plugin" width="1578" height="1388" data-path="images/plugin/export/braze-2.png" />