How to export HTML emails from Figma to Brevo using Emailify

Video Transcript

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

To get started, all we need to do is go to your Figma file and click on the little “Resources” icon up here. If you just search for “Emailify” and click on the “Plugins” tab, then click on the Emailify result that pops up, you’ll be able to run the Figma plugin by either clicking on this run button here. Alternatively, I’d recommend clicking on this more options icon here and clicking on Save. That’s just going to save it to your Figma plugins list for easy access later.

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

If you’re new to the Figma plugin, it allows you to design HTML emails in Figma and then export those to production-ready code directly from the Figma plugin. You just add a new frame and start populating that frame with a bunch of preset components. You can then customize and tweak the content and styles according to your brand or the content you need to include.

I won’t be going through a detailed tutorial on that today. If you’re interested in how to design the emails, there are a bunch of other tutorials on the YouTube channel that you can check out. Today, I’m really just going to be focusing on uploading some HTML emails that you’ve already designed in Emailify and getting those into the Brevo platform using the Brevo API.

To do that, we can basically finalize our email. I’m going to add a little footer down here. Then, we can get started to upload this to Brevo using the Emailify option for that platform.

First, we click on the export HTML button in the Figma plugin. Instead of the HTML email option, which is the default, we’re going to open the platform Integrations. Find the Brevo option (previously Sendinblue, recently rebranded). Click on the “Brevo” option, and then we’ve got a couple of new options down here. Now, we basically need to get our API key from Brevo and our sender email as well.

Clicking on these two links will open up some browser tabs with the account pages of where to find those details. As long as you’re logged into your Brevo account, clicking on the API Keys link will take you to this page. Click on the generate a new API key button. In this case, I’m just going to give it a name like “Emailify Figma plugin” and hit generate. That’s going to create a brand new Brevo API key for us. We only get to copy this once, so make sure you copy that to your clipboard by clicking on this little copy icon here and then pasting it in the Figma plugin API key field.

The other tab that opens is the senders tab. The senders tab is where you’ve got your approved email addresses to send emails from. In this case, I’m just going to use my sender that I’ve got in the account and paste that into the sender input field.

Now that we’ve got those two details in there, all we need to do is select the emails that we want. I’ve only got one in this case, so I’ll give it a subject line like “test subject” and add some pre-headed text as well if I want to. Once I’m ready to go, I can click on the upload to Brevo button here.

That’s basically going to start exporting the production-ready HTML, upload any images, and then upload that entire template to your Brevo templates automatically. In a second, once it finishes, we can see that it’s saying that our Brevo templates have been uploaded. If we go to our program marketing templates page after logging in, we’ll be able to see them.

If we click on that link, it’s going to open up this templates page here. I’m just going to refresh that because I already had it open. Now that we’re refreshing the Brevo templates list, we can see here that we’ve got our example template. “Example” is coming from the frame name; our Figma frame is called “example” that we named it before in Emailify, and so the email template itself is also getting the example name.

What we can do is click on that now and if we open up that template, we should see a little preview. You can see here that our HTML exported from Figma is showing up as we’d expect. All of this is Rich Text, which is exactly what we want. We can see the mobile view, so this is the responsive version. I didn’t go through how to customize the mobile design in Emailify, but by default, it kind of works itself out anyway. You can add other overrides if you need to. Check out one of the other video tutorials for a good way of learning how to do that.

This is a really quick way of seeing what our template looks like in Brevo after we’ve uploaded it from Emailify. The other thing that we can do is now assign this to a marketing campaign. For example, if we go to the campaigns page in Brevo and open that up, I’ve got this draft campaign down here, which doesn’t yet have a design associated with it. What I can do is click on that test campaign, jump into the edit page, go down to the design step, click on this little three dots icon, and go to reset design. Just going to click yes to confirm that I want to get rid of whatever design was there, then I’m going to click on start designing.

This is what will usually come up the first time you create the campaign. Just click on start designing, go to my templates, and then go down to the template that you want to use. In this case, I’m just going to click use template on the example template that we just uploaded. That’s going to select that template as my campaign template.

The cool thing about that is we can then preview it. If you want to click on preview and test, you can send a test email to your own email address or a recipient on your mailing list. You’ll have a mailing list that you’ve selected, and you can select a recipient and send them a test. That can be really helpful as well if you want to see what the dynamic content looks like, if you’ve added any Dynamic tags like a hello tag that populates someone’s first name. You’ll be able to see what that looks like when you send out a test as well.

That’s basically what it looks like. That’s the quickest way to get your email from Figma into the Brevo platform if you’re using that to send out your HTML emails. This is going to be a really quick way of uploading your templates directly from Figma into Brevo. I’ll leave it there for today. I just wanted to keep that really quick to show you what that new integration looks like if you’re a Brevo user. Hopefully, that helps you and your team’s workflow. Thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.