Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Add hover colors to text links in HTML emails from Figma - 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.. Machine-readable page: /emailify/tutorials/add-hover-colors-to-text-links-in-html-emails-from-figma.md.

Add hover colors to text links in HTML emails from Figma

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.

← 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