Figma elements that do not translate well in some email clients

After thorough testing, we have identified a list of 14 CSS properties whose usage is dependent upon the user’s design. The common behavior among all these properties is that they have partial or no support for at least one of the Email Clients we support.

We support the following Email Clients across the listed operating systems:

1. Apple Mail(iOS)
2. Apple Mail(macOS)
3. Gmail(Android)
4. Gmail(iOS)
5. Gmail(Webmail)
6. Outlook(Android)
7. Outlook(iOS)
8. Outlook(macOS)
9. Outlook.com
10. Outlook(Windows)
11. Yahoo(Android)
12. Yahoo(Webmail)
13. Yahoo(iOS)

If your design contains elements that trigger the usage of these properties, you should consider modifying the Figma design to remove properties that have partial or no support across the above-listed email clients. Here’s the list of all 14 CSS properties and how to modify the Figma design:

1. Background blend mode

background-blend-mode CSS property is used in our code when there is a blend mode(other than the default value) in the Figma design.

How to fix?

1. Select the Figma node that is using blend mode.
2. Open the color filler from the Fill section and click Blend Mode.
3. Select the default value: Normal or Passthrough(if it is a layer).

2. Background image

background-image CSS property is used when when there's an overlap of an image with some other Figma Node.

How to fix?

Fix the overlap of Figma elements(see the example below).

3. Border

border CSS property is used in the generated code when the Stroke property of Figma is used in the design.

How to fix?

1. Select the Figma node that is using the Stroke property.
2. Click the minus button in the Stroke section to remove the stroke.

4. Border radius

border-radius CSS property is used in the generated code when the Corner Radius is enabled for a node in Figma.

How to fix?

1. Select the node that is using the Corner Radius.
2. Go to Corner radius in the Frame section and set it to 0.

5. Box shadow

box-shadow CSS property is used in the generated code if the Figma design is using Drop shadow or Inner shadow.

How to fix?

1. Select the Figma node that is using the shadow effects.
2. Click the minus button for Drop shadow or Inner shadow, whichever you are using, in the Effects section.

6. Font weight

font-weight CSS property is used in the generated code when the Figma design contains a text node with weight other than the default.

How to fix?

1. Select the Figma node for which you have changed the Font Weight.
2. Set it to Regular in the Text section.

7. Letter spacing

letter-spacing CSS property is used when the default letter spacing is modified for a text node in Figma.

How to fix?

1. Select the text node for which you have modified the letter spacing.
2. Set the letter spacing to 0.

8. Linear gradient

liner-gradient() CSS property is used if a linear gradient is used in Figma.

How to fix?

1. Select the Figma node with the linear gradient.
2. In the Fill section, replace the gradient with a solid color or click the minus button beside Linear to remove it.

9. Line height

line-height CSS property is used when the default line height in Figma is modified.

How to fix?

1. Select the text node for which you have modified the line height.
2. Set the line height to auto.

10. Opacity

opacity CSS property is used if the default opacity is changed in the Layer section for a Figma node.

How to fix?

1. Select the node for which you have modified the opacity.
2. Set the opacity to 100% in the Layer section.

11. Radial gradient

radial-gradient() CSS property is used if there’s a radial gradient present in the Figma design.

How to fix?

1. Select the Figma node with the radial gradient.
2. In the Fill section, replace the gradient with a solid color or click the minus button beside Radial to remove it.

12. Text decoration

text-decoration CSS property is used if an underline or strikethrough decoration is present in the Figma design.

How to fix?

1. Select the Figma node with text decoration.
2. Click the three dots in the Text section and select None in Decoration.

13. Text transform

text-transform CSS property is used when the default case for a text node is changed in Figma to Uppercase, Lowercase, or Title Case.

How to fix?

1. Select the text node you modified.
2. Click on the three dots in the Text section and select As typed in Case.

14. RGBA

rgba() CSS property is used if the default opacity for a node is changed in the Fill section.

How to fix?

1. Select the node for which you have modified the opacity.
2. Set the opacity to 100% in the Fill section.