How to add custom categories for Figma email components using Emailify

Video Transcript

Today I'm going to be showing you a Figma tutorial on how to create custom categories to organize your email components in Figma using the Emailify Figma plugin.

To get started, if you just click on the little "Resources" icon at the top of your Figma file and search for Emailify, and under the "Plugins" tab, you'll see Emailify pop up. All you need to do to run it is click on the Emailify item, and you can either click on the "Run" button here, or I'd recommend clicking on this "More options" icon here and just clicking "Save Figma Plugin." That's just going to save it to your Figma plugins list for easy access later.

So, I've already gone ahead and saved that Figma plugin. I'm just going to go to my canvas, I'm going to right-click anywhere and go down to "Plugins," then I'm just going to go down to "Saved Plugins" and click on the Emailify item, and 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 it basically works is it allows you to design emails in Figma and then export those out to HTML automatically. So, you can do this by using some of these starter components, or there are some other tools that you can use in the Figma plugin to help design. I'm not going to be going through all of those features today; there are a couple of other detailed tutorials on the YouTube channel if you want to check those out. Today, I'm just going to be assuming that you've already gone through those and understand how it works, and we're just going to be organizing some of these components into custom categories inside the Figma plugin today.

To get started, all we need to do is go over to the right-hand side here of the Figma plugin and click on this little Library icon. That's just going to load up the Emailify component Library tab, and what this tab does is it basically goes through your Figma file and looks for any Emailify components that already exist. So, in this case, I've already added a few components from the starter categories over here. So, for example, we can add any of these categories by just clicking on them. So, if you wanted to add a split block, for example, you could just add that, and that would add it to the page.

So, you can see here it's just added this little component here, and we can customize that and then drag it out of the email into its own little component library and start adding those to our page. To see those in the Figma plugin, you just again go to this little Library icon and click on the "Load all Emailify components" button, and that's just going to go through and load up any of the Emailify components that it finds in your current Figma file. So, if you want to use these, you can basically now add those to an Emailify frame. So, you can just click on your Emailify frame and add any of these components with one click just like that.

So, to categorize these to make it a little bit easier to sort them out in your interface, what we can do is click on this little edit icon. So, this little pencil icon here, I'm just going to click on that and I'm going to create a new category. In this case, I'm going to create a category called "Footers." So, we can add a "Footers" category, create that as a new category, and you can see when I add that new category, we've now got this interface popping up here where we can actually move some of our components into different categories. So, we can see we've got all of our components listed here, and we've got the categories that we can move them into. So, I can add a couple more. I'm just going to add a "Headers" category and another category for "Hero Blocks," so I'm going to call that one "Hero." Again, just click on "Create new category," and now we can start moving some of these components into our new custom categories.

For example, we want to move this footer component into the "Footers" category, so I'm just going to click on that category there and click on "Move components," and that's just going to move the component into that category. So, you can see here, the "Footers" category now has our component in there, and we can go ahead and do that for our other components too.

If we click on our "Uncategorized" tab just to see which ones don't have a category yet, we can now move some of these out as well. So, we can move our hero blocks into the "Heroes" category, so I'm just going to click on "Hero" and click "Move components," and you can see those have now been added into the "Hero" category, and the other uncategorized ones are in here. So, we could add the logo to our "Headers" category, going to click on that and click "Move components," and that's basically added that there.

Now, if we go back into our listing, I'm just going to close out of this little pop-up, and you can see here at the top, we've now got multiple category tabs that we can tab through. So, I can add the hero block, I can go to "Headers," I can go to "Footers," and this is basically now categorizing all of the components that we had listed here into subcategories to make it easier to find things. So, we can see we've still got one that's uncategorized, which is just this one here. So, we could go back into our categorization panel, click on the little pencil icon, and create a new category for that one. So, we could call that one "Content" and just add that as a new category, and then we can move that one into our new "Content" category like that. And that's basically going to remove the "Uncategorized" category because there are no other components that haven't been categorized, and now we can just see we've got our categories that we've added as custom categories here, and you can see all those in there.

So, that's a really quick way of sorting your components that you've created in Emailify into custom subcategories just to make it a bit easier to find things in the Figma plugin. And you can also delete these categories as well. So, let's say we wanted to delete a category. You can just go down here to "Remove category," select a category to remove. So, in this case, I'm just going to remove the "Hero" category and click that, and it's just letting us know that this isn't going to delete the components. It's just going to delete the category. So, if we now remove this "Hero" category, you can see here that our hero components are now uncategorized, and the "Hero" category has been removed. It hasn't removed our actual components; it's just moved them into the "Uncategorized" category again. And so now we can basically recategorize those if we wanted to. So, we can select those hero components and drop them in the "Content" category and click on "Move," and that'll pop those in there, and you can see they're now in the "Content" column or "Content" tab instead of the "Hero" tab. So, yeah, that's basically what that looks like.

You can customize these to be whatever you want. You can have as many tabs as you need and move all those around. So, it's really up to you how to organize that with you and your team. And the other cool thing you can do is also tag these with extra descriptions and documentation links. So, for example, if we wanted to add some documentation to this particular hero component, you can basically click on the component layer in Figma and then click over here on the right-hand side, click on this little component configuration icon. And when you click on that, it's basically going to open up this little pop-up here in Figma. And so, you can now write a description of how to use this component. So, you could say, "Use this component for any CTA blocks at the top of an email design." So, we can add that in there. And we can also add a link to any documentation. So, if we've got an external documentation site, we could add a link to that in here. So, we could do, you know, docs.emailify.com, which isn't a real domain, but we could add something like that. And then you could have a hero page or something like that.

Once you've added that in there, and then if you go back to the Figma plugin and click "Refresh" on this little icon here, what that's going to do is it's going to automatically take that link. So, we've got our documentation link that we added, and it's going to add that over here onto the label for the component. So, if you were to click that link, that'll open up the web browser to the documentation page that you've set up here. And if you hover over the thumbnail, you can also see the description. So, we've got the name of the component, and then it's also giving us the description of how to use that component in the tooltip that automatically pops up when you've got the hover state added on the thumbnail. So, this one here doesn't have one, so you can see it's just got the name. But over here, we've got our description. So, that's just a really easy way to add a bit of context to your components to help further organize them as well.

So, yeah, that's basically it for today. As I mentioned, this tutorial is just a really quick one to go through the categorization. If you want to go through how to actually set up this component library and design it, there's another very detailed tutorial on the website on the YouTube channel. So, you can go ahead and find that one in the Emailify playlist. But for today, we're just going to leave it there and keep it pretty simple. And as I mentioned, if you do want to export these, you can basically just click on the "Export HTML" button and export those to HTML. But again, if you want to check out what that looks like, I'd recommend going through the other component library tutorial, and that's going to give you a much better description of how to go through those steps. So, we'll leave it there for today. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.