Design Suggestions

In some cases, emails rendered on users' devices are not identical with the email preview. This happens because each email client has its own rendering style that interprets and displays email differently, resulting in inconsistent rendering across various email clients.

The way we design our email has a direct impact on how the email code will be rendered. Kombai has identified 13 such design elements, which, if present in your design, could lead the rendered email to look different from the original email design.

Once you load your email design into Kombai, we auto-identify these elements present in the design and suggest changes. For each suggestion, we provide a Apply button that applies the changes to Figma.

Currently, Design Suggestions are available only to our Premium users.

Apply Auto width to this text

Figma provides three different options to set the resizing property of a text element - Auto width, Auto height, and Fixed size. Often, Fixed size text boxes can not be rendered correctly across different email clients. Kombai automatically identifies which of your text nodes should have Auto width and suggest changes if they have a different text resizing property.

To manually implement this suggestion:

Select the text node that gets highlighted when the design suggestion is selected.
Change its text resizing property in the Figma right pane to Auto width.

Apply Auto height to this text

Figma provides three different options to set the resizing property of a text element - Auto width, Auto height, and Fixed size. Often, Fixed size text boxes can not be rendered correctly across different email clients. Kombai automatically identifies which of your text nodes should have Auto height and suggest changes if they have a different text resizing property.

To manually implement this suggestion:

Select the text node that gets highlighted when the design suggestion is selected.
Change its text resizing property in the Figma right pane to Auto height.

Set the line height of this text to Auto

Figma allows you to specify percentage line height to a text node or set it to auto. Often, text boxes with specific height can not be rendered correctly across different email clients. Kombai automatically identifies which of your text nodes should have auto line height and suggest changes if they have a specific line height.

To manually implement this suggestion -

Select the text node that gets highlighted when the design suggestion is selected.
Set the line height property in the Figma right pane to Auto.

Remove the multiple newlines that are put next to each other in this text

Multiple newlines after each other may not render correctly across email clients. If you need to specify text positions that cannot be achieved using single newlines, please use separate text boxes for the texts that need specific vertical positions.

To manually implement this suggestion:

Select the text node that gets highlighted when the design suggestion is selected.
Remove the newlines inside the text node.
Create separate text nodes for text that came after the newline.

Remove the multiple spaces that are put next to each other in this text

Multiple spaces after each other may not render correctly across email clients. If you need to specify text positions that cannot be achieved using normal text alignments and single-spaced words, please use separate text boxes for the texts that need specific positions.

To manually implement this suggestion:

Select the text node that gets highlighted when the design suggestion is selected.
Create separate text nodes for the texts that came after multiple spaces.

Ensure that this element is horizontally center aligned within its parent

If your Figma node is slightly misaligned from center(horizontally), it could lead to irregular rendering across various email clients. Kombai auto-identifies all such Figma nodes that are horizontally misaligned from the center and suggest changes to ensure that rendered code looks alike across various email clients.

To manually align a Figma node to center horizontally, check the placement of that node:

Hold Alt(in Windows) and Option(in MacOS) and hover on the selected element to see the current distance of the node on left and right.
Shift its position horizontally to align the text.

Ensure that this element is vertically middle aligned within its parent

If your Figma node is slightly misaligned from middle(vertically), it could lead to irregular rendering across various email clients. Kombai auto-identifies all such Figma nodes that are vertically misaligned from the middle and suggest changes to ensure that rendered code looks alike across various email clients.

To manually align a Figma node to middle vertically, check the placement of that node:

Hold Alt(in Windows) and Option(in MacOS) and hover on the selected element to see the current distance of the node on top and bottom.
Shift its position vertically to align the text.

Remove list styles (icon/ number bullets) from this text.

Bullet points are not widely supported in email clients. As such, their usage in emails will lead to rendering issues across various email clients. Kombai auto-identifies all such text nodes that have bullet points to it and suggest changes to remove it.

To manually implement this suggestion:

Select the text node that gets highlighted when the design suggestion is selected.
In the Figma right pane, click the three dots in the Text section. Select the dash icon(-), i.e., No list in the List style.

Remove Shadow / Blur effects from this Figma element

Shadow and Blur effects are not supported on most email clients and may not be rendered accurately. Kombai auto-identifies such Figma nodes where shadow or blur effects are used and suggest changes to remove them.

To manually implement the suggestions:

Select the text node that gets highlighted when the design suggestion is selected.
In the Effects section in the Figma right pane, click on the minus(-) button besides the effect you added to the design.

Add space between this GIF and the other elements to avoid overlap

No email client support overlapping of GIF with any other element. Therefore, if your design contains a GIF that is overlapping with some other element, Kombai auto merges the overlapping elements with GIF and convert it to an image.

In that case, the final output will be a static image instead of an animated GIF.

To manually implement this suggestion:

Select the node that is overlapping with GIF.
Shift its position so that it does not overlap with the GIF.

Add space between the text and image elements to avoid overlap OR bring the text layer to the front

When an image and a text node overlap, Kombai may have to merge both image and text together to create a new image.

In such cases, texts may not render as text in the email clients as it becomes the part of the image. If you want to avoid this behaviour, bring the text layer to front, on top of image, then Kombai will add the image to background and put the text on top.

To manually implement the suggestions:

Select the text or image node that gets highlighted when the design suggestion is selected.
Shift its position to add space between the text and image so they do not overlap.
Alternatively, you can bring the text layer to front in Figma.

Add space between the text elements to avoid overlap

When there is an overlapping between multiple text nodes, Kombai may have to merge the text nodes together to create a new image and the texts may not render as text in the email clients.

To manually implement the suggestions:

Select one of the text nodes that gets highlighted when the design suggestion is selected.
Shift its position to add space between the selected text and the overlapping text.

Define web-safe font fallbacks for the non-web-safe fonts

Custom fonts import is not supported by all popular email clients. Therefore, it is best to specify a fallback font in your design wherever you have added a non-websafe font. Kombai auto-detects all non-websafe fonts used in the design and let you add fallbacks in settings.

To manually implement this suggestion:

Go to Settings.
Under Email Deliverability section, scroll down to Fallbacks for Non-email-safe Fonts and select Yes from the dropdown.
Select fallback fonts from the dropdown on the side of the listed fonts.

Introduction