How to export HTML emails from Figma to Klaviyo using Emailify

Video Transcript

Today I’m going to be showing you how to export your HTML emails directly from Figma into your Klaviyo email templates directory.

We’re going to be doing this by using a Figma plugin called Emailify. You can install that by just going to the Figma Community, searching for the word “Emailify” and under the “Plugins” tab you’ll see “Emailify” pop-up; all you need to do is click on the “Install” button on the right-hand side, and then you can jump back into your Figma file.

To run the Figma plugin, you can just right-click anywhere, go down to “Plugins”, then click on “Emailify”, and that will run the Figma plugin that we just installed. This Figma tutorial assumes that you’ve already designed an email using the Emailify Figma plugin; if you haven’t done that before, we have another tutorial on that on our YouTube channel that’s worth checking out, so if you want to do that first and then come back, that’s one option, but this video just assumes you’ve already got one ready to go that we can export.

To export this email we’re just going to go ahead and click on the “Export” button in the Figma plugin’s header, so go ahead and click on “Export” and that’s just going to bring up the list of our emails and the Figma plugin’s export options. By default, it’ll set it to HTML; this will basically download a package of HTML files and assets directly to your computer, but for today we want to actually export it out to Klaviyo automatically.

To do that, we just click on this little drop down, and instead of downloading to our computer, we want to actually go to the upload to a platform grouping down here. Today we’re going to be using Klaviyo, so I’m just going to click on the “Klaviyo” option, and you’ll notice that’s just changed the options down here; it’s giving us a little link to get our Klaviyo private API key. If we go ahead and click on that link it’ll open up our API key page in the browser. If you’re not already logged into your Klaviyo account you’ll have to do that, but once you’re logged in and you go to this page you’ll be able to generate your API key that we’re going to be using.

Once you’re on this page, on your Klaviyo API key page, all you need to do is go ahead and click on the “Create private API key” button down here in the bottom right, so I’m going to click on that, and that’s just created a brand new private key for me. I can label that, so I’m just going to say “Emailify Figma Plugin” just so we can reference what it is at a later date. Save that label, and then the private API key is just sitting behind this little icon here; if you click on that icon it’ll reveal your private key. All you need to do go is go ahead and copy that, so just highlight the private key and copy it with Command + C (or Control + C if you’re on windows) and then now that you’ve got the key copied, you can jump back into Figma, and click on this private key API input box here in the Figma plugin. I’ve clicked on that, and now I’m just going to paste it with Command + V (or Control + V if you’re on windows), and you can see here it’s just pasted in our brand new Klaviyo API key.

That’s perfect, that’s exactly what we we need to authenticate the the upload, and then you just want to make sure you’ve got your subject line filled out and your pre-header text if you want to include that as well. In my case, I’m happy with all this, my email is ready to go; now all we need to do is click on the “Upload to Klaviyo” button; I’m going to go ahead and do that now, and this is just going to generate all the HTML automatically for us, it’s going to export all of our image assets, upload them online so they’re all hosted, and then it’s going to send that template directly into Klaviyo.

It’s just told us that our Klaviyo template has been uploaded, so we can jump into this Klaviyo templates page. If we click on that and open up another browser window that’s going to link us to this page here which is the Klaviyo email templates list. I’m just going to refresh that page, and you can see here it’s just now created a brand new template with the email that we just uploaded. You can see here we’ve got our preview, I can jump into that by clicking on the title and that’s going to load up our template. You can see here it’s automatically uploaded all of the HTML, this is production ready HTML that’s been uploaded and generated from the Emailify Figma plugin that we just uploaded a moment ago. That’s all in there, it’s all been inlined so you don’t have to worry about running it through any CSS pre-processors or anything like that to get your CSS in there, it takes care of all of that for you.

You can preview it visually just by clicking on the “Preview” tab up here and that’s going to let you actually scroll through the email visually and see what it looks like when it when it’s rendered. You can see here this is all HTML, this is all of our content as we’d expect, and that’s everything we we designed and uploaded in Figma all looking really nice. You can go ahead and preview that email, so if you wanted to send a test email to yourself you can go ahead and do that, and that’ll work just fine. If you’ve already used Klaviyo before you’re probably aware of all the other things you can do now that you do have the email template set up.

This this is really taking care of that extra step that you normally have to go through, which is manually creating templates, which can be a little bit annoying. For example, you’d normally click on the “Create Template” button here, go through this kind of process and then you have to manually zip up your images, and make sure they’re all zipped up, then you have to manually upload your HTML file and make sure that’s kind of pointing to all the right places, and it’s just a bit of a headache. This Figma plugin integration will make it much easier if you’re a regular Klaviyo user and you want to get those emails out of Figma out of the Emailify plugin as quickly as possible directly into your Klaviyo templates list. This integration lets you do that really easily, and I know we only did one email in this case, but if you have multiple emails you can use the same feature and it will loop through those and upload them one by one and you can you can upload a bunch of them at the same time if you need to do that as well. That should save even more time if you’ve got a bunch more HTML emails that you need to upload from Figma to Klaviyo.

The other thing worth being mindful of is each time you do this, it will create a new email template; it won’t override the existing templates in your Klaviyo templates page, and that’s just because you can actually edit the templates inside of Klaviyo. If someone has gone ahead and edited that template and then you’ve re-exported it or re-uploaded it from the Figma plugin, that’s going to wipe out all of your edits and override it. By default, the Figma plugin just creates a new version in your email templates each time, so you can kind of keep track of those versions and delete these ones if you don’t need them anymore or whatever.

That’s just something to be mindful of, but hopefully if you’re a Klaviyo user and you’ve been wanting to make this process uploading your HTML emails from Figma into Klaviyo email templates a bit more seamless, as I know a lot of you have been requesting and asking for in the comments on the previous video, then this is probably the easiest way to do it. This is pretty much as direct as you can get directly from the plugin Figma plugin straight into Klaviyo, so that should help speed up your workflow a little bit.

That’s the whole Figma tutorial; it’s fairly straightforward, all you really need is your private key from your Klaviyo account and you’re ready to go. Just make sure you’ve got that Klaviyo option selected, and you can just upload as many emails as you want. That’s pretty much it, that’s the whole Figma tutorial; and thank you as always for watching. We’ll be back soon with some more Figma tutorials just like this one, and we’ll catch you then; stay tuned.