How to design a Figma component library for HTML emails using Emailify

Video Transcript

Today, I'm going to be showing you how to create a reusable Figma component library for your HTML emails in Figma using the Emailify Figma plugin. To get started, all we need to do is go to your Figma file, click on the little resources icon at the top here, and then if you just search for Emailify, you can either run the Figma plugin by clicking on this run button here, or I'd recommend clicking on this more options icon here and clicking save Figma plugin. That's just going to save it to your Figma plugins list for easy access later.

I've already gone ahead and done that. I'm just going to go to my canvas, right click anywhere, go down to "Plugins", go down to Saved Plugins, and then I'm just going to click on the Emailify item. That's just 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 basically helps you to design emails that can be exported to production-ready HTML directly from Figma. So you don't need to do any coding. You can just design the email in Figma, and the Figma plugin will automatically take care of the code and export it to HTML for you.

The first thing that we'll need to do is just create a new Emailify frame. We can do that by clicking on this little input here and just giving it a name. So we can just call it "my email design" and click on the add new Emailify container button. That's just going to add a brand new Figma frame to your canvas.

It's worth noting that this is a special type of frame that will allow you to add different components and create custom components that you can then design out your email with. So, I just want to really stress that this Figma component library is only going to work if you design the components using the tools included in the Emailify Figma plugin. If you bring in components or designs or emails that you've designed separately, so if you've designed them prior or design them outside of the Figma plugin that you've just created in Figma, it's not really going to work. It's just going to get rendered as a flat image. It's not going to load in the rich content or the HTML that you'd expect.

I just want to really stress that starting out, just in case you thought that you could bring in an email from the outside and render it as HTML. That's not really what this Figma plugin is designed for. But I'm going to go through how to design the components in here using the tool, so you can hopefully follow along and create your own Figma component library that's going to look really good when you export it to HTML. With that disclaimer out of the way, let's get started. We can get started by clicking on any of these tabs here. This is going to give us a bunch of different starter components, a lot of common layouts, and a lot of common components that we can use that will then be able to customize into our own library in a moment.

For example, you might want to add things like a logo and you might want to add things like a CTA. So we've got a little hero component here. Let's just keep it really simple for starting off with and customize these two components first.

To customize a component, we can just go in here and basically drop in our own content. So if we go to our images folder on our computer that we want to reference, we can do things like drag our own images into Figma and use those. For example, I might want to swap out this logo with my own. If I just scale down that image and drop it into my layer, I've basically got my component here.

It's really important to note the structure of these components. So, basically, you've got things like rows. Rows allow you to have multiple columns, and then each column can have its own stack of layout contents. For example, we've got an image here, so I'm just going to drag my image layer into the column, and that's going to allow us to remove the old image. Now, we've basically got our own image in here, and you can see when I preview the email in HTML, this is going to render this image here as a little image, and the rest of the content is in HTML as you'd expect. So, we can switch between phone view and desktop view, so we can get a sense of what that's going to look like.

We continue customizing this now by doing things like swapping out images. So, we can swap out this hero background image with our own. We can jump in here, choose a new image, for example, so I might just want to drop in this background here. And of course, we can customize the content of this text layer, so we could remove what's already in there and just change it to something else. The same thing goes for this button, so we could say "try now". We can also, of course, change the font styles as well. You might want to change that to be medium, or you might want to change that to be medium italic or something like that.

It is worth noting that because these are HTML emails, the range of fonts that are supported on different email clients will vary. So it's best to try and stick to web-safe fonts where possible. But for today, I'm just going to be keeping it pretty simple and just keeping it as bold for now.

Now that we've got these two components set up, basically what we can do now is start expanding our Figma component library that can be used directly in the Figma plugin. What I mean by that is because we've got these two components in our design, we can basically now break these out into their own area. So, if we move these components up into here and just split those out from the actual Emailify frame, we can now basically load these in as a custom Figma component library in the Figma plugin.

