How to export HTML emails from Figma to Loops using Emailify

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to export your HTML emails from Figma to the Loops email marketing and transactional email platform with the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little “Resources” icon up here, and if you search for Emailify and then click on the Emailify Figma plugin 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, and that will let you run the Figma plugin from your Figma plugins list later. I’ve already clicked on the save icon, so I’m just going to go to my canvas, right-click anywhere, go down to “Plugins,” and then go down to “Saved plugins,” and click on Emailify, and that’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it allows you to design HTML emails in Figma and then export those automatically to code without needing to manually develop anything. So I’m not going to be going through all of the design features today, but you can check out some of the other tutorials on our YouTube channel if you’d like to go through those, or you can start with a Figma template which is Emailify ready just to give you an example of the kinds of designs you can create using the Figma plugin.

I’m just going to keep it really simple today. I’m just going to call this example template and click add new Emailify container, and that will allow you to start adding components from the Figma plugin which you can then customize the content and design of for your own brand using the normal Figma tools that you’re used to. So again I’m not going to be going through all of the design features today. There’s a couple of other good tutorials on the channel or you can go to the documentation site to check those out.

If you are designing an email for the Loops platform, you definitely want to go to the “Footer” tab over here and just scroll down under the platform section to the letter “L” and find the Loops footer and click on that one. So clicking on that option will automatically pre-populate the unsubscribe link for the Loops platform. So this will add the unsubscribe link there, so you definitely want to add that in just as a required tag before uploading the email into Loops.

Now that we’ve got our email designed, we can preview that in the Figma plugin by clicking on the preview button here, which will automatically load up the real HTML that’s going to get exported as a preview. You can test that out on mobile devices and desktop devices, and you can also apply any mobile overrides as well. So if you want to, for example, shrink some text or change the size of text or adjust padding on mobile and things like that, you can do that using the Figma plugin. But again, I’m not going to go into detail about that today. I’m just going to leave all those as the defaults.

Provided that you’re happy with your preview and you’re happy with your design, you can then click on the export HTML button in the Figma plugin and change this HTML email option and scroll down to platforms and again find the Loops platform. So you want to click on Loops, and you just want to make sure that you select the email you want to export. You can add your subject line here. Please be mindful that you’ll also have to read the subject line in Loops later, but adding it here will also add it to your title tag in case anyone opens the email in their browser, and then the browser tab will also get this title tag populated with your subject. And then you can also add preheader text. So this is the text that comes after your subject line when someone’s viewing it in Gmail or Outlook. So you can add all of your preheader text in here, and then you won’t have to add it later because it will automatically get included in the template.

Now that we’ve got our subject line and preheader added, we can go ahead and click on the export for Loops button, and this is going to automatically generate the code for the Loops platform and allow us to save that to our computer. So now that it’s finished exporting, we can click on the download your zip file button and just save that anywhere to your computer. I’m going to save it to my desktop.

And if you open up that zip file and then open up the folder that it creates, you can see here that we’ve got a folder called “_zips (For upload to Loops).” You’ll notice that when we log into Loops as I’m already logged into, and then go to our templates page. So if you click on the templates page in the navigation and then scroll down to blank campaign. So if you click on blank campaign, create a new campaign from scratch, you can then go to this new campaign page. And what you want to do is click on this little upload a custom email button. So there’s a little label that says upload a custom email with the icon with the up arrow. So click on that, and that will bring up this screen here which allows you to drag and drop a zip file, and you can see that it’s asking for a zip file with an MJML file inside of it and the images also inside of the zip. So this is automatically being created by Emailify when you export the file. So you can see inside of this Zips folder it’s already got the zip file that we’re after, and we can just drag and drop that into the Loops upload field here.

We’ve just dragged our example template. zip into Loops. So now we can click on upload, and this will automatically upload the template along with all of the assets into your Loops campaign. So you can see here all of the HTML’s being rendered as we’d expect. You can see all of the links so we got our unsubscribe link that we added for Loops and all of that’s looking really good. As I said, you have to add your subject line again here so you’ve got subject subject line that you can populate which will get included in the send from Loops. And you can give your campaign a name so we can call that campaign name test.

That’s basically it; I just wanted to show you how to upload your HTML emails from Figma into the Loops platform. This is going to be a really easy way to go about it just using that prepackaged zip file. For context, the contents of that zip file we can see just by opening up the zip here and what it contains is just a folder of images along with the index. MJML file so not an HTML file. Loops only accepts MJML which is a special type of email syntax that the Figma plugin generates for you automatically. So you don’t have to worry about converting anything or doing anything special. You can just drag and drop the zip file inside of the Zips folder, and you’ll be ready to go.

I hope that’s been helpful if you’ve been using the Loops platform or you’re just starting to use it with your team. It’s a really great product, and I think this is a really easy way of getting custom designs in the platform if you want to design them in Figma first and then export them out to HTML for the Loops platform to send out in a campaign.

Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.