How to export HTML emails from Figma to Selzy using Emailify

Video Transcript

Today, I’m going to be showing you how to automatically upload your HTML emails from Figma to the Selzy 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 little “Resources” icon up here. If you search for Emailify and under the “Plugins” tab, click on “Emailify”. You can either run the Figma plugin by clicking on this run button here or, I’d recommend clicking on this “Save” icon here to access it from your Figma plugins list later.

I’ve already done that. I’m going to go to my canvas, just right-click anywhere, go down to “Plugins”, 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 provides you some tools to help you easily design emails in Figma, which can then be exported to production-ready HTML automatically.

Today, I’m not going to be going through all of the design features in the Figma plugin. There are a few other tutorials on the YouTube channel that you can look at if you are interested in that. Today, I’m just going to be assuming you’ve already got your email designed using Emailify and you’re ready to export it to the Selzy platform automatically.

The last thing I’m going to do with this template is just go to the footer tab in the Figma plugin and make sure I’ve got the correct unsubscribe link. So I’m just going to scroll down to the “Selzy” item down here, the footer, and click on that. That’s automatically going to make sure that you’ve got your unsubscribe link correct. If you look into the link layer and go to the HTML settings button up here, you can see that it’s got the unsubscribe URL tag on there that will automatically get swapped out later.

Now that we’ve got our email ready to go, all we need to do is click on the export HTML button up here. By default, that’s going to be set to HTML email. We’re just going to change that from HTML email and scroll down to platform Integrations. Find the “Selzy” option, click on that, and then what you can do is click on this little link here. That’s going to take you to your API key page if you’re already logged into Selzy. It’s going to open up the browser to this page over here and it’s going to take you to the integration and API Tab.

What you want to do is click on this little show full icon here, and that’s going to prompt you for your password. It’s going to ask you to enter your password and then you’ll be able to copy your API key from here and paste it directly into the Figma plugin here. Once you’ve pasted your API key in from Selzy, all you need to do is just add a subject line. You can add a subject line here. The name of the frame over here will be used as the template name in the platform.

You can change that if you want to rename it. I’m just going to leave it as this for now. Once you’ve done that, just click on the upload to Selzy button and that’s going to automatically export the HTML, upload all the images, and upload our template. So, it’s uploaded our template to the Selzy platform. If you click on the my templates link here, that will automatically open your browser to your my templates page which I’ve already got open.

I’m just going to refresh that and if we refresh that page you can see here that our Selzy template example which is what we named it in Figma has just been uploaded a second ago. So we can essentially jump into that and view it. If we open up that template, you can see that our subject line has been included, the name of the template’s been included.

If we go back, we can also preview it. So if you click on this little preview link that will open up an HTML preview and you can see here that it’s uploaded all the images uploaded all the content we’ve got our unsubscribe link down here and everything’s basically ready to go. So, we’re just going to close that off and now you can essentially use that to do whatever you want with.

You can create a campaign, you can create a copy of that template, you can share the template. You can really do whatever you want. This is just an automatic way of getting the HTML from Figma into the Selzy templates without you having to manually create the email template, manually uploaded images, paste in the images URLs, and yeah update all that HTML manually.

This is a really quick way of doing it if you want to automatically get it out of there from Figma. So, I think we’ll leave it there today. I just wanted to keep this really quick. If you are a user of the Selzy platform and you’re interested in automatically exporting your HTML from Figma using the Emailify integration, it’s going to be a really quick way of doing that for you or your team.

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