To do this, click on the little component icon here, the little Figma component library icon on the right side of the Figma plugin. Click on that and then click on this "load all Emailify components" button. I'm just going to click on that now, and that's basically going to load up any Emailify components that are found in this Figma file directly into the Figma plugin. This allows us to use this as a custom Figma component library tab, similar to how we've got our different icons in here in these preset tabs.

We've now got a custom Figma component library icon over here that we can use to automatically load up any components that we've already added and customized in our Figma file. You can jump to the components by clicking on this little icon, and that'll let you easily see which component is where. But more importantly, we can now use these to populate any Emailify designs in our design.

If we go to our frame over here and click on this hero component, I'm going to click on that, and that's basically added it as a new instance of the component that we've got over here. For example, you can see that if we changed any of the styles in the original component, like changing the font size, that automatically gets inherited by the instance over here that we've used from the Figma component library.

The same thing goes for the logo. We can add our logo into the mix by clicking on the icon, and we can rearrange that. Because it's auto-layout, we can just drag and drop these around, and you can see how we can start building out our own totally custom Figma component library using the Emailify components.

Just to add a few more to help you see what kind of components you can add, we'll go to our images tab over here. Let's start adding a new component. I'm just going to add a new starter component here and drop that in. In this case, I might want to create a split image text block with my own content. So, I'm going to swap out this image over here. I'm going to go to the image, and I'm just going to go to my assets folder. I'm just going to drop in this character. I've got a character that I want to add; it's just a transparent PNG, so I can basically drop that into my Figma file. Again, I can drag and drop that layer directly into the column. We'll make sure that it's going directly into the column, and now we can basically resize that to be the size that we want.

I'm just going to put that in there. I'm going to change the alignment to center, and I'm just going to remove the other image layer that we had in there. Now, we can basically do things like adding a custom background image. So, if I don't want a solid fill, I can change that to be an image and drop that in there. And now, if we add another background, we could add this background image here, drop that in, and now you can see we're starting to get a bit of a background image with a foreground image layout happening. I can also rearrange this content, so I can drag and drop the columns around to swap those around if I want to. I can change the font style, so we can make that white, giving it a bit more contrast. And I can also do things like adding a transparent overlay onto the background. I can basically click on my row, go to the fills, add a new fill, and you can basically add a transparent overlay there to increase the contrast.

And now, if we load that up in our preview, you can see here, once it loads up, we've got our image text column, and if we look at that on desktop, that's what that looks like there as well. So, I'm pretty happy with that new component. We can go ahead and extract that component into our components over here. I've just broken out that component that we designed up here along with our other components. And again, if we go to the library tab and just hit refresh, so this little refresh icon here, that's going to load up the new component that we just designed and added to our components list as well.

I'm not going to build out dozens or hundreds of components with you today, but you can imagine what kind of other components you'd want to add. Maybe you want to add a footer component, a standardized footer component that you then customize. We could customize that to be the same color as our logo, so if we want to make that pink and then change some of the content colors down here, we could definitely do that and swap those in. So, we could make those darker, and that would be your custom footer component that you could then use for all your other emails as well. So again, I'll just break that down to here, and you can see we're starting to build out this Figma component library that can be reused across all of our emails.

For example, if we were to add a new email, just click on this little plus icon and create a new email. We'll call it "new email" and add that container. It's basically going to add a new Emailify container, and again, we can start adding our instances in here as well. We can add our logo, our content block, our footer, and another content block. I'll show you how to customize these as well. Now that we've got these added as instances, you can basically override the content of them in your different emails. For example, if I want to change out this character, I can just go into my image layer in the instance, click on the fill, and override that fill with a different image. I can just drag and drop a new image into here, and that's just going to swap out the image that we've got in our layer. I can change the fit of that, so if I want to make sure the image fits, I can just click on "fit," and that will scale it up.

I might want to add a bit more padding in my original design, so if we want to go back to our original component and click on the column, the best way to adjust spacing or heights or things like that is always to use the padding and item spacing. In the auto layout panel over here, you basically want to use the padding settings. We've got horizontal padding and vertical padding, so for example, if we want to add a bit of vertical padding to the top, we could add 20 pixels to the top of that column, and that will automatically add that spacing to any instances of that component as well. That's the way you really want to tweak it.

