How to export HTML emails from Figma to Sendinblue using Emailify

Video Transcript

Today I’m going to be showing you how to automatically upload your HTML email designs directly from Figma into the Sendinblue email platform. If you’re a user of the Sendinblue platform and you’d like to design your emails in Figma and automatically upload them as HTML into the Sendinblue platform, this Figma tutorial is going to show you how.

The first thing we need to do is just go to Figma and open up a brand new Figma file, and if you go up to the “Resources” icon up in the top header here and just search for the word “Emailify”, and you’ll see the Emailify Figma plugin pop up. If you just click on that result you can then run the Figma plugin by either clicking on this “Run” button here or if you want to save it for later you can click on the “More options” icon here and click on “Save Figma plugin”, and that will automatically save it into your Figma plugins list.

I’ve already done that, so I’m just going to right click anywhere, go down to “Plugins”, go down to “Saved plugins” and then click on the Emailify Figma plugin that we just set up a second ago. I’m just going to create a brand new blank email; I’m going to call it “Template Sendinblue test” and I’m just going to add that to my page. Bear in mind, this Figma tutorial is not going to go into a lot of detail about actually designing the email; if you want to have a look at the details for that, there’s a bunch of other videos on the YouTube channel just search for Emailify and you’ll be able to find those. Today, I’m just going to be really quickly spinning up a really basic email just to show you roughly what this looks like as it gets uploaded from Figma to the Sendinblue email platform.

I’m just going to add a few little bits and pieces here, and I think that’ll do it for today. I’ve got my email, you can preview the email by clicking on the “Preview” button; you can see here this is HTML. I can widen that out to the desktop size, so you can kind of preview what it’s going to look like at those different sizes, and as I mentioned I’m not going to go into heaps of detail, but you can also customize things like mobile font sizes and mobile spacing and things like that as well.

I’m just going to assume that you’ve got an email design that you’re happy with and all you want to do now is upload it from Figma to Sendinblue. I’m just going to click on the “Export HTML” button up here, and you can see that this opens up the export options panel. By default, it’s going to export it to an HTML email that you can download to your computer, but in this case I’m going to actually change that option and go down to the “Platform Integration” section and select “Sendinblue”; that’s just going to change the options that we’ve got down here.

There’s two different links that we need to have a look at; the first one is the API key, so you need to paste in your Sendinblue API key. You can click on that link which will take you to your API keys page if you’re logged in to your Sendinblue account, and all you need to do is either grab the API key that you’ve already got, or you just click on this “Create new API key” button, you can name the key “Emailify” and then just click “Generate”, and then it’ll give you this key that you can copy into your Figma account. I can just do that now, I can name it “Emailify”, click “Generate”, and then I’m just going to click the “Copy” button and jump back into Figma, and I’m going to paste that into my Sendinblue API key field.

Then the second thing we need to add is our sender email; the sender email is basically the email address that the email is going to be sent from. You need to make sure that you’ve got one set up in your Sendinblue account; the way you can do that is you can create a new sender, so in the Sendinblue platform, go to the “Senders” page; you can go there by either going to the menu, or click on that link, and this is the place where you’ll be able to see which email addresses have been approved for sending emails from your Sendinblue account. In my case I’m just going to use my email address, so I’m going to copy that email which has been verified for this account, so I can send emails from Sendinblue using that account. It’s very important that the email you grab is actually verified and under this list, otherwise it’s going to return an error. I’m just going to grab that email, paste it into the email field, and now I’ve got my API key and my sender email, so I’m ready to go.

The last thing you can do is add a subject line; if you want to add “new feature update”, this will just add the subject line as well, so that’ll automatically get included. Now that’s all done, all I need to do is click on the “Upload to Sendinblue” button, so I’m going to click that now. This is going to automatically generate the HTML for me, upload all my images, and it’s going to upload that directly into my Sendinblue account automatically, so I don’t actually have to manually copy paste HTML code.

You can see here it’s been uploaded successfully; we can now go to the Sendinblue marketing templates page. If you click on that link, that’s just going to take you to your Sendinblue templates page here. I’ll just refresh that because I’ve already got it open, and you can see here the template that we just uploaded from Figma to Sendinblue has been created in the email templates list. We can jump in there and you can see that it’s got our sender address that we added, it’s got our subject line that we added, that’s pre-populated, and the HTML that we included has also been added in there. You can see what that looks like there, and you can shrink that down as well if you want to look at the mobile view, but that’s basically it. We can quit that now; you can use that template uploaded from Figma to Sendinblue in your campaigns, you can send that out from Sendinblue; and you can send a preview to yourself if you want to do that as well.

That’s basically it; I just wanted to keep this really short and concise for anyone who’s wondering how to export HTML emails from Figma to Sendinblue, this is the fastest way to do it if you don’t want to go about manually coding HTML, or manually uploading HTML into the Sendinblue platform. If you’re already a Figma user and you want to design your emails in Figma, and you’re also wanting to use them with Sendinblue, then the Emailify integration is going to be something that I think you’ll be very interested in trying out. If you do try it, out I hope it all goes well; thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one very soon.