Video transcript
10-minute video ·
Today, I’m going to be showing you a quick tutorial on how to export your HTML email designs from Figma to the Insider 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 here, and search for Emailify. Under the Figma plugins tab, if you click on the Emailify item, you can then run the Figma plugin by either clicking on this “Run” button here or by clicking on this little “Save” icon here, which will let you run the Figma plugin from your saved Figma plugins list.
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,” then go down to “Saved plugins,” and click on Emailify. That’s going to run the Figma plugin that we just saved a second ago. If you’re new to the Figma plugin, the way it works is it helps you design HTML emails, which you can then automatically export to HTML code using the Figma plugin itself.
Today, I’m just going to be creating a really simple email called “My New Template.” I’m going to click on the “Add Emailify Container” button. I won’t be going through all of the design features in the Figma plugin today. If you’re interested in those and you’re new to the Figma plugin, I’d recommend checking out some of the other videos on the YouTube channel or in the documentation. For today, I’m just going to create a really simple design without customizing any of the content, which you can do in Figma. I will leave everything default and just create a simple design.
Once you’ve created your email design, the last thing you’re going to want to do for the Insider platform is to go to the footage tab over in the Figma plugin. Scroll down and find the letter I. You’ll see an Insider footer option. Click on that Insider footer component, and it will automatically add this preset footer to your email, pre-populating the unsubscribe link. If you go into the link layer and click on the settings button in the Figma plugin, you can see that the Insider global unsubscribe link tag is automatically being applied to that navigation item. You can customize the look and feel of this as you like and add your own address and other elements if you want to, but adding that Insider footer will automatically populate that unsubscribe link for you.
Once you’re happy with that, you can preview the email by clicking on the preview button in the Figma plugin. This will give you a real HTML preview of what the design looks like, showing it as it would appear on mobile and desktop. You can customize these as required by clicking on any of these layers and then clicking on the settings button, which will let you apply things like overrides and links. Again, I won’t go into detail about all that; you can check out the documentation or other videos for the design side.
Now that we’re happy with our email design, I’m going to close the preview and click the “Export HTML” button. By default, this will automatically select the HTML email option under “Download to your computer.” This will download a zip file, but for today, we actually want to upload this automatically to the Insider platform. Scroll down a bit underneath “Platform Integrations,” and scroll down to the letter I. You’ll see the Insider option. Click on Insider, and it will then ask you for your Insider API key. I’m going to show you how to get that in a second.
Log into your Insider account. Go to the top right corner of the page, click on your username, go down to settings, then click on the “Inone Settings” button. This will load the settings page in Insider. Once it loads, you can see there’s a tab called “Integration Settings.” Click on “Integration Settings,” scroll all the way down, and at the very bottom, you’ll see the API key section. Click on the “Generate API Key” button and select the “Email Content” key type. You have a bunch of different options, but the one we want is the email content one. Do not select email template or transactional email. Ensure email content is selected as the API key type, which will highlight in blue. Click on next, and that will generate your API key.
It will say that the API key has been generated successfully. Copy this and store it somewhere because it only shows you this once. Click on the copy button to copy the key to your clipboard. Store it in a password manager or somewhere safe if you want to reuse it later because it will not show you this again. Once you’ve copied that to your clipboard, go back to the Figma page, go back to the API key input field, and paste it into the input field.
You can now click the “Upload to Insider” button. You can also optionally add a subject line and preheader text. The preheader text appears after the subject line when you’re looking at your inbox. Add preview text here as well. This will include it in the HTML file itself. Even though there’s a field in Insider to add your own preheader text, this won’t populate that because if we populated that as well, it would duplicate the preheader text. Add it here, and it will automatically add it to a template.
Once you’ve filled out the subject line, click on the “Upload to Insider” button. This will export all of the HTML code, upload all of the images, and upload the template itself to the Insider platform. It will tell you that you’ve successfully uploaded the Insider template to the platform. Go to your Insider account by clicking on this link, and it will take you to your Insider account in the browser. To get to your emails, go into the menu, go down to the side menu where it says “Experience,” and click on “Message.” Underneath “Message,” you’ll see the email item. Click on email, and that will load your emails list.
Once this tab finishes loading, you can see here that it’s just created a new template called “My New Template,” which is taking the name from your Figma file where we’ve named the frame “My New Template.” It has added a unique timestamp to the front because if you try to upload a template with the exact same name again, it will bounce and won’t let you create it. Unfortunately, we have to put in this little random ID here, but you can see when it was created, it will order it based on when it was uploaded, so you know which one was which if you re-upload it. You can see here in the tag section that it’s also tagging it with Emailify, so you can clearly see that this has come from the Figma plugin.
Once you’ve uploaded it, you can view the template by clicking on the template name. When it loads, you’ll see the template listing page, which lets you include recipients and other details. You can also go to the design tab. Click on the next step, which is “Design,” and it will load the design page. You can see here that it has pre-populated our subject. We put in “My Subject” in the Emailify Figma plugin, and it has automatically populated that here. It won’t pre-populate the preheader field because it’s automatically adding that preheader content into the HTML. I’ll show you what I mean by that by clicking on this edit button. We can open the HTML and see that it’s looking great, just as we previewed it in Figma.
Now, this is in the Insider platform, and this is their Insider preview window. We can see what it looks like there, and this lets us view the HTML that was uploaded from the Figma plugin. You can see that it uses the subject line in our title tag, so that will show up if you ever open the email in a web browser. Scroll down a bit, and you’ll see that the preview text has automatically been added. This means you don’t have to add that into the Insider field; it’s automatically adding that tag and styling it to be hidden but visible in your email client.
That’s looking really good. You don’t need to add any HTML here. I just wanted to show you what that looks like. You can preview it here to get a sense of what it looks like. Once you’re finished, you can either click on save or go back. I’m just going to go back, and that’s basically it. We have our email design here. You can assign it to a list by adding your list in the recipients section. You can change the name of the template or the campaign. We can call this one “My New Campaign” and save that, which will allow you to save the email details as well.
That’s basically it. Once you’re ready to send out the template, you can do that as you normally would. I won’t go through all those steps here, but importantly, this is a quick way of getting your custom HTML templates out of Figma, as long as they’ve been designed using the Emailify Figma plugin. The Figma plugin doesn’t support templates that have been pre-designed outside of the Figma plugin. As long as you use the design features provided by the Figma plugin, which you can find in the documentation or YouTube tutorials, you’ll be able to design anything you want and have it uploaded automatically as production-ready HTML code.
I hope that’s helpful. If you are using the Insider platform for your email marketing, this is a quick way of using the API integration with Emailify to get your custom HTML templates out of Figma directly into the Insider platform with one click using that automated feature. 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.
Pro Bundle