For example, over here, we've already got some vertical padding set on the logo component, so we could tweak that by just changing that in the settings in Auto layout. The same thing goes for item spacing. In our hero component, we've got some item spacing set, so we've got 16 pixels of vertical space between our items. We might want to increase that, which you can do by changing the value over here, and that's just going to increase or decrease the item spacing. You can also do this for columns as well. If you've got a column, you can change the item spacing between those elements and adjust it that way. You always want to rely on the auto layout settings as much as possible.

Doing things like setting heights, for example, won't work when it gets exported to HTML. It'll visually look like this in Figma, but if you preview that, you'll notice that the HTML content itself is what drives the height. So even though we've got this height set here, because the content of that column exceeds the height of that column, it's going to push that out anyway. What you want to do is always make sure that things like columns and rows are set to "hug contents" for their height. Click on "hug contents" and then use the padding to set the height of that element as you'd expect. Always rely on the padding and auto layout settings as much as possible. These auto layout properties are set by default when you create elements from the Figma plugin, but in case you've got some set heights as fixed accidentally, you can change those to "hug contents" and set them back to normal.

Now that we've got a few different components set up, I'm going to go through other ways that you can customize these. As I mentioned, you can do things like change the fills, swap backgrounds, and this is a quick way of customizing your instances that you've already got set up. The other thing you can do is add things like links. If we want to add links to buttons, you can do that by clicking on the HTML and mobile settings button, clicking on a button layer, and then you can paste in your clickable link URL here or adjust things like font size, alignments, padding, and other settings. You can hide things on mobile or show them on mobile, and these will depend on whatever context you've got selected.

In this case, I'm looking at a button layer. I might be clicking on a row layer, and that's going to give me a different set of options. I might be clicking on a text layer, which will give me another set of options again. So you really just want to go through and customize these layers one by one based on the HTML and mobile settings context.

So you can basically go through and customize these things on mobile. For example, you can add image alt text, so if you wanted to make this image have some different alt text, you can just paste that in there. Or you can do things like add a clickable URL to images as well. So I'd highly recommend exploring all of these different HTML and mobile settings properties just by clicking around on the different layer types that Emailify generates.

The other cool thing that we can do now that we've got our component libraries starting to be expanded a little bit is we can search. So if you wanted to just find all the Footers in your Figma component Library, you could search for a footer and it would bring up any results that match. Of course, you can also rename these layers, so if you wanted to rename a component, you can just go into your original component which you can easily jump to through the Figma plugin and rename it. So you could just do a rename to this layer, for example, and call it a standard primary footer. And if you now refresh your components, you'll notice that the result is updated to standard primary footer in here as well.

You can also sort your components. So by default, it's just sorted to the newest one added to Figma. So you can sort those from oldest to newest or newest to oldest. You can sort them by Figma layer name, so if you wanted to sort them alphabetically, you can do that. You can also sort them visually, so if you wanted to arrange the components on your page visually, you can do that. So we can just arrange these and then match that in the Figma plugin.

There's also a couple more ways of adding custom components to your Emailify designs. So the first one is to click on your Emailify layer, and you'll notice that there's a little pop-up called "quick add selected layer". You can just go ahead and click on this "choose element" option, and in this case, I'm just going to add a new content row. And then click on the "add" button, and that's going to add a brand new Figma component to my email. And you can customize the content of that by clicking on the column. So it's already pre-selected that for me, and then you can basically choose what kind of content elements you want to populate that with.

You can quickly add different content elements in there. So you can add things like buttons and images and all that sort of good stuff that you'd expect. You can also use this on any existing components that have been added through the Figma plugin too. So for example, if we want to add a button to our split component here, we could just jump out to our component, click on that column, and you'll notice that the same selection is available there. So we can actually add new elements to here. So we could add a social icons component, for example. Add that in, and that just needs to be changed color, so we can change the color of that. And you can see there that we've added a new social component just by using the quick add options there.

