← 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

• Watch the full video on YouTube
• Read the full video transcript
• Read: Adding a gradient background to your buttons
• Next: Add hover effects to buttons in HTML emails from Figma
• Open Emailify in the Figma Community