How to export HTML emails from Figma to Omnisend using Emailify

Video Transcript

Today, I’m going to be showing you how to automatically export your HTML emails from Figma and then upload them to the Omnisend email marketing platform.

To get started, all we need to do is go to our Figma file, click on the little “Resources” icon up here. If you search for “Emailify” under the “Plugins” tab, if you just go ahead and click on the Emailify results, 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 later. I’ve already clicked that icon, so I’m going to go to my canvas, just going to right-click anywhere and go down to “Plugins,” then go down to “Saved plugins” and click on Emailify. 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 and then export HTML emails from Figma. So, in this case, I’m just going to be creating a really simple template. I’m not going to be going through all of the design features in this tutorial. I’m just going to assume that you’ve already got your email designed using the Figma plugin. But if you are new to the Figma plugin, I’d recommend going through some of the other video tutorials on the channel just to get familiar with how the Figma plugin works for designing and customizing emails.

As I mentioned today, I’m just going to be keeping it really simple, spinning up a few of the components without any customizations from the Figma plugin. And then we’re just going to export this to HTML. And then I’ll show you how to import it to the Omnisend platform. So, importantly, before you export the email for Omnisend, you just need to make sure that you’ve got the unsubscribe link added. So, if you go to the footer tab in the Figma plugin, there’s going to be a preset in there for that platform. So, if you scroll down to the letter O, you’ll see the Omnisend footer preset. Just go ahead and click on that, and that will automatically add the unsubscribe link for you. And you can check that by clicking on the HTML and mobile settings button in the top of the Figma plugin here. And then if you drill down into your link layer in the navigation component, you can see that the unsubscribe tag for Omnisend has already been pre-populated. So, that’s ready to go now. So, you just need to make sure that’s in there as it is a required tag.

Of course, you can go ahead and customize this footer. You can customize the email. But again, I’m just going to assume that you’ve got your email ready to go that you’ve designed with Emailify, and now we’re going to export it to HTML. So, all you need to do is click on the export HTML button in the top of the Figma plugin. Click on that, and you can either host the image assets yourself, or it’s probably easier if you just turn on this upload hosted image URLs option and make sure that the HTML email option is selected. So, this is going to allow us to export the HTML email directly to our computer. Unfortunately, there’s no API for Omnisend to create templates; otherwise, that would be added to the Figma plugin automatically. So, unfortunately, we do have to export it out to HTML manually. And then I’ll show you how to import it into Omnisend in a minute.

I’ve got my HTML email selected. I’ve got the upload hosted HTML image URLs selected. So, this is automatically going to host and upload the images for us. And then you just have to click on “Export to HTML.” And this is going to export the HTML to your computer. So, now the HTML code is ready. You just go ahead and click on “Download your zip file” and save it to your computer. So, just save it to your desktop. And then if you double-click on the exported zip file, you’ll get a folder that looks like this.

Inside of this folder, you’ve got a previews page. So, this allows you to preview your emails in a nice way. So, if you have a look at that in the browser, you can see here that we’ve got our desktop preview and mobile preview. So, this is really good for sending to clients for approvals. But that is just a preview page. So, what you want to do is you actually want to open up the folder inside of that, which is named the same as our Figma frame template example. And the index.html file in there is the one that we’re going to be using. And because we already selected the option to pre-upload all the images, those image URLs are automatically going to be added. So, you can see here the images have already been uploaded. So, those are ready to go.

Now in Omnisend, if you log into your Omnisend account, and you’ll end up on the dashboard here. What you need to do is click on your username in the top right of the Omnisend menu. So, click on that, and then just go down to this option called “Store settings.” So, click on the store settings menu item. And once that loads, just scroll down here, and on the left, you’ll find an option called “Saved templates.” So, go ahead and click on the saved templates item here. And that’s going to bring you to this page called “saved templates” under the store settings section. So, this is where you can manage and upload and import your custom HTML email templates.

What you want to do is go down here to where it says “Import template.” So, click on the import template button and give that a name. So, we can call that “Emailify template example.” And what we want to do is import the HTML. So, you can either paste in the code, or you can just more easily click on the import HTML radio button and click on “Upload file.” So, if you click on “Upload file,” then go ahead and open up the folder that we just unzipped. Go into the email folder name, and you want to get the index.html file. So, don’t upload the previews HTML file. You want to make sure that you’re uploading a single index.html file inside of the folder name that matches up with the exported email that you created from Figma. So, click on the index.html file and then click on “Open,” and that’s going to allow you to upload that HTML file into Omnisend.

