How to add hover effects to buttons in HTML emails from Figma using Emailify

Video Transcript

Today, I'm going to be showing you how to add interactive hover states to your HTML email designs in Figma using the Emailify Figma plugin.

To get started, all we need to do is go to the little "Resources" icon at the top of your Figma file. If you click on that and search for Emailify, under the "Plugins" tab, you'll see the Emailify Figma plugin pop-up. All you need to do to run the Figma plugin is either click on this "Run" button here, or you can click on this little "More options" icon here and click on the "Save Figma plugin" link, and that's just going to save it to your Figma plugins list for later. I'd recommend doing that, and I've already gone ahead and done that myself.

I'm going to go to the canvas, right-click anywhere, and go down to "Plugins", then go down to Saved Plugins and click on the Emailify item. 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 that it works is it basically allows you to design emails in Figma that can then be automatically exported to production-ready HTML. I'm just going to give you a really quick example of how to do that. We can just add an email here; I'm going to call it "My Email with Hovers" and add the new email iframe container. Then I'm just going to go through and add a handful of components to the email.

I'm going to click on this one, add in a logo component, then go to the CTAs and add a CTA component. We can update our buttons and maybe just add another button component as well. If we scroll down and add another component with a button down here and I'll just drop in a footer as well. We've got that in there.

Okay, that's basically the most simple example I can show you. If you want to go into detail of how to actually design the email components and design the emails, there's a couple of other really detailed tutorials on the YouTube channel. Just find the Emailify playlist and jump into those. But today, I'm just going to assume that you've already designed your email, and all we're going to be doing is adding some hover states to these button components here.

Let's go ahead and do that now. Basically, if we preview this at the moment and generate an HTML preview, you can see here that the buttons are clickable, we've got the little cursor there, but they're just static, they don't have any hover effects on them. To add some hover effects, what we can do is basically go to the HTML and mobile settings button. If you click on HTML and mobile settings in the header of the Figma plugin, that's going to open up this little panel here, and basically, that changes depending on what layer you've got selected. You can see here the context is changing based on the layer that we select.

In this case, we want to make sure that we've got a button component selected. This button component has to have been added through Emailify; it's not going to work if you've just manually created a button. You need to add this button through Emailify, so you can either do that, as I mentioned, by clicking on one of these components or you can use the quick add options at the bottom of the Figma plugin. If you've got a layer selected that lets you add some elements, you can add a button layer through that, so you could add a button like that and drop in a button and that will add an Emailify button component.

I'm just going to assume you've already got that figured out, and to add a hover state to that component, all you need to do, as I said, is click on the HTML and mobile settings, and you'll see down here we've got this button hover state section added. What that lets us do is change the background color and text color of the button in a hover state and also add an optional transition, so we can add transition animations as well. I'll show you what that looks like right now.

If we know we want to change the hover state of this button to be matching this little sushi icon here, what we could do is find out what color that is. I'm just going to quickly grab a color picker and find the hex value of that color. I'm just going to click on my icon, grab that hex color, and copy it to my clipboard. If I now click back into my button layer, what I can do is paste that directly into the hover input here. I'm going to paste that into the background hover and add a little hash in front of it, and then I'm going to add a hex value to the text color as well, so I'm just going to make that white, so that's hash FFF to make it white.

Now if we close off that settings panel and jump back into our preview and hover over that button, you can see here that we've now got a hover state added. When we hover over that button, it's using the hex value for the background and the text that we added into the Figma plugin settings, and it's using that for the hover state, so that's pretty cool.

The other thing we can do, as I briefly touched on, is go back into the settings panel. You can access it through this little settings icon if you've got the preview open. I'm going to click on it again, and this time I'm going to also add a transition. We can change it from none to fade, for example. If we click on fade and load that up, if we now hover over the layout, you can see here that it's doing a fade effect on the background color and the text color. Instead of just an instant jump, it's letting us fade between those colors.

We've got some other options as well. If we want to do some motion, we can add something like a grow animation. If we click on grow and refresh the preview and then hover over it, you can see that we've now got a grow effect along with the color effect that we added in those inputs. That's what that looks like, and you can go through these and experiment with them. There's a whole bunch of them, so there's a bounce one, so you could add a more of a bouncy effect if it's a really important CTA. You can make it a bit more impactful with an animation like that, but it's really up to you to go through those.

You can go through those individually. We've got another one down here, obviously, that's a little bit different. We've got our button with the black background and white text, so we could make that inverted, so we could make that go to white background with black text, for example, and add a fade onto that. If we now refresh the preview, you can see that when we hover over this, it's basically just going to change that to be inverted.

A cool thing that you can also do is add a stroke to that. If we wanted to make sure that the background automatically had a stroke around it when we invert it on hover, you can add a stroke to your button layer in Figma. If we add a stroke layer, I'm just going to make that two pixels and have it as black, and then now, if we refresh this preview and go down to our button, you can see here that when we hover over it, the stroke stays the same, and the background is getting knocked out to white. That's a nice way of adding a stroke into the mix if you wanted to make sure that it kind of knocks out the background but keeps an outline. You can just add a stroke there, and that's going to look pretty good as well. That's a nice little trick if you want to make it into more of a ghost button type style. You can play around with the stroke settings in Figma and see what that looks like when you swap out the hover backgrounds as well.

Yeah, that's basically it. I was just going to keep it really simple today just to show you the basics of how to add hover effects onto your buttons. This is a really easy way to go about it. You can play around with the effects, as I mentioned, there's a whole bunch of different ones that you can play with. This is more of a rotation one, but yeah, those are the three different options you've got. You've got the transition, text color, and background that you can play with, as I mentioned, just for the button components. This won't work for other components; you just have to make sure that you're using a button component for these options to show up.

The other important caveat is that the hover effects are only supported in certain email clients. So if you want to get a list of those, you can click on this "supported email clients" link here. If you click on that, that's just going to open up a link in your browser, and it's going to give you a detailed overview of where the hover effects are supported. For example, it's totally supported in Apple Mail on macOS and iOS; it's supported in Gmail on desktop, but it's not supported in Gmail on iOS or Android. You'd expect mobile devices not to support hover anyway, but yeah, there are a few little caveats down here that you can look at.

Outlook, obviously notoriously bad at supporting anything, so on Windows Outlook, it's not going to work, but on macOS, it will. You can just go through these and figure out where the hover effects are going to work and where they're not going to work. That's just a little caveat to show how you can use the hover effects as more of a progressive enhancement rather than a critical piece of the style. It's more of just a progressive enhancement where it's supported. If it's not supported, it's just going to work normally; anyway, you're not going to get any hover effects, but you can still click on the button as you'd expect.

We'll leave it there for today. I just wanted to run through that really quickly with you. If you've been wondering how to add hover effects onto your HTML emails from Figma, this is going to be a really easy way to go about it. And finally, just briefly, if you did want to export this to HTML from the Figma plugin, you just have to click on this "export HTML" button here. If you just click on the HTML email option or any of the platform integrations you want to use, you can basically just pick whichever one suits and click on "export to HTML." That's just going to generate the HTML for your email. You can download that to your computer as a zip file. I'm just going to click "download zip file," save that to my desktop, unzip that file, and now if we open up the folder, you can see here we've got our export here.

We've got a previous file and the HTML file. If we just drop that previous file into our browser, I'm just going to drop that into here and load that up, and you can see here that the hover states are showing up in the preview as well. We can open up the email itself just by going into the folder with the same name, dropping the index.html file in there. This is basically the final HTML with the hover effects that we added in the Figma plugin, and they're working really nicely as we'd expect. You could now go ahead and send out that email and have those show up in the clients that we looked at a minute ago over here.

So, we'll leave it there for today. I just wanted to run through how to add those hover effects to your HTML emails from Figma using Emailify. If you're using Emailify and have been wanting a bit more creative freedom on your CTAs or CTA buttons, you can now add these hover effects as we just went through in the Figma plugin. I hope that adds a little bit more flexibility and creativity to your HTML email designs. Thank you, as always, for watching, and we'll be back soon with more Figma tutorials like this one very soon.