How to add hover colors to text links in HTML emails from Figma using Emailify

Video Transcript

Today, I'm going to be showing you a Figma tutorial on how to add hover states to text links inside of your HTML email designs in Figma using the Emailify Figma plugin.

To get started, go to your "Resources" icon at the top of your Figma file and click on that. Search for "Emailify," and under the "Plugins" tab, you'll see Emailify pop up. Click on the Emailify results and run the Figma plugin by clicking on the run button, or I'd recommend clicking on the small options icon and saving it to your Figma plugins list for later.

I've already done that, so I'll go to my canvas. Right-click anywhere, go down to "Plugins", then go down to saved plugins and click on Emailify. That's going to run the Figma plugin we saved a second ago. If you're new to the Figma plugin, it allows you to design HTML emails in Figma and then export them automatically to HTML. I won't be going through the design process or the other components in the Figma plugin today. You can find detailed tutorials on the channel if you check out the Emailify playlist. Today, I'm going to assume that you've already got your design ready, and you want to style inline links and their hover states. I'll show you how to change the color of the links on hover.

First, to add links to a text layer, select your Emailify text layer and highlight the part of the text you want to link. For example, if I wanted to link this highlighted text, I can highlight it and click on the create link icon in Figma. That will give me an input to paste or type in a URL. I'll type in google.com, and you can see it adds a link to your Figma layer. You can add links wherever you want, to different text layers or multiple links per text layer.

Now we've got two different links, and you can see when I preview the HTML in the Figma plugin by clicking on the preview icon, we've got our links in their default state. To add a hover state to those links, click on the text layer you want to add hover styles to, and in our Figma plugin, we've got this HTML and mobile settings button. Click on that, and at the bottom, there's a box called "Links Hover State" with an input field to paste in a text links hover color. Whatever we put in there will become the hover color when we hover over it in the HTML.

I want to make this orange, so I'll click on this layer with a saved color and copy the hex value to my clipboard. With the text layer selected, paste that into the input field and add a hash. Now preview that again, and you can see when we hover over it this time, we've got an orange hover color being applied. We can also add a slight fade transition. Check the "Fade Transition" checkbox in the settings panel, and refresh the preview. You'll notice the hover effect has a slight fade transition, which is optional.

The other type of layer we can apply these to is navigation layers. With Emailify, you can add navigation components, which are rows of link layers. You can add different links with URLs on them. If we open up the settings panel with one of these link layers selected, you can see we've got a clickable link URL property. We can paste in links into each of those layers to make them clickable links in a row navigation style.

If we want to do the same thing for these types of links, which are different from the Figma links, click on the navigation layer, the parent layer for these link components. With the navigation layer selected, click on the "Links Hover State" input again, paste in the hex value, and put that in there. Refresh the preview, and you'll see that all of these links now have that hover color. We've got them all changing color at once, even though we only applied it to one layer. This is a nice way of applying hover styles to the navigation component if you're using that in your email.

Again, you can use the same fade transition on that one too. You'll notice that with the other text layer, because we haven't added any hover styles, those are just defaults. It's clickable, but it doesn't include the hover style. One small caveat to understand is that there's a link that will take you to a webpage with a list of supported email clients. Click on that link, and it will open up a new page in your browser, giving you a breakdown of which email clients and devices support these hover styles.

You'll notice that some clients will support it, like Apple Mail and Gmail on desktop. However, mobile devices generally won't support it because there's no hover state on mobile. Also, with Outlook on desktop, you're going to get little to no support on Windows. You might get some support on macOS, but as far as Windows goes, you're probably going to have a rough time getting hover effects to work. It's worth being mindful of and thinking of it as a progressive enhancement rather than something that's being relied on. Include it as a nice-to-have feature if the email client supports it.

That's it for today. I covered button hover effects in a different tutorial, so if you're interested in applying similar hover effects on button components, you can check out the other tutorial. For now, I'll leave it there. If you wanted to know how to add hover states or change the color of your links and inline links on text layers, this is an easy way to do it using the Emailify Figma plugin. Feel free to try it with your team.

As always, thank you for watching. We'll be back soon with more Figma tutorials like this one.