Adding background colors to your layout layers

You can customize the backgrounds of your Emailify layout layers by applying Figma fills on them.

If you're looking for how to customise the outer email background color that appears around the outside of your email body, you can set this by changing your Figma page background, which will be used as your email body background color in any HTML exports from Emailify.

Setting a solid background color on any of your layout layers ​

To set a solid background color on any layout elements in your email design, you can click on the layer in Figma and then add (by clicking the + icon next to the Fill panel in the layer's Figma properties) and set the Solid fill for that layer, which will be applied as a CSS background color when your email is exported to HTML from the plugin.

Setting a gradient background on a Row, Column, Hero or Wrapper layer ​

To set a gradient background on any Row, Column, Hero or Wrapper layout elements in your email design, you can click on the layer in Figma and then add (by clicking the + icon next to the Fill panel in the layer's Figma properties) and set the Gradient fill for that layer, which will be applied as a background image (not a CSS gradient, which has limited support across email clients) when your email is exported to HTML from the plugin.

Note, gradient backgrounds are rendered as background images. These work on Row, Column, Hero and Wrapper layers in Emailify preview and HTML exports, but raw mjml and loops exports still omit Column background image attributes.

Setting a solid background color on text layers ​

To set a solid background color on text layers in your email design by selecting a Figma text layer in your email while the Settings panel is open, pasting in your hex color value (for example, #FFFBA8) into the Text Background Color input field. This will automatically add a solid background color behind that text content in your HTML email.

You can also optionally combine setting a background color on your text layer with adding inner padding to your text layer, which will provide some additional padding around the text content and give the background area some padding.