How to design and export Email Signatures from Figma using Emailify

Video Transcript

Today, I’m going to be showing you how to design and export HTML email signatures from Figma 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 the top here. Then, if you search for “Emailify” and click on the “Plugins” tab, you can then click on the Emailify result and 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 us run the Figma plugin from our right-click menu in a moment. I’ve already clicked on that 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 the Emailify result. 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 that it works is it helps you to design and export HTML emails from Figma. So, we can get started by just creating a new Emailify frame. We can give this a name of email signature template in this case. Then, I’m just going to click on the add new Emailify container button. That’s going to create a new Emailify frame on our page that we can then use to insert components from the Figma plugin.

Today, I’m just going to be skipping over all of these other content components because we’re going to be focusing on email signatures specifically. So, these are going to be used more for HTML email marketing templates as opposed to a small email signature. Instead, we’re going to go over to the footage tab here and then click on the signatures subcategory. This is going to give us a few preset starter components for creating an HTML email signature really easily. I’m just going to use this simple one at the bottom down here, and I’ll show you how we can customize that in Figma.

You can see after I click the layer, it’s just basically adding all of the Figma layers and layout to my Emailify frame. We can customize this by using our own content as well. For example, if I want to swap out the logo, I can drag and drop my own logo from my computer into the Figma file and then just drag and drop that directly into the column. You can see here we’ve got a few different layers in there. I’m just going to get rid of the original image that was in there. So, I’m going to get rid of that one, and we can then obviously customize the text. So, I can put my name in there, I can add my role, customize the phone number, customize the website, all of that sort of stuff.

You can obviously style these as well. So, if we wanted to make these bold, you can do that for some stylistic reasons. You can change the color. So, if you wanted to change the color of that text, you can certainly do that. We could make it Pink in this case if we felt like that. And you’ve really got creative control over the typography and imagery and layout. So, you can adjust the item spacing, for example, if you wanted to make those narrower or larger, you can adjust the item spacing in the auto layout properties here. If you want to customize this further, you can certainly do that as well.

For example, if we were to click on the column layer inside of our signature row, you can see down here there’s some options to add new elements. If you open up that dropdown list, you’ve got a bunch of options for different elements that we could add in. For example, we could add some social icons. So, if you click on the add social option and then click on the add button, that would automatically give us a social icon link here. So, we can add some spacing above that and customize those icons. So, for example, if we don’t want the Facebook icon and we don’t want the YouTube icon, you can delete those and then click on the social layer again and then go down here to choose more social icons that you can add in as well. So, we might want to add in a slack link so you could add a slack icon there, you could add a WeChat link, so all of these social icons can be added in there, and you can apply links to those just by clicking on any of those social icon link layers going to the icon layer settings button in the Figma plugin, and then you can just add a clickable URL in there. So, you could add a link to your website or link to your social media page, and that will automatically get included as a link.

The same thing goes for your image. So, if you want to link that image to your website, you can click on the image layer and again paste in your clickable link URL into that link field here. So, for example, we could add a link to the website there, and that would automatically make the link clickable. So, we’ve just added links to those. We can also preview the signature. So, if we click on the preview button in the Figma plugin, that will give us a little bit of a preview. So, you can see here this is the real HTML version of the content. You can see here it’s got a link on the logo, it’s got a link on the social icon as well, and you can see this is all rich text that’s selectable. So, that’s basically what the signature is going to look like. You can disregard this outer email body color that’s not going to get included for the email signature export option which I’ll show you in a moment. You can go ahead and close off the preview.

Once you’re happy with your HTML email signature design in Figma, you can export that to an HTML signature by clicking on the export HTML button in the Figma plugin, and then you just want to change the HTML email option up here to be HTML email signature instead. So, click on the HTML email signature option, and once you’ve got that selected, you can then go ahead and click on the export to HTML signature button, and that’s going to automatically generate the exported HTML and image assets that you can download as a zip file.

You can see here it’s telling us that our email signature code is ready to download, so we can go ahead and click on the download your zip file button. If you click on that, you can then save the zip file to your computer. So, I’m just going to save it to my desktop, click on Save, and then if I double click on the zip file to unzip it, you can see the contents of that file is here. So, we’ve got our HTML email signature template; this includes our images which have automatically been uploaded during the export process. We’ve also got our index.html file inside of the folder, so that is actually our production-ready code. For example, if we go to our browser and open that up, we can drag and drop that in to have a look at it. So, if you open that up, you can see here that this is our email signature; all the code is there, and you can also see that we’ve got a preview page as well. So, we’ve got this that we can open, and that’s just going to give us a little preview of what it’s going to look like on small screens and and large screens, and importantly it’s also got this really useful button that is called copy HTML signature. So, if you click on that button that’s automatically going to copy the production-ready HTML from this index.html file to your clipboard. So, you can see if I paste here in this text field all of that HTML has been copied to my clipboard and I can now paste that.

The reason why that’s so useful is that we’ll see in a moment there’s going to be a way to copy and paste that HTML into the email client that you’re using. So, what you want to do is click on that copy HTML signature button in the previews HTML page that we just opened and then you want to go to the Emailify documentation page, there’ll be a link to that in the video description below as well, and what you want to do is scroll down on the left side panel here all the way down here to the exporting email section and you want to go down to the email signatures option down here. So, you want to expand that out and what you want to do is find your HTML email client platform.

You can see we’ve got Apple Mail, we’ve got spark, we’ve got Gmail yahoo outlook.com, so you want to go through those and find the correct one for you. So, depending on what email client you’re using this is going to be different depending on what email client that you need to insert the signature to so you can see here it’s got the instructions for how to copy the HTML signature and then it gives you step-by-step instructions on how to get to the place where you need to paste that code in and then it’ll give you some step-by-step instructions and tips if there’s anything to be mindful of. So, you just want to find your client go through those steps in the documentation and again take that HTML that you’ve copied from the preview page and paste it in wherever it’s required based on the steps here. So, you can see in the airmail example there’s a place in the account settings under signature where you’ll be able to paste in that HTML.

Again you just want to follow those steps to show the right place to paste in that HTML and then you’ll get your email signature looking as expected. So, that’s basically it for today. I just wanted to go through that experience of creating the HTML signature in Figma and then exporting it to HTML and pointing you to the documentation for how to actually then add this email signature into your email client to be sent out along with your messages.

So, I hope that’s been helpful if you’ve been wondering how to create HTML email signatures without hand coding them this will hopefully save you a lot of time by being able to design them in Figma and then have the code automatically exported to an HTML email signature package that you can then download and use for you or your team with your custom email signatures. So, thank you as always for watching and we’ll be back soon with more Figma tutorials like this one very soon.