How to export HTML emails from Figma to Sendwithus using Emailify

Video Transcript

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

To get started, all we need to do is go to our Figma file and click on the little “Resources” icon at the top here. If you search for “Emailify” under the Plugins tab, you can click on the Emailify result to run the Figma plugin by either clicking on this Run button here, or I’d recommend clicking on the Save icon to save it to your plugins list for easy access later.

I’ve already saved my Figma plugin here, so I’m just going to go to my Figma canvas, right-click anywhere, go down to Plugins, then go down to Saved Plugins, and click on the Emailify item. That’s just going to run the Figma plugin we saved a second ago.

If you’re new to the Figma plugin, the way it works is it helps you to design HTML emails, which you can then export to code with one click automatically. This helps you save time on development and eliminates the need to manually code those emails. Instead, you just design them and export them.

Today, I’m going to be creating a really simple template. I’ll just call this Example Template and click on Add New Emailify Container. This allows us to start adding components, designing our email, and customizing it as we like.

I’m not going to go through all the design features in this tutorial today—I’ll assume you’ve already checked out some of the other tutorials on the YouTube channel and in the documentation. But if you design and customize this to your liking, once you’re finished, you can upload it to the Sendwithus platform, which we’re going to do in a moment.

Once you’ve designed your email, the last thing you need to keep in mind is that the Sendwithus platform hooks into your existing email service provider’s unsubscribe system. You need to double-check which service you’re integrating with in Sendwithus.

There are a few here, and today, I’m just going to use the SendGrid example. You’ll want to find the platform you’re using under the Footer Tab in Emailify, then scroll down until you find the platform you’re using. In this case, we’ll use SendGrid as an example. I’ll click on the SendGrid Footer, and that will automatically prepopulate this unsubscribe link in the navigation component with the correct SendGrid unsubscribe tag.

Once you’ve done that, you’re ready to upload your email. You can preview the HTML by clicking on the Preview button in the Figma plugin. This will load a real HTML preview you can check before uploading the email, ensuring everything looks good.

You can switch between mobile view and desktop view, and you can also add things like mobile overrides through the settings panel here. But again, I’m not going to cover all the design features today. Please feel free to check out the documentation site and the other YouTube tutorials if you’re new to the Figma plugin.

Now that I’m happy with my HTML template, all we need to do is close the preview and click on the Export HTML button in the Figma plugin. Next, change the HTML Email Option, scroll down under the Platforms group, and find the Sendwithus option.

I’m going to click on Sendwithus, and you can see it’s asking for a Sendwithus API key. If you’re logged into your Sendwithus account, you can click on that API Key link, which will automatically open the API settings page in your Sendwithus dashboard.

From there, all you need to do is click on the Create New API Key button, give it a name (in this case, I’ll call it Emailify), set the key type to Production, and then click on the Create API Key button. That will generate the API key, which you can copy to your clipboard. Make sure to store it somewhere safe, like a password manager, as it will only show you the key once.

Once you’ve copied the API key, go back to your Figma file and paste it into the field here. I’ll just paste that in now.

After pasting in the API key, you can optionally add a subject line. For example, you can add your Subject Line here. If you want, you can also add preheader text, which is the text that shows up next to or underneath the subject line. You can add your Preheader Text here.

Then, click on the Upload Export button in the top-right corner. Once you click on that, it will export the email, upload all the template details and images to the Sendwithus platform, and show you a confirmation message that says your Sendwithus templates have been uploaded.

You can view those templates by going to your account and clicking on the Templates page. You can also click the link in the Figma plugin, which will automatically open the Sendwithus templates page.

Here, you’ll see that our example template has just been uploaded. If we click on that template, it will load the editor, and you’ll see that all the HTML we just exported from Figma via the Emailify Figma plugin has automatically been uploaded into the platform.

You’ll see all the content, the unsubscribe link, and the images are there as expected, and everything looks great. It’s really up to you to decide how you want to use this going forward, but this is the easiest way to get the HTML template directly into the Sendwithus platform automatically via the HTML upload.

You’ll also notice that the subject line has been carried across. The subject line is prepopulated, and the preheader text is included in the HTML. If you inspect the content, you’ll notice the preheader text is already in a hidden div, so you don’t need to add it again in the Sendwithus platform—otherwise, it will double up in your HTML email sends.

That’s basically it. I just wanted to show you a quick tutorial on how to get your HTML email designs created using the Emailify Figma plugin from Figma into the Sendwithus platform using the built-in API integration.

Hopefully, this improves your workflow—rather than manually copying and pasting code every time, you can just click one button and automatically upload the code from Figma directly into your Sendwithus account templates.

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