Uploading your emails to Braze

Emailify includes a built-in integration with Braze, which lets you upload HTML emails directly from the Figma plugin directly to your Braze templates.

Video Tutorial: Uploading your emails to Braze

This video walks through how to upload HTML emails from the Figma Emailify plugin to Braze.

In the Emailify export panel, select the Braze (API) option from the dropdown list, then paste in a valid Braze API key and REST endpoint region, which can be found and generated via your Braze dashboard page.

To create emails to braze, you’ll need a Braze API key with the templates.email.create permission enabled.

When you're ready, click the Upload To Braze button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Braze marketing templates; which you can view by logging into your Braze account, clicking the Templates sidebar item, clicking Email Templates, then clicking the HTML Editor option and browsing the Saved HTML Templates list below.

Important: Disable Inline CSS Setting ​

If the Braze Inline CSS setting is active in your Braze account, this will re-process your HTML by moving styles from a CSS stylesheet into the body of your HTML email, which has already been handled by Emailify, so if this toggle is enabled, it will strip out other styles and break part of your layout on mobile and desktop.

Please ensure that the Enable Inline CSS in the Sending Settings -> Advanced section is disabled. Emailify automatically inlines and minifies the HTML, and re-processing it in Braze will break the code.

To turn off Inline CSS for a single email, navigate to the Edit Sending Info -> Advanced tab of the Drag & Drop Editor in Braze and disable Inline CSS. This can also be set globally in Braze via Settings -> Email Preferences.

If you are using an older version of Braze, you can find the the Global Inline CSS toggle (to turn off) in Manage Settings -> Email Settings -> Inline CSS

Updating Braze Templates uploaded from Emailify ​

If you want to have your Braze templates automatically update instead of being created as new templates each time, you can optionally enable the Enable Updatable Templates toggle in the plugin's export settings (when the Braze (API) option is selected).

This will automatically append a brazeTemplateId value to the Figma frame's layer name that was uploaded, and then re-use that ID when the same frame is re-uploaded to Braze via the API upon the next export from the plugin.

Note, you will need to ensure the Enable Updatable Templates toggle is also enabled prior to uploading your initial template, as this will append the Braze Template ID of the original template that's uploaded to Braze into your FIgma frame name; this ID will then be used for any future re-uploads to update that same template in your Braze account (instead of creating a new one each time), provided that the Enable Updatable Templates toggle remains enabled, too).

To update emails in Braze, you’ll need a Braze API key with the templates.email.update permission enabled.

To turn any of your Emailify links into a universal link for SparkPost, you can add [[data-msys-sublink='open-in-app']] to the end of your URL (for example, http://www.example.com[[data-msys-sublink='open-in-app']]), which will automatically include that data-msys-sublink data attribute in your <a> link tag (for example, <a href="https://example.com" data-msys-sublink="open-in-app">).

Then, make sure your app is set up to handle the custom path properly. Refer to SparkPost’s article on Using SparkPost click tracking on deep links. This article contains example code for iOS and Android.

To turn any of your Emailify links into a universal link for SendGrid, you can add [[universal='true']] to the end of your URL (for example, http://www.example.com[[universal='true']]), which will automatically include that universal data attribute in your <a> link tag (for example, <a href="https://example.com" universal="true">).

Then, make sure your app is set up to handle the custom path properly. Refer to SendGrid’s article on Using SendGrid click tracking on deep links. This article contains example code for iOS and Android.