How to export HTML emails from Figma to GetResponse using Emailify

Video Transcript

Today, I’m going to be showing you a quick tutorial on how to get your HTML email designs from Figma into the GetResponse email marketing platform using the Emailify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the resources icon at the top, and if you search for Emailify under the “Plugins” tab, if you click on the Emailify result, you can run the Figma plugin by clicking on this “Run” button here. Or I’d recommend clicking on this little “Save” icon here, and that will let us run the Figma plugin from our Figma plugins list. I’ve already clicked on the save icon, so I’m going to go to my canvas, just 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 we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it helps you to design HTML emails in Figma that you can then automatically export to code from the Figma plugin. So, I’m just going to create a new email here and just call it template example for response, and I’m just going to add that to my page. And this allows me to then add these Emailify preset components and also create my own layouts using these quick options here. I’m not going to be going through all of the design features of the Figma plugin today. If you’re interested in using those or learning more about them, there’s a couple of really good Figma tutorials on the YouTube channel that you can check out. Or you can go to the documentation site, and that has a bunch of resources there to really understand all of the different features in the Figma plugin.

Today, I’m just going to keep it really simple and just add a few components, and I’m not going to be customizing any of the content or design. I just want to show you how to get this into your GetResponse email platform. So, the important thing is that you just need to add a GetResponse footer. So, if you go to the footer tab in the Figma plugin and just scroll down to the letter G, you’ll see that there’s a GetResponse footer preset. So, if you click on that GetResponse footer, that will automatically pre-populate the correct unsubscribe links and viewing browser links.

We can inspect that by clicking on the link layer here, opening up the settings panel in the Figma plugin, and you can see that the remove tag, which is the unsubscribed tag for GetResponse, is automatically getting included. Same thing with the viewing browser link; you’ve got that viewing browser link there as well. Now that we’ve finished creating this simple email, we can preview it in the Figma plugin just by clicking on the preview button, and that will allow us to view what the HTML is going to look like when it gets exported from the Figma plugin. We can check that out on mobile and desktop. You can apply mobile overrides as well if you want to. You can apply those through the settings panel. Again, I’m not going to be going through all these details or customizing them in this tutorial, but do feel free to play around with those and check out the documentation for more on that.

Once we’re happy with the HTML, we can then close off the preview and click on the export HTML button in the Figma plugin. If you click on export HTML and then change the default HTML email option that’s selected and scroll down to platforms, find the GetResponse option and click on that. Then what you want to do is either pre-populate the subject line and preheader text. So, we can call this test subject and we’ll do a test preheader as well. And this will just prepopulate the preheader text that shows up after your subject line in the email clients.

Because we’re going to be uploading this into GetResponse manually, this will add the subject line to your title tag. So, that will show up if someone clicks on the viewing browser link. That’ll open up a new browser tab, and this subject line will get included in the title of the tab. But we will have to add this again manually in a moment. Now that we’re happy with those details, we can keep the GetResponse item checked and click on the export for GetResponse button, and that will automatically generate all of the HTML for us and also download all the images into a zip file that we can then upload.

What you want to do is click on the download your zip file button and just save that anywhere on your computer. I’m just going to save it to my desktop. And you can see here that there’s a couple of links, so we’ve got a link to the instructions to upload the folder or upload the zip file, and we’ve also got a link to the GetResponse templates page. So, if you click on that GetResponse templates page and you’re logged into GetResponse, it should open up this page here, which is the my templates page in the GetResponse platform.

And what we want to do is double click on the zip file that we just exported, which will open up this folder here. So, you can see inside of the zip file that’s exported from the Figma plugin, there’s a few different files here. There’s a previews page which just allows us to get a quick preview of the emails if you want to send that to clients or stakeholders. But importantly, what we want to upload is inside this Zips folder. So, there’s a folder called Zips for upload to GetResponse, and you can see we’ve got our template that was exported in this ZIP file. So, this ZIP basically contains the HTML file and the images folder. It’s basically these two files already prepped for you.

And we can now upload that into the platform by clicking on the create template button in GetResponse. Just give that a title, so I’m just going to call this test template from figma and just click on next. And then once that loads, you’ll get another page in GetResponse that will ask you for what kind of template you want to create. So once that loads up, you can see there’s obviously these predesigned ones which we don’t want today. You can see your list of templates if you’ve already some at the moment. I don’t have any in here, so what we really want to do to upload it is go to the HTML editor tab.

Under the designing content page, just go to the HTML editor tab and then click on this upload from zip option. It’s important to click on this one. We don’t want to paste in the code; we want to upload from zip. So, click on that. And then what you want to do is go back to the folder that you just unzipped from the Emailify export. Go into that zips folder where it says Zips for upload to GetResponse, click on that zip file, and then just drag and drop that zip file inside that zips folder into your GetResponse upload window here.

Once you drop that in, that will upload the zip file into GetResponse. And once it says it’s ready for upload, just go ahead and click on the upload button. It’s also worth being mindful that GetResponse does have a limit of 10 megabytes. So, if you’ve got some really large GIF files or image files in your email and that all exceeds 10 megabytes, it’s unlikely that it’s going to allow you to upload it. So just be mindful of that if you are uploading a very large email.

Once you’ve uploaded your zip, just click on the upload button, and that will upload your template and all of the images into GetResponse and it will create a brand new custom HTML template for you in your GetResponse account. You can see here that it’s uploaded all of the HTML that we exported from the Emailify Figma plugin and you can see the preview on the right-hand side here, which is the same as the preview that we had in our Emailify plugin but this is now loaded into the GetResponse platform.

You can see our links are in there, we’ve got our unsubscribe tag viewing browser link, we’ve got this button here which we didn’t actually link up but that’s all looking really good. Once you’re happy with it, you can either test and preview that or you can click on the save and exit button. So, I’ve just clicked on the save and exit button and you can see here that we’ve got our email template now under the my templates page. So, that’s looking really good there.

Now that you’ve got that in there, you can basically use this template in your GetResponse emails and that’s basically it. I just wanted to run through how to get the HTML email templates that you’ve designed in Figma using the Emailify plugin exported and uploaded as a zip file into your GetResponse account. So, hopefully, that’s helpful if you’re a GetResponse user and you’re interested in creating some nice looking custom HTML emails. This is a really easy way to go about it if you’re preferring to design them in Figma rather than using any of the pre-default kind of emails inside of the GetResponse template list. Thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.