How to easily add elements to HTML email designs in Figma using Emailify

Video Transcript

Today I’m going to be showing you a brand new way to really easily build out your HTML email designs in Figma using the Emailify Figma plugin.

To do that, we just go to the Figma Community and if you haven’t already done so, we’re going to install the Emailify Figma plugin by searching for the word “Emailify”, and under the “Plugins” tab you’ll see Emailify pop up. If you haven’t already installed it, just go ahead and click on the “Install” button on the right hand side and then you can switch back into your Figma file to get started.

Once you’ve gone back into your Figma file, just right click anywhere, go down to “Plugins” and then click on “Emailify”, and that’s just going to start up the Figma plugin we just installed a moment ago. You’ll notice here that I’ve already got an email in my file, but if you’re just getting started with the Figma plugin you can click on this little “plus” icon to create a new email. You can just create a new email frame here, and this is going to allow you to add either custom preset elements or preset modules from these menus, or for today we’re actually going to be focusing on a brand new feature that doesn’t rely on this either. Jjust for a quick refresher, you can add content components by clicking on any of these categories, clicking on any of these components and that will automatically add them into your Figma designs, just like that.

For today, I’m going to be showing you a different way of going about this, and also a way to customize these that you’ve already added. For example, if we just add a few in here and let’s say that we want to add some more columns into this particular component, we can now do that by just selecting our element; if we click on the row in Figma, I’ve got the row selected, and you’ll notice down here there’s a new option called “Quick add element to selected layer”, and it’s telling me that I’ve got a “row” selected. What that allows me to do is now add a new content column into that row just by clicking on this option, and then clicking on the “add” button. You can see here it’s added a brand new content column, which we’ve now got selected as well, which gives us a whole set of different options.

Now we can go into those options, and if we know that we need to add some text, we can add text to that column, we can add images, we can add a button, we can add all different things, spacers, data tables, social icons; all the stuff that you’ve come to expect from the other categories. Now you can basically add them yourself really easily without copying and pasting existing elements or trying to design your own, this is going to be a really quick and reliable way of doing that. As I mentioned you can also do this for existing components; let’s say there’s a common use case of wanting to add your own social icons or different social networks; if you double click on to the social layer that’s already been created by a component, or created by yourself by adding a new social layer, you’ll notice down here that once the social layer is selected we now have a whole bunch of different social networks that we can add in. If you just click on the one you want and then click on the “Add” button, that’s going to automatically add that layer into your social component. We can go ahead and add a whole bunch in there, and again, you can add these yourself manually, but this is just a really quick way of adding some of the most popular social platforms into the component.

If you need to link those up all you need to do is click on the “social icon” layer itself, then just click on the “HTML and Mobile Settings” button in the Figma plugin, and then you’ll be able to go ahead and paste in your links to those particular social networks. If you have a Spotify account or a Spotify page, you could just paste that link into the clickable link URL field. This also applies to things like things like buttons, where you can paste in a clickable link and also images; if you need to link one of the images that you’ve just created, you can totally just paste in your clickball link URL. I won’t be going through the entire design process for this particular Figma tutorial, I just wanted to go through some of these new context options; if you do need to get a more comprehensive overview, we have some other YouTube videos on the channel thatI’d recommend checking out; but for today if you’re just checking out this new feature, this is basically how it works.

I’ll show you a few more examples; if we click on the actual email frame itself, we can do a few new things like adding in a hero background area. If we click on “hero background” and add that in, we now have this brand new hero section which we can also add text to, we can add buttons to, we can totally customize that as you would expect. If we wanted to change the font, or change the alignment, or change the size, you can basically just customize this in Figma as if you were designing anything else, and you can just design it to the way that you want, essentially. We can increase the radius on these buttons, we can change those button colors if we need to, we can do all that kind of stuff. The same thing with the hero, you can change the background image if you want to drop a new image in there that’s definitely something you should do, or if you want to change the overlay opacity, or add more overlays or less overlays you can do that, too.

You can also rearrange these components as you would expect; if we click on our new hero, and we actually want to bring it up to the top, we just drag that layer up to the top and that that’s where it’ll show up in our new ordering. You can also get rid of the columns if you don’t want to keep some of those layers you’ve created, just go ahead and delete those, and that’ll just remove them. Because all the elements are using auto layout by default, this is going to make it really easy to do that. If you decide that you actually don’t want any of those old social icons, just delete them, or if you want to reorder some, you can do that too; just reorder it in Figma and that’ll automatically reflect in there.