And the same sort of thing, it depends on the context. So now that we've got our social component that we've just added selected, we've got a brand new context of adding social elements. So we can actually add new social icons automatically. So if we click on the "add SoundCloud" option, add that in, again it's just going to add it as a black icon, so we'll just have to change that color in this case. And you can basically add that in like that. So that's a really quick way of adding new content into any existing components, giving you the flexibility to customize your designs as needed.

As I said, this is a really nice way of building out custom layouts. So you can add multiple columns. So you could add another column to this particular row, add that in, and now you can start building out a split column layout for this particular component. So you can just go through and basically add whatever you want there. And once you've got that sorted out, you can then rename it. So we can call this a different name. So we can call this one "split block". And we can just customize this a little bit more, so maybe we just want to have it as a two-column split component.

And then, again, we can just break that out into our components. So we'll just break that out up here. And of course, if we go to our Figma component Library, refresh that again, you can now see that we've got our split block component there, which we can obviously customize. So we could customize these starting contents. So we can go to our fills, we could swap out these images. So I'm just going to swap in some different images, drop those in, and populate that to be a little bit more on-brand for the starting component. So there we go, that's what that looks like there. And if we refresh, you can see that's been added here. And of course, we can now add that into any of our email designs by clicking on that icon, and there we go, you've got that customized block that we just added.

The other way that you can do that, if you want a more visual way of building out a custom component, is you can go over to the custom tab over here. So if you click on "custom", you'll notice that there's a button called "build new custom component". So we're going to click on that. That's going to pop out this little Builder interface, and it basically allows us to easily build out different content types. So we can build out double columns, single columns, we can do Heroes (background images), and start building this app visually.

If we know we want to add a title and body content on the left and an image on the right, along with maybe a button, we can basically visually build that out. Call this whatever we want, so again, I'm just going to call this "split CTA". "Create and insert new component", I'm going to click that button, and that's going to scaffold out a brand new component that we can again customize. So it's more of a visual way of building out what we just did with the quick add options. And of course, you can combine these two things as well.

Now that we've got our scaffold row column layout set up, you can again just use the quick add option, add some new content in there, and that's just going to automatically add those in as you'd expect. So the quick add selection is a really good way of quickly adding new content to a layer selection based on whatever that layer type automatically supports. It's just a really quick way of adding in new content layers like that.

The other cool thing about this custom builder is you've now got this saved as kind of a little template. So even though we've got it over here in our icons, you can go back to that custom tab and edit that layout. So you can go to the edit button, and if we wanted to make sure that this always had a social component, you can drop that in there and update the saved component. And that will allow you to update that component and add it as a new component to your page just like that. And it's going to allow you to leave the one that we've already got there as its own previous component. But because we've created a new version, this spins up a new component. So if we go to our Figma component Library, refresh that, you can see we've got now both of our components in there that we can customize however we like. So we could split those out and move them over here and start designing customizations.

You can also just delete components entirely. So, for example, if you're going to delete these two, I don't want them anymore, delete those components from my Figma file, refresh, and those will be gone from your Figma component Library as well. The other cool thing you can do, which might be handy if you're really building out dozens or hundreds of these components, is to basically just split them out into their own page. So you might want to split these out into a new page. So if we cut those out, create a new page in Figma. So I'm just going to name this page "Emailify components" and just paste those into here.

And now if we swap back to our designs page, so I'll just rearrange these pages and refresh that. So if we actually just close off the whole Figma plugin, rerun the Figma plugin, you'll be able to see that when we re-run the Figma plugin and refresh the Figma component Library again from our designs page, even though there's no components on this page whatsoever, we've got them all stored over here in our different Emailify components page. We can still access them from this other Page by clicking on the "load Emailify components" button again, and that's basically going to find those components that are on this page and automatically load them up in our designs page over here. And we can still jump to those components from this page. So you can click on the component icon, click on that, and that will jump you to the other page. The reason this is popping up is because it doesn't have an Emailify frame on this page yet, so you can either ignore that or just add a placeholder. So I'm just going to add a placeholder for now, just so it doesn't ask me to create one. Just put this over here; we don't really need to use it. But yeah, you can basically store all these components on a separate page and really build out its own Figma component library page separately from your campaigns.

