Video transcript
23-minute video ·
Today I’m going to be showing you how to create custom HTML email components in Figma using the Emailify Figma plugin.
The first thing we need to do if you haven’t already done so, is just go to the Figma Community and search for the word “Emailify”, and if you pop that in and click on the “Plugins” tab you’ll see this result pop-up. All you need to do is click on the “Install” button on the right-hand side, and once it says “Installed”, we’re ready to get started.
What you can do is just open up a brand new Figma file, and to run the Figma plugin you just right-click anywhere, go down to “Plugins” and click on “Emailify HTML Builder”, and this is going to open up the Figma plugin that we just installed.
The first thing we need to do is just give the email a name; I’m just going to call it “C”omponent Test”, just for this tutorial, and I’m going to click on “Add new Emailify Container”, and that’s just going to add a brand new empty frame to our page. It’s a special kind of frame that allows us to add these components from the Figma plugin, and then we’re also going to be able to add our own custom Figma components which I’ll show you in a moment.
If you’ve already seen this tutorial in another video, you’ll know that you can basically just click on any of these components, you can go to different categories and immediately create those components; these are totally customizable these are native Figma components. You can customize them, and then you can reuse them as instances, which means that you can change anything in there; if you wanted to change the font size of the body, you could do that, and it would update across all of your instances. That’s how you can do it, but if any of these components that you’ve got in the pre-built component section aren’t what you’re looking for, we can actually create a custom one by clicking on the “Custom” tab in the menu up here.
If you click on “Custom”, you’ll see it comes up with this little call out saying that we don’t have any custom components yet, but what we can do is click on this “Create New Component” button, so I’m going to do that now and that’s going to bring up the custom component builder. This is a brand new feature in the Emailify Figma plugin, and what it allows us to do is customize our custom Figma components using this interface. What I can do is essentially grab any of these elements; if I wanted to grab a title tag element, I can drop that in there, I can drop in some body copy, I can add a button. You can see up here we’ve got some layout options; at the moment it’s just defaulting just a single column, but if I want to make that into a double column I can just click on double column, and that will add a brand new column here. I can do things like add an image to that second column, and you’ll get a sense of what this looks like if I just create this component now. I’m just going to call this one “Split Image Component”, and I’m going to click “Create & Insert New Component”, and you can see there it just created a brand new Figma component under the custom components category, and it’s also automatically added into our Figma design.
This is completely customizable, as the other ones were; it’s a native Figma component, so you can modify that content, you can go ahead and still change things around in here, you can add images, and update padding, all that sort of stuff. We can update that, and that will be reflected in there, and again, you can duplicate that and create an instance and that will allow you to easily keep those changes in sync across your design or in other emails as well.
There’s a few other things we can do here, we can edit the component; we can click on this little “settings” button and that’s just going to bring up the component that we just added. What I can do is I can move that around a little bit, add new things to it, so I could add some social icons down here and then if I go ahead and update that by clicking on “Update Saved Component”, you can see here that it’s updated the component. It’s worth noting that that will not impact anything you’ve already added to the Figma page, it’s just going to update the saved custom Figma component for you to add in the future again. If you click on that image that little icon, you’ll see that it’s added our brand new updated component.
The alternative way of doing this if you don’t want to override the original component, but you want to use it as a base for a new component, is you can click on that “settings” button again, and in this case I’m going to do a triple layout just to show you a bit of a different example. In this one, we’ll do a triple layout; I’m going to move this over there, I’m going to do it kind of like a right aligned one and basically just flip a few things around. In this case, I’m just going to add another bit of content in the middle, and to the left, and I’m just going to make that centered and that right aligned, so you can change the alignment of each column down here as well, and the vertical alignment of the row up here you can change. In this case, instead of clicking on “Update Saved Component”, what I’m going to do is instead create a new name; I’m going to call this “Triple Component”, and I’m going to click on “Create & Insert New Component” (instead of “Update Saved Component”). If I click on that, you’ll see here that it’s created a brand new component; it hasn’t updated our original one, it’s left that intact, but we were able to use that as a base to create a brand new “forked” Figma component, I guess.
That’s added it to the page down here as a brand new Figma component, and it’s left the other ones untouched. Again, you can go in there and edit that one, too. For example, if I wanted to make that, let’s say, bottom aligned (as far as the row goes), I can do that. If I click on “Update Saved Component”, you can see here it’s updated the saved component, it hasn’t modified the one we’ve already added to Figma, but I can now add that as a brand new Figma component by clicking on it. Now it’s bottom aligned, and of course, you can update these things inside the component itself. If you wanted to do a different alignment, you can change it in here just by clicking on the column; you can see you’ve got the columns here and I can change that in my Figma settings, and update that manually, too. That’s all all possible in there, and these are totally customizable; it’s just to serve as a bit of a base for brand new Figma content components.
If we add another one, I’ll just show you a few different alternatives. We can do things like add a “hero” component; this allows you to have a real background image with rich text content, or rich text elements over the top of it. If we click on that one for example, and then we add a title, and a body, and maybe a button, just to keep it simple; I’m going to center align that, I’m going to call it “Custom Hero”, and I’m going to click on “Create & Insert New Component”, and you can see here it’s created a special “hero” Figma component; you can see a little hero emoji, and what that means is it’s effectively going to let you add a real background image. If we open up that fill, you can see here that is an image fill, so you could drag a brand new image onto that fill and that would allow you to have a different background image, and of course you can customize this text, and the colors, and spacing, and fonts and everything that you need to in there.
We can actually see what this looks like just by opening up the preview feature of the Figma plugin. I’m just going to move this up to the top just to give a bit more of a preview. What we can do is click on the “Preview” button in the email if I header, so if I click on “Preview”, that’s going to generate a real HTML preview in real time inside the Figma plugin. This is just before we export the final HTML, so you can get a sense of what it’s actually going to look like. I can update that to desktop sizing, and you can see what that’s going to kind of look like. You can see there it’s basically matching up as you’d expect, but this is the real HTML that’s going to get exported, these are real buttons, real icons, and you can customize these on the page and then refresh the design by clicking the “refresh” icon. You can go ahead and also add mobile updates, so if you click on the little “settings” icon after clicking on any layer, you get a whole bunch of different options. If I wanted to optimize this for “iPhone 12” and I noticed that something needed to be adjusted, I can open up the settings, I can click on either a row, or I can click on a column, I can click on a text layer; and that allows me to do things like override the font size on a mobile device, update the line height, override the letter spacing, update the alignment; I can do all these things. I can hide it just on mobile or desktop; so you can basically click on any of these elements, and depending on what the element type is, it’ll automatically bring up these options for you. You can add things like the link, so this Facebook icon you would want to paste in your Facebook url there and that would automatically include it in the HTML export. Those are just normal features, they apply to the regular content components as well, so you can click on those and you get the same options, but you’ll also get them with your custom Figma components that you’ve added in, too. That’s what that looks like there, just in the live HTML preview.
The other thing you can do is, there’s another special type of component we can create; there’s two ways of doing this, but you can basically add custom HTML or custom code into your components as well. I’ll show you the first version of that just up front; the first way we can do that for example is if we open up, let’s say, our existing Figma component and we want to add some code into that component, what we can do is we can drag this code element, drop it into here and I’m just going to click on “Update Saved Component”, and if I click on that component to load it in what you’ll notice here is you’ve got a new special text field with a little programmer emoji, and this is actually going to allow us to create custom HTML. What I can do is I can either paste or type custom HTML, and for example I’m just going to add the most basic example of this just to show you how it works. I’ve just put in a really basic table, so I’m going to click on “Preview”, and what this is going to do is it’s going to render that HTML for me in here. That is custom HTML being rendered from the Figma text layer; that’s pretty cool, because it means you can completely customize the HTML that gets injected into any content block or any column. Of course, this is a very lame example, it’s just a “hello” but you could add effectively anything you wanted onto there.
What you can also do, if you click on the email frame itself; if you click on click on that top level frame and click on the “settings” icon, what you can do is you can actually inject CSS rules in here as well. I’ll just make that a little bit bigger so we can we can see what that looks like. Let’s say I wanted to add some CSS to any element that has a class name of “blue”; let’s say I’ve got “blue” and I wanted that to be have a color of blue; I can do that quite easily, and this is just a very basic example. I also might want the font size to be a bit bigger, and I might want to also set the font family; I could set that to “Arial” and have a fallback of “sans-serif”; this is just a very basic example, but what this is going to do is it’s going to inject these CSS rules onto any element, inline element, that you’ve added in an HTML tag. I’m going to grab that class, and I’m going to get the “blue” class and down here. I’m just going to clean up these other Figma components for a second so we can clearly see what’s going on, and I’m just going to jump into my code block again, and this time I’m going to add a class name to my “td” tag and it’s going to be a class of “blue”, and I’m just going to refresh that, and you can see there it’s actually injected that class onto the element; it’s rendered the class name, and it’s injected the styles that we added in our settings panel on here. That’s that’s pretty neat; what we can also do is inject mobile CSS rules as well. This might seem counter-intuitive, but if you wanted to do the “blue” class and actually override that to be “red” on mobile you can do that; these mobile rules will only be applied on mobile, you just have to remember to add the “!important” flag to mobile because it needs to be overridden. Now I’ve added, that I’m just going to refresh, and you can see it’s now red, but it’s only going to be red on mobile; on desktop it’s still blue, sp you can add different rules for your CSS classes using that settings panel, you can also just directly inline those class those styles onto the element, too.
If you wanted to just jump in here and do some inline styles, you can totally do that as well; you could put those styles on there and that would also work. You could do something like letter spacing, and you could set that to 10 pixels or something like that, and if you refresh that, you’ll see the letter spacing pop up. You can actually include those styles directly on that component, so that’s quite handy; you can also do things like if you’re using MailChimp, or Campaign Monitor, or an email service provider (ESP), what you can do is you can add merge tags. You could do custom text or custom messaging, which means you could do things like placeholder tags. I can’t remember the exact syntax, but it’s something like “FNAME” or something like that in MailChimp, it looks something like that. What that will do when you send the email is it will swap out that “FNAME” with any placeholder; having said that, you could also use that on your normal text layers. You can do something like that and MailChimp will also swap out that for the real first name in your list. The other thing you can do is templating tags; if you’re using a templating language in your email system you could do things like “if” statements. If “something” equals to “something”, that would also let you let you do something render some different content in there depending on those conditions. This is totally fake syntax, but this is just an example of what you could do.
The other neat thing at a much larger scale that you can do with this code feature, which I’ll show you now, is let’s say you’ve got a few different components; let’s say we’ve got a hero, and let’s say we’ve got two different heroes, and maybe some extra content. What I can do is I can actually have two different heroes, I could have first hero which, is the primary one, and then I would override maybe the second one the instance, but what I can actually do is create custom code wrappers as well. If I jump back in to my new component builder, and this time I’m going to select a brand new layout that we haven’t seen yet; that’s the custom HTML block. This is different from the HTML element; the HTML element will allow you to add code inside of a content column; the one we’re going to add now is actually adding a content code block in between rows. This will allow you to do things like wrap rows with code, or actually write complete blocks of code that kind of sit in between rows that aren’t contained within the structure of the content. I’ll show you what I mean by that.
Again, I’m just going to do some fake syntax, but it would be something like if let’s say “points”; let’s say you have a points system or something for your e-commerce store. Points is greater than 30; let’s say that’s a tag, so I’m going to do points open; I’ll do points open, it’s created that as a custom Figma component, and you can see down here it’s added as a custom HTML component. What I can do is I can wrap that here; I can do if points equals to 30, I can add a new one; I can do, let’s say, an end statement. I’ll do “end if” or something like that, and “end points”. I’m going to put that at the bottom, and then maybe I’d my syntax language also has like an “else”; I might do “else” here and I could drop that in between those two, and what that would do is it would render these little things of code as raw text or raw code. If we open up our preview, you can see here that we’ve got raw text. We’ve got “if points is greater than that 30”, load this one, “else” load that one; then “end” the conditional down here. Again, these are totally fake conditionals but your email service provider would have conditional logic that you can paste in as HTML, and you could create these kind of dynamic blocks using that method.
Finally, the other thing you could do, as I mentioned a minute ago, is you could have something like this inside of the rows, in between the rows. If we do a brand new component, and we’ll say “Custom Table Block” or something like that; paste that in there, you can see the code getting highlighted in there as well. You could basically paste an entire table layout, and that would get injected in between any of these rows. You would have to probably also add a wrapper just to constrain the width of that table, because by default it’ll basically just be sitting full width, so you could add some widths and stuff like that but if you really wanted to add a full block of HTML anywhere in your email, you could totally do that. That’s kind of the different options you’ve got with the custom code block. Of course, these are reusable, so I could just click on “else end if”, and easily get those code blocks added back in as reusable pieces of code. That’s really easy if you need to create a bit of a library of templating language blocks, you can certainly do that and have them saved in here. You can edit them as well, just like the other ones, too.
That’s basically a rundown of this brand new feature, the custom component builder feature, which allows you to create custom email components in Figma, which will then be rendered out in HTML email format. Of course, when you do want to export this to a real HTML email, all you have to do is click on the “Export” button, you can change this just to “HTML” if you don’t need “MJML”, that’s a different kind of templating language, and you can put in your subject line, you can put in some custom pre-header text, and all you have to do is click on “Export to Code”. I’m just going to click on “Export to Code”, and this is going to export my email design from Figma to production ready HTML. All I need to do is click on “Download your zip file”, and I’m going to save that to my desktop, unzip the zip file, and in my folder you can see here we’ve got a preview, and inside the “component test” folder, which is the name of our email we’ve got our images and we’ve got our HTML. I can basically just open up the preview page first, and that’s going to give us a preview of both sides at the same time; that’s just a really nice way of getting an overview. We’ve got our terrible looking code custom code, styled code, down here; but you can see everything’s been rendered from Figma to HTML as you’d expect. We’ve got the HTML, all of our buttons, everything like that, and the mobile view is looking pretty good as well.
I think that’s basically all you need to know to get started with this. Feel free to run wild with this custom Figma component builder; I just showed you a really basic example, but you can basically go as far as you want with it. You can you can add as much or as little to each of these code blocks as you want, you could create a huge massive long single column, or double columns, or you could just create multiple columns that you use kind of in between other predefined columns or components. I think this is going to be a really nice feature to build out custom Figma component libraries that you can use ongoing. If you design these custom components, you can kind of store them in your Figma component library, and they’ll also appear appear as assets over here. You can actually drag those from the Figma assets panel directly into your Figma email designs as well, so that’s just another way of accessing those if you’re using them in new Figma files.
I hope that’s been helpful. This was a big feature request from a lot of you, and we’re more than happy to ship it, because I think it’s going to be really useful. I hope you enjoyed this Figma tutorial, and I’m really looking forward to seeing what you build and design with this new feature. Until next time, thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one.
Pro Bundle