Probably the most common one you’re going to be using is if you click on the email frame itself and then click on the “Content Row”, the content row is basically the most standard section in the email. If you click on that to add a content row, that’s going to give you a new row with with a single column, and you can just go ahead and start adding your content into that column just as you’d expect; that’s a really good one to add.

The other thing that you can actually do is wrap multiple rows as well; if you know that you’ve got a couple of different rows and you want to actually group them together in a container, what you can do is you can click on the email, you can add a row wrapper. If we click on the add row wrapper option, click on “Add”, and you’ll see down here that it’s added this brand new row, or brand new wrapper, I should say. If we know that we’ve got these two rows up here and we want to bring them into our wrapper, we just select those, drop them into the new wrapper frame, and I’m just going to get rid of the blank one, and what that allows us to do is actually wrap multiple rows and give those rows some padding and a background color around the rows itself. This is a very special layer that allows you to do that; normally you can’t do that, but this allows you to do that, so that’s what that looks like there. You can also add spacing between those if you need to as well by increasing the item spacing in Figma, that’ll increase the space between the rows, but by default it’ll just keep it flush just like that. That’s basically it, you can have a bit of a play with all of these new elements, there’s a whole bunch in there; there’s navigation links that you can add, so you can basically create menus, and if you click on the navigation layer you can add more links, and again, you can customize those just by clicking on the layer just as we did with the social icons. If you double click on the link layer, click on the “HTML and Mobile Settings” button, and you just paste in your link into this box here, and that’ll turn that into a link, and you can just customize the text as well like that.

As I mentioned before, we can then export this out to HTML; and if you want to get a preview of what that’s going to look like, just go ahead and click on the “Preview” button in the Figma plugin, and this is basically going to load up a real preview of the HTML inside the Figma plugin before you go ahead and export it. You can see here that it’s looking really good, it’s mirroring what we’ve designed in Figma. If we want to change it from the desktop view to a smaller device we can do that, we can bring it down to a really small one, and if we notice that something in here doesn’t quite look good on mobile you can actually override those as well. If you click on the text layer, click on the settings icon, then you can actually override these settings just for mobile. If we say we want to make this a font size of 28 instead and then refresh it, that allows us to actually override that, and it will always keep the original design in Figma as the desktop one; you can just override them for mobile and it’ll keep the desktop ones by default.

Okay, that’s basically it; I’m just going to export that out to HTML just so we complete the whole process. All you need to do is click on the “Export HTML” button, make sure you’ve got your email selected; I’m just going to export one today, so if I just export my new email, you can add a subject line and preview text as well, but for today I’m just going to leave those empty. There’s an option to also upload the image URLs if you want to have them hosted by the Figma plugin, you can do that, but for today I’m just going to click on the “Export to HTML” button; that’s going to render out all of the images and generate all of the HTML for us.

I’m going to click on “Download your .zip file”, save that to my desktop, and if I double click on that zip file, it’s going to open up the folder. I’m just going to open up that folder that it’s unzipped, and if we open that up, you can see here that we’ve got our email inside. These are all the images as we’d expect, and also the HTML file here. It also generates a previews page, so you can use this to preview all the emails that you export at once; I’ll show you what that looks like just by opening up in the browser, and there we go, this is the rendered HTML, the desktop version that we can see here. You can see all the links and those have got the links set to them we’ve got these different social icons that can be linked, and then you’ve got the mobile preview as well. You can get a really easy overview of your mobile and desktop designs, and this can be really handy for sending to clients or stakeholders, you can upload this file somewhere and send them a preview link, and that’s going to be a really easy way for them to review the designs that you’ve done. Hopefully they’ll look much better than these ones, these are not good designs, but in the interest of showing you how this feature worked, I just wanted to make it really simple and clear to just to show you the functionality of this new feature.

Okay, I think that’s going to do it for today. I hope if you’ve been looking for an easier way of customizing your emails just by adding individual elements instead of having to use the preset components and customizing those to your heart’s content, or using the custom HTML builder, which I haven’t got into in this Figma tutorial, there’s another YouTube tutorial about this custom component builder, you can use that as an alternative to what we’ve just gone through as well. For today, I really just wanted to hammer home how easy it is to now select these elements and contextually add brand new elements into them really quickly. I hope that helps increase your efficiency with designing HTML emails in Figma, and I hope you give it a go with you or your team and improve your email workflows in Figma. Thank you as always for watching and we’ll be back soon with more Figma tutorials just like this one.