You can imagine when you need to create a new campaign, you can just create a new page, call this, you know, "new campaign - campaign April 2023," and again, start adding a new component. So you can say "April email," add that as a new email frame, and again, because we've got our components in here, we can just start building out our new email based on these components that we've already designed and customize them as we need to. So we've got our new content for this campaign, we can override the images. So again, we've got our images folder, we can just drop in a new image and start customizing this content with our components that we've already got added from over here.

Finally, I'm just going to show you how to then export these emails to HTML. So, as we've been seeing, we've designed all these emails using the Figma plugin, so that means after we've previewed it, after we've tweaked any settings that we need to. As I mentioned, you can really drill down and explore the HTML and mobile settings, so if you want to change some of these font sizes on mobile, if you want to change the padding on mobile, you want to change the visibility of things, you can really dive deep and customize the mobile options and things like links, as I mentioned. So definitely explore that in your own time.

But for now, I'm happy with my emails that are showing up in the preview here. So, I might just want to add another footer, so I'm just going to do that. But otherwise, I'm happy, so I'm going to export these emails to production-ready HTML by clicking on this "export HTML" button in the Figma plugin. And I'm just going to select both of these emails, so you can select which emails you want to export. I'm going to export both of them. You can add subject lines here, so if you want to add subject lines and pre-header text, you can do that here. You just have to populate those, and then you can basically select the export option from this dropdown.

By default, it just exports to an HTML email package that'll get downloaded to your computer as a zip file. But if you're using a different platform, you might want to upload to that platform automatically. So if you're using MailChimp, you can just drop in your MailChimp API key, same with Klaviyo, drop in your API key for Klaviyo, and that will automatically upload these templates to your platform. But for today, I'm just going to be keeping it really simple and exporting the HTML to my computer. You also have the option of uploading the images to our CDN, so this will automatically upload the images online, and you don't have to manually upload them yourself. Today, I'm just going to be leaving that off, just so it's a quicker export. I'm going to click on "export to HTML," and this is now going to take our HTML email designs that we just created in Figma using our Figma component library, and it's going to export them and all of the images, all of the HTML code to HTML, and it's going to give us a zip file.

If we click on this "Download your zip file" button, I'm just going to click on that, save that to my desktop, and if I now unzip that zip file, so I'm just going to unzip that by double-clicking it, opening up my folder, and you can see here we've got our emails exported to HTML. So I can preview those in the browser by opening up this previews.html file. So I'm just going to drop that into my browser, and you can see here that we've got our HTML emails as we designed them in Figma. So this is our second email, we've got both of them on the same page as a preview. You can see the mobile version as you'd expect. So these are all HTML, you can see those are images, I've got the contents here, these are all links, so it's exporting exactly how we expected.

This is the preview page, and then we've also got our individual email exports here. So each of the folders is its own export, so you can just drop those into your browser, and you can basically use those however you want. This is production-ready code, so you can take these HTML emails and use them however you want to, and you've got your images here as well.

I just wanted to show you that final step in case you're wondering how to actually export the designs that we've just created in Figma to HTML. It's really easy, as we just saw; you just click on the HTML export button, and you're ready to go. I think we'll leave it there for today. I just wanted to go through some of the fundamentals of creating an Emailify-based Figma component library in your Figma file. This is going to be a reusable Figma component library that you can keep and maintain to then reuse across any new emails that you design and have them all in a centralized place in your Figma file. But more importantly, have them easily accessible through this Emailify Figma component Library tab that you can access via the Figma plugin and automatically insert these components that you've designed to your Emailify frames directly from the Figma plugin.

I hope that's been helpful if you've been wondering how to think about creating an email Figma component library in Figma. This is a really good way of doing it, especially because you get the added benefit of exporting the designs out to HTML through Emailify. So I'd highly recommend checking it out if you want to attempt creating your own email Figma component library in Figma. I hope that's been helpful for you to get started. So, thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.