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 Outlook-compatible gradient buttons to HTML emails with Figma - This tutorial shows how to turn a solid Emailify button in Figma into an Outlook-compatible gradient button for HTML emails. It also demonstrates exporting the design to HTML and testing the result in Litmus to confirm the gradient and corner radius render in Outlook and other email clients.. Machine-readable page: /emailify/tutorials/add-outlook-compatible-gradient-buttons-to-html-emails-with-figma.md.

Add Outlook-compatible gradient buttons to HTML emails with Figma

This tutorial shows how to turn a solid Emailify button in Figma into an Outlook-compatible gradient button for HTML emails. It also demonstrates exporting the design to HTML and testing the result in Litmus to confirm the gradient and corner radius render in Outlook and other email clients.

← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to turn a solid Emailify button in Figma into an Outlook-compatible gradient button for HTML emails. It also demonstrates exporting the design to HTML and testing the result in Litmus to confirm the gradient and corner radius render in Outlook and other email clients.

Things you'll need

  • A Figma file with an Emailify email design already set up
  • An Emailify button layer that currently uses a solid fill
  • Litmus for email client testing

Steps

  1. Open Figma, find Emailify in Resources under the Plugins tab, and run it from Saved plugins.
  2. Select the Emailify button layer in your email design and open the fills panel.
  3. Change the button fill from solid to gradient, then adjust the gradient colors and angle as needed.
  4. Adjust the Border radius to the desired value, then use Emailify preview to check the HTML button appearance.
  5. Export the design with Export HTML, enable automatic image upload if needed, and download the ZIP file.
  6. Open the exported index.html in a browser or test it in Litmus to verify the button renders correctly in Outlook and other email clients.

Useful links