Video Tutorial: Add Outlook-compatible gradient buttons to HTML emails with Figma

This video walks through how to add Outlook-compatible rounded gradient buttons to HTML emails using the Figma Emailify plugin.

You can add a gradient background to your Button layers in Emailify by setting the "Fill" property on your layer in Figma to a linear or radial gradient. This will automatically add a gradient background to your Button when it's exported to HTML.

Gradient button backgrounds exported from Emailify are supported in most email clients (including Outlook), but any email clients that don't support gradient backgrounds will fallback to the first solid color that you've used in your Figma gradient fill, so please ensure it's a suitable solid fallback color (with enough contrast against your button text color) for cases where it's not supported (for example, Yahoo! Mail).

Note that the gradient button code will not be included in any MJML exports, and the additional Outlook code for them won't be included in any SendGrid exports; this is due to each not supporting the additional code required for these enhancements.