Troubleshooting Kombai for Email

Frequently Answered Questions(FAQs)

Q1. An element in my email design looks center aligned in Figma, but is not centrally aligned in code.

A: To check the placement of an element, hold Alt(in Windows) and Option(in MacOS), hover on the selected element and make sure that the distance of the element is same on left and right sides. If it is a text, additionally check that Figma's Auto width property is enabled, and Line Height is set to Auto(unless really required to change) before checking the placement.

Q2. The button inside the generated email is not clickable in my email client.

A: Make sure you have added hyperlinks to text and images. Once done, Kombai will attach that link in the HTML email code of that button. To know more about how to add hyperlinks in texts and images, click here.

Q3. The text in my email does not look same as the text of the Figma design.

A: For your text to resemble the design as accurately as possible, we recommend the following tips:

1. Avoid using Figma's letter casing

In some cases, the text used in the Figma design may have the text casing enabled. If your text contains UPPERCASE, lowercase, or Title casing, we recommend typing such texts manually instead of using Figma's case settings inside Text properties -> Type Settings panel to make sure the text in your email looks same as the text of the Figma design.

2. Avoid using different line heights in a single text node

In some cases, a text node in Figma may have different line heights for each line. In such cases, Kombai might not be able to render each varied line height accurately because of some limitations of the Figma API. For the generated code to look same as the design, please make sure that only a single line height is used inside a text node.

3. Fallbacks for Non-web safe fonts

Non-web safe fonts are not supported in all email clients. So, they will mostly not look same across all clients. However, you can add fallbacks for all non-web-safe fonts used in the design. To know how to add font fallbacks, click here.

4. Auto width

Enable the Auto width property of Figma, and set the Line Height to Auto for the concerned text node.

Q4. Border radius for a few email elements is not reflecting in some email client.

A. border-radius CSS property is not widely supported in all email clients. To know out how to fix it, click here.

Q5: The test email I sent using "Send Test Email" does not have any images.

A. Kombai temporarily uploads the images and adds image links in the HTML email. The links to the uploaded images on the test email are only valid for 6 hours. If you view the email after 6 hours of sending the test email, the image links will have expired. We recommend sending another test email so you can view your email with linked images.