Now that we’ve got that selected, click on the “Import” button, and that’s now imported the email template example that we just selected from our computer. So, you can see here now our saved templates have this example that we just uploaded, and we can go ahead and preview that. So, this is going to allow us to preview the HTML that we just imported, and it’s all looking really good as we’d expect. We’ve got our unsubscribe link down here; you can see it’s actually populating at the bottom of the window there in the browser. So, the unsubscribe tag is being swapped out with the preview link for unsubscribe, and this is all obviously selectable and ready to go. So, I’m just going to close out of that now.

And now that you’ve got this saved to your templates, you can then use that for a campaign. So, if you go to your campaign tab and spin that up, I’ve got a campaign in here already, but I’m just going to create a new one. So, I’m going to click on “New campaign,” just going to go down to “Email,” and click on “Create email.” Then I’m just going to add a subject line. So, I’m just going to use this button here and generate that. So, I’m just going to say “free shipping,” whatever. I’ll use their AI-generated subject line in this case. So yeah, let’s just go with that one. And then I can just add my sender name and email address; you can populate that with your own details. The preheader, I forgot to mention you can actually set this in the export settings in Emailify, so it’s probably better to do it there. If you populate the subject line and preheader here, so you can add your preheader text here, and then you might want to also toggle this switch here which adds some preheader text with space. So, sometimes when you see your email inbox and you see the subject line of the pre-edit text, and then there’s also some of the body content showing up after the preview text. This will add some padding there to make sure that the body copy doesn’t show up right next to your preview text. So, yeah, go ahead and add the preview text or pre-edit text in Emailify before you export the email, and then you won’t have to add it in the Omnisend preheader; otherwise, it’ll just double it up for you.

Then campaign name, we can just call it “Emailify test” again, and now we’re ready to go. So, the next step is to click on this button at the bottom right here called “Choose email template.” So, you want to click on “Choose email template,” and instead of looking at the templates section, which is all of the pre-populated templates from Omnisend, you want to switch that to “saved templates.” So, click on this “saved templates” tab up here, and that will reveal any imported templates that you’ve created as custom HTML templates in the Omnisend platform. So, go ahead and click on “Use template.” We’ve already previewed it before, so we know it’s the one we want. Click on “Use template,” and that will now allow you to use that template inside of the Omnisend platform.

That’s what that looks like there. The final thing that you’re probably going to want to do is for some reason Omnisend is adding this default padding around the content. So, it’s setting this 24-pixel padding, which we obviously don’t want. So, just go ahead and set those all to zero. You don’t want any padding added by Omnisend. This is obviously not part of our original design. So, just reset all of those to zero, and that’s going to look much closer to what we had in Figma originally. So, that’s what that looks like there. And then this badge down here, I believe that’s just because the account that I’m using at the moment is a free account. If you’re using a premium account or a proper account, this should hopefully just go away. So, you can see there it says, “Remove the Omnisend badge by switching to a paid plan.” So, that’s why that’s getting added automatically. Otherwise, our template is looking really good, as you can see there.

Then you can go ahead and send yourself a test email or you can preview it. So, we can just click on “Preview” again. And again, this is looking really good besides the footer that we just mentioned. So, that’s looking nice. The padding that Omnisend normally adds by default has been removed, which is what we just did a second ago. And you can see it’s looking really good on mobile as well. So, I think we’re good to go. So, you can close that off now. I’m just going to close that off and click on “Save and choose recipients.” And in your case, you would be sending this out to a real list. I’m not going to be sending this out to anyone today, but if you were going to, you can just go ahead and click on “Review campaign,” and then you would obviously send that out to your entire list.

That’s basically all the steps that you need to follow in order to export your HTML email from Figma for Omnisend and then import that as a custom template into your Omnisend platform and use it for your email campaigns however you need to. So, we’ll leave it there for today. I hope that’s been useful if you’re using the Omnisend platform and were wondering how to export HTML emails from your Figma designs created with Emailify and upload those into the Omnisend platform. This hopefully will show you everything you need to know for that, and you can follow along and hopefully have some success with your own designs and campaigns. So, thank you, as always, for watching, and we’ll be back soon with more Figma tutorials like this one in the coming weeks and months ahead.