Introduction

Introduction to Kombai For Email

Kombai For Email helps you generate HTML emails for your designs in a single click. We also let you configure the code and ensure that the output code you receive works well on most clients.

To generate your HTML emails through Kombai, you have to install our Figma plugin (opens in a new tab).

Getting Started

  1. Open your figma design and Run the plugin. Visit our Launching The Plugin doc to know various ways to run our plugin.

  2. Select a frame or group you want to convert to code. If you do not have any Figma frame, you can also load one from our library(see the example below).

💡

Info: Kombai only converts frames and groups in Figma. Selecting any other node will give you error(see the image below).

Kombai Text Node

  1. Kombai will now generate a preview of the frame/group along with the HTML email code.
  2. Click the ⚙️ (Settings) button(if you have any configurations), make your changes and save the code(see the example below).
💡

Note: Your settings will be reset if you switch between design and dev mode in Figma. Our code works across design and dev mode. You can continue to use the plugin without switching between design and dev mode.

  1. Click the Download Code button to download the code. Alternatively, you can also copy the code by clicking the Copy HTML button, which comes up when you expand the HTML CSS option.

Kombai screenshot

Features

1. Preview

Preview tab shows the preview of the generated HTML code. We put all the Kombai-generated code inside an <iframe> and display it in the preview tab so that it mirrors the output code we generated.

Kombai screenshot

We provide multiple common screen dimensions(320px, 360px, 768px, 1280px, etc.) to preview the rendered email. You can also use our percentage-based values(25%, 50%, 75%, 100%, 125%, and 150%), fit-email-height, and fit-device-width to zoom in or zoom out in the preview tab.

Preview tab also contains the following buttons:

  • Regenerate Code: It syncs the code with the latest design changes.
  • Send Email: It sends the generated code to your email ID for test.
  • Settings: It opens the settings for further configuration.
  • Code: It downloads the code to your computer.

2. HTML CSS

HTML CSS tab shows the HTML email code that Kombai has generated for your design. You can view and copy the entire code from this tab.

HTML CSS tab

Any configurations you make in the settings will automatically get reflected in this tab.

3. Email Compatibility

Email Compatibility tab shows the client compatibility and email deliverability of the generated code.

We show a heatmap displaying whether the code is fully supported, majorly supported, or minorly supported in the most popular email clients and operating systems.

We also display email size, template width, and notification of fallback fonts(if used), along with suggestions on how to fix them.

Email Compatibility

For more information, check our Email Deliverability and Client Compatibility page.

4. Settings

We allow you to configure the default code in Settings. Once your settings are saved, the HTML CSS tab updates the code to reflect the latest changes.

The Settings tab contains Email DeliverabilityMobile Responsiveness, and Account Info:

Email Deliverability

Title

Title input field allows you to add <title> that is included in the <head> element of the email’s HTML.

Title setting

Preview Text

Preview Text appears next to the subject in the recipient’s email inbox. If you have added a preview text, Kombai will include this as the first div in the <body> of the email’s HTML, with style=" display: none"

Preview Text setting

Minify Code in Copy/Download

We allow you to minify code to improve email deliverability. Once this is turned on, you can copy or download the minified version of the email code.

Minify Code setting

Output Image Format

By default, we use Linked PNG Files as the output image format. You can also choose Base64 Embeds from the dropdown.

Image Format setting

💡

Note: We recommend selecting Linked PNGs and downloading the code for optimal experience.

Alt Text for Images

If Autogenerate is turned on, Kombai will auto-generate alt tags for all images used in the design to increase accessibility and reduce spam filtering risks.

Alt Text

Fallbacks for Non-email-safe Fonts

For each non-web-safe font used in the design, we allow you to add a web-safe fallback font to your code. Fallbacks will be used if the primary font fails to render in the recipient’s email client.

Fallback fonts

Language (Accessibility)

For better accessibility, we allow you to configure the language. If you have specified a language, Kombai will add the HTML lang attribute with the language’s value to the content of your <body> element.

Language Accessibility

Mobile Responsiveness

We have support for mobile responsiveness in our generated code. You can set custom responsive behavior for specified dimensions. We also allow you to add email margins, font size overrides, fluid content, and stacking of columns.

Mobile Responsiveness

For more information, check our Mobile Responsiveness page.

Account Info

Account Info section shows details like Email ID, Subscription Plan, Kombai Support Mail, Help Docs, and Logout Button.

Account Info

Code Output

Our code output follows the common industry standards for HTML email, like using HTML tables for layout and content and using CSS properties with maximum email client support.

You can either copy the code to the clipboard or download the zip file. The downloaded zip will contain the HTML file index.html and assets folder with PNG images(if Linked PNGs is turned on in the settings).

For optimum quality, we also support the following behavior in our code:

Content Type Support

  • Links: Kombai supports linking in designs. You can do it via two ways:

    1. Through Create Link: You can add a hyperlink through Create Link method. We will add that link in the HTML email code at the right place.

    2. Through Prototype Linking: You can also use Prototype Linking method to add links. We recommend using Prototype Linking to add links to the images.

    💡

    Note: Whenever you add a hyperlink through Create Link, by default, Figma underlines the text. If you want to remove the underline, you can do so by selecting the None property in Text Decoration setting.

  • GIFs: We also have support for GIFs in our code.

  • PNG: We have support for all image formats that are supported by Figma (opens in a new tab), i.e., JPG, PNG, HEIC, TIFF, WebP, and even SVG. However, we convert all the images to the PNG format as it’s supported by all the major email clients and operating systems (opens in a new tab). We also crop the part of the original image that is not used in the design and render the remaining used portion at 2x resolution for better display on the retina.

  • Font: We support all the publicly available fonts in our code. However, if you are using a non-web-safe font, it’s best to also specify a fallback font.

Responsive Behavior

For responsiveness, we support custom email margins, font size overrides, fluid content, and stacking of columns for devices below the specified breakpoint.

For more information, check our Mobile Responsiveness page.

Accessibility

Kombai ensures maximum accessibility for generated code so that there’s less risk of the email getting delivered to spam. We provide settings to add title and preview text, minify code, auto-generate alt text, and add lang and dir attributes to the HTML.

Our code is also tested on Parcel’s Accessibility Checker tool to ensure maximum accessibility.