How to export HTML emails from Figma to SendX 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 SendX 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 "Plugins" tab, if you click on the Emailify item, 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. That's going to let you run the Figma plugin from your 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 the Emailify item. 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 helps you to design HTML emails that you can then automatically export from Figma to production-ready code. In this case, I'm just going to give this an example of a SendX template, and I'm just going to click the "Add New Emailify Container" button. This is going to allow us to start designing our email. I'm not going to go through all of the design features in the Figma plugin today. If you're new to the Figma plugin and you're interested in learning about those, I'd recommend checking out a couple of the YouTube tutorials on this channel or going to the documentation site. That has steps for all the ways you can customize your designs.

Today, I'm just going to be creating a really simple template without any content or design customization, just to run through what this would look like if you export your template to the SendX platform. I'm just going to add a few components, and once you're happy with your design, the last thing you want to do is make sure you go to the "Footer" tab. If you scroll all the way down to the letter "S," you'll see that there's a SendX option. We've got this SendX footer option here. Go ahead and click on that, and that's going to automatically add this footer component with the unsubscribe link and viewing browser link pre-populated. If I click on the link layer here and then click on the settings button in the Figma plugin, you can see that it's been pre-populated with the unsubscribe link tag and the viewing browser link tag. These are good to go. These are going to get swapped out by SendX once we upload the template in a moment.

You can obviously customize the design of this footer, but that's just a really easy way of getting those links automatically added without having to find them each time in the documentation. Now that we're happy with our design, you can preview the HTML just by clicking on the "Preview" button here. That's going to load up a real HTML preview of what the email is going to look like when it gets sent out. You can toggle between mobile and desktop, so you can see what it looks like on both. There are also some options to customize things like mobile design overrides. If you click on the settings button and then click on any of your layers, you'll get all these different options to override things like padding and font size and showing and hiding elements on mobile and desktop.

I'm not going to go through all of this today. Feel free to check out the documentation if you're interested in playing around with those. Now that we've got our template designed the way that we want, I'm just going to close off this preview and click on the "Export HTML" button in the top right of the Figma plugin. Go ahead and click on "Export HTML," and then what we want to do is change this default HTML option from this one here and scroll down to platform integrations. Again, scroll down to the letter "S" until you find the SendX option. Click on SendX, and once you've got that selected, you can then populate things like your subject line. We can just put in a subject line here and add preheader text. The preheader text is what shows up after the subject line in your email client. When you're opening up the email in Outlook or Gmail, this is the text that shows up underneath or next to the subject. Populate those two fields, and then when you're ready to go, just click on the "Export for SendX" button. When you click on that, it's going to automatically upload all the images, generate the HTML code, and you'll get this message when it's ready to go. It's telling us that the code is ready for SendX, so we can download that here.

Go ahead and click on the "Download Your Zip File" button, and what you want to do is save that to your computer. I'm just going to save it to my desktop, click on "Save," and then if you just unzip that file, you'll get this folder here. This is the inside of the zip file that we just downloaded. There are a couple of different files here. There's a previews page, so if you want to see a preview of all the emails you've exported in one place, you can open up that. But for today, what we're really interested in is the actual index.html file here, which contains the email that we just exported. You can see that it's in a folder with the same name as our Figma frame. Just find whatever the Figma frame you named in your Figma file and match that up with the folder in your zip file. Inside of that, you'll see the index.html file.

Now that we've got that file exported, we're going to go into our browser and load up the SendX dashboard. If you're a SendX user, you want to go to SendX.io and log into your account. You'll be greeted with the dashboard screen here. What we want to do now to upload the template is click on your username in the top right of the page and then go down to "Settings." You'll see this little settings icon, click on that. Once that loads up, you want to change this tab up the top here to "Templates." Click on the "Templates" tab up here, and you'll see a button called "New Email Template." Go ahead and click on that "New Email Template" button. Once that new email template page loads up, you can go ahead and give that a name. I'm just going to call this "SendX Custom Template." You can call it whatever you want, this is just an example. Down here in the email body, what we want to do is delete these predefined rows. Go ahead and click on each of these rows, then click on this delete icon and click on this one again until you can see this "Drop Content Blocks Here" section. That means that the template is now empty, and we can add our own content.

Before we do that, the first thing I want to show you is just how to extend the width of this email. You'll notice that it's actually quite narrow. The reason for that is if you go to this settings tab over here, you'll see that the content area width is set to 500 pixels by default. You'll notice that in our Figma file, our email is actually 600 pixels. What we need to do first before we add our HTML is just to go back into SendX again, click on this settings tab over here, and before we paste our content in, just change this from 500 and drag that all the way up to 600. This is now going to match our Figma design at 600 pixels wide, and in SendX, it's also now 600 pixels wide. That's all good. Now we can go back to the content tab, and under the content tab, if you just scroll down, you'll see this little HTML tile. What we want to do is drag and drop that HTML tile into this content blocks area. Just let go of the block when you're hovering over that, and that's going to add this little content block here.

We want to replace this HTML with the HTML code that we just exported from the plugin, located in this index.html file here. The quickest way to get the source code for that is just to open up a new browser window and drag and drop your HTML file in there. You can see that's loaded up our preview here. All you need to do is right-click anywhere in the body area here, click on "View Page Source," and then you can copy and paste all of this to the clipboard. I'm just going to select all of that and copy it to my clipboard. Then, if you go back to SendX, delete all of this predefined HTML content under the content properties window. Delete that, and you can see that's removed it from there. Now we're going to paste all of the HTML we just copied. Paste that into here, and you can see our HTML has now been added in. That's the way you can paste your HTML into SendX. Unfortunately, there's no easier way to do it. You do have to go through those couple of steps of setting the width and pasting in the HTML content into this block here. Once you've done that, it should basically be good to go.

Now we can go ahead and click on this "Submit Template" button down here, and that's going to save the template for us. Now that we've got that added in, you can see that the content has been added and is letting us preview it here. We can just go ahead and click on the exit button, and then now we can go back to our campaign section. If you go to "Campaign" in the top menu here and click on "Create Newsletter Campaign," you can give that a name. I'm just going to call this "Test Campaign" for today. Once you've added that, go ahead and click on "Next." You can see down here, if we go to the custom template option, you can see that we've got our SendX custom template which we just added a moment ago. To select that, just click on the "Apply Template" button and then click on "Apply Template" again. You'll notice down here that it's got this little check mark, so it's selected our custom template. Then we can go to next, and that's going to take us to the content screen. Again, this is going to load up that editor again, but this time it's going to give us the HTML that we added previously.

You can see we've got this custom HTML block in there, and that already contains our custom template. If we click on that, all of the HTML content is in here, and that's what that's looking like there. Because we've already added this template, we don't need to do anything in here again. If you'll notice, the settings panel is still set to 600 pixels, so just make sure that's still the case, it should be. For the email subject, you just want to add in whatever you added in the Figma plugin. We just added a thing called "Test Subject." You do want to copy-paste that subject line into here. If you've already added your email preview text in the plugin, so we already added preheader text here, you don't want to reuse that in SendX. If you've already added it in the plugin, that's going to add it to your HTML code, and it's already going to work as expected. If you add it again into here, that's going to double up the preview text that we've already added. If you've added it here, you don't have to add it into SendX.

I'm pretty happy with that. I'm just going to save that by clicking on "Next." Again, this is going to take you to all the normal steps you'd be used to if you're a SendX customer. In this case, I'm just going to send it to all email contacts and click on "Next." This would allow me to schedule the email for later or send it out now. Usually, you want to send a test to yourself as well, so go ahead and click on the "Send Test" button down here. I would send a test to myself. In this case, you could add your own email address and send a test. You always want to do that before sending out the full campaign. Again, if you're a SendX user, you're probably already familiar with your own workflow, and I'm not going to have to go through those extra steps today.

That's basically it. I just wanted to show you how to design and export HTML emails from Figma that you can then import as custom HTML templates to the SendX email platform. If you're using the SendX platform and you're interested in creating custom HTML emails from Figma, this is going to be a really easy way to go about doing that. Thank you, as always, for watching, and we'll be back with more Figma tutorials like this one very soon.