How to export HTML emails from Figma to Braze using Emailify

Video Transcript

Today, I’m going to be showing you how to automatically upload your HTML email designs from Figma to the Braze email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file. Click on the “Resources” icon at the top here, and if you search for Emailify, and if you click on the Emailify results under the “Plugins” tab, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this little “Save” icon here, which will save it to your Figma plugins list for easy access.

I’ve already done that, so I’m going to go to my canvas. I’m just going to right-click anywhere, go down to “Plugins,” go down to “Saved plugins,” and then click on the “Emailify” item, and that’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically helps you to design HTML emails directly in Figma, which you can then export to production-ready HTML code with one click when you’re finished.

I’m not going to go through all of the design features of the Figma plugin today. I’m just going to be assuming that you’ve already familiarized yourself with that with some of the other Figma tutorials on the YouTube channel for Emailify, and I’m just going to assume you’ve got your template ready to go.

The last thing I’m going to add to mine here is just go to the footer tab. I’m just going to click on the Braze footer, and that’s just going to make sure that the unsubscribe link is included automatically. So we’ve got our little navigation component, the link setting. If you click on the HTML and mobile settings, you can see that the clickable link is set to the Braze unsubscribe URL.

Now we’re ready to go. Once we’re ready to export it to HTML, you can just click on this little export HTML button up here, and we’re going to change the platform from just HTML email, which just downloads it to your computer, to the “Platform Integrations” section.

And then we’re just going to click on Braze. So click on the Braze item, and then it’s going to ask for your Braze API key and your Braze endpoint. So you can click on this link to find out some more details about that. But basically, if you’re already logged into Braze, the way you can find these is if you just go to your dashboard, you can see down here that you’ve got your API endpoint. So the endpoint region is what we’re after. So you can see ours is fra-02.

In our Figma plugin, we’re just going to change this little endpoint selector and go down to fra-02. And then we’re going to go to our manage API Keys section. So if you click on manage API keys in Braze, that’s going to take you to a new page to create a new API key. So we don’t have any set up yet, so we’re going to click on the create new API key button over here.

And then all you need to do is give it a name. So in the API key name field in Braze, just put in Emailify or whatever label you want to give it. And for the permissions or scopes, we’re just going to scroll all the way down to templates and click on “templates.email.create”. So this is going to allow the API key to create a new template on your Braze dashboard. So we’re going to keep that one checked, and that’s all we need to select for now. So we’re going to go ahead and click on Save API key.

Once that creates your API key, you can see that it’s given the new listing with the Emailify name, and we’ve got our API key here. So all you need to do is click on this little copy button. So I’m just going to click copy. That’s going to copy it to my clipboard. And I’m also just going to preemptively go to our templates page. So if you go to templates, email templates, we’re going to leave that page open for when we come back in a second to check on it.

You can see here at the moment, I don’t have anything uploaded. So if I click on my HTML editor button up here, I’ve got no saved templates. So we’ll refresh that in a second. So with our copied API key, we’re just going to go to this little rest API key field in the Figma plugin, paste in your key there, and then you can either give the email a subject line. So we can give this a test subject. And then once you’re happy with that, just click on the upload to Braze button.

Once you click upload to Braze, this is going to automatically generate all of the HTML. It’s going to upload all of the images, and it’s going to now tell us that our Braze templates have been uploaded. So we can access them by going to our Braze account, going to this template sidebar item, which we just did, and click on email templates. So this is the page we’re on now, the email templates page, and then you just want to click on the HTML editor tab up here. So where it says select your editing experience, make sure you’ve got the HTML editor tab selected.

And you can see when we click that, it’s refreshing our saved HTML templates, and you can see that our test template, which is what we called it in Figma, the frame over here, has been uploaded. So if we click on that, that will load up the template. So you can see we’ve got our test template up here, and we’ve got our test subject. So that’s the subject line we added a minute ago in the Figma plugin. So it’s included the subject line, and of course, it’s also included the email body. So you can see here that it’s uploaded the email. We’ve got a bit of a screenshot of it, and now you can go ahead if you wanted to. You can preview and test that. So if you click on preview and test, that’ll let you preview it.

You can see this is all inline HTML, real HTML. It’s been uploaded, and you’re able to now test that to yourself or send a test to somebody else with pre-populated information from a certain user if you had any placeholder fields and stuff like that. So this is basically what it looks like. And yeah, if you click on the HTML mobile one, that’ll show you what it looks like on HTML on the mobile version, which matches up with the Figma plugin preview as well.

We didn’t go through that, but you can click on preview, and you can see here it’s matching up with the Braze preview. So yeah, that’s basically it for today. I just wanted to keep this really short. If you’re using the Braze email marketing platform, this is a really quick way of getting your HTML email templates from Figma into Braze using the Emailify Figma plugin with one click. So thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.