← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to add hover states to text links and navigation link rows in HTML email designs made in Figma using the Emailify Figma plugin. It also covers applying a hover color, optional Fade Transition, and checking email client support before relying on the effect.

Things you'll need

• A finished Emailify email design in Figma
• Emailify installed in Figma

Steps

1. Open the Emailify Figma plugin from Resources or from saved plugins.
2. Select an Emailify text layer, highlight the text, and use the create link icon to add a URL.
3. Open the HTML and mobile settings panel and enter a hex value in the Links Hover State field for the selected text layer.
4. Optionally enable Fade Transition, then preview the HTML to confirm the hover color appears.
5. For navigation components, select the parent navigation layer and set the same Links Hover State value so all link items inherit the hover color.
6. Preview the result and check the supported email clients list to see where hover states are supported.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Adding inline links to paragraph text content in your emails
• Next: Add animated GIFs from Figma to HTML email exports
• Open Emailify in the Figma Community