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. Hover on Export Code to download your code or export it to an ESP. You can export code from Kombai in two ways:
  • Hover on Export Code and click on Download Code to download the code.
  • Hover on Export Code and click on Export to ESP to export the auto-generated code to an ESP. For more information, visit the ESP Integrations doc.
💡

Alternatively, you can also copy the code by clicking the Copy HTML button, which comes in the HTML/CSS tab. Copied code will always include the Base64 images instead of Linked Assets.

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.
  • Translate Email: It lets you translate your design into another language.
  • Send Email: It sends the generated code to your email ID for test. The link to the uploaded assets on the test email are only valid for 6 hours.
  • Settings: It opens the settings for further configuration.
  • Get Help: It contains our support mail, documentation link, playground file, and manage plan link.
  • Export Code: It lets you download the code to your computer or export it to an ESP.
  • Minimize/Maximize: It lets you minimize or maximize the plugin.
  • Dark/Light Mode Toggle: It lets you toggle between dark and light mode version of email.

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 Deliverability, Mobile 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/Export

We allow you to minify code to improve email deliverability. Once this is turned on, you can copy or export 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.

Kombai also lets users in Premium plan or above to further optimize assets size without impacting asset quality.

Image Format setting

💡

Note: We recommend selecting Linked PNGs and exporting 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

Add Custom Web fonts in email

Kombai provides support to add custom web fonts in email design. Custom fonts used in the design are auto-identified and listed in the settings.

For more information, visit this doc.

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

Kombai-generated code is mobile responsive by-default and works on devices of all screen sizes and dimensions. Your emails should render pixel-perfect across all mobile devices without the need of any manual adjustments or extra effort on your part.

Mobile Responsiveness

For more information, check our Mobile Responsiveness page.

Dark Mode Overrides

Kombai supports dark mode conversion of designs. When this feature is turned on, we add the following meta tag to let the rendering client know that the code has support for both light and dark modes: <meta name=color-scheme content="light dark">

We also add a prefers-color-scheme media query that includes the overrides you made in our tool to support dark mode.

For more information, visit our Dark Mode Overrides doc.

Connected ESPs

Connected ESPs section shows information about the ESP integrations provided by Kombai.

Klaviyo

Kombai supports Klaviyo integration to send auto-generated code as templates and campaigns directly to Klaviyo's drafts from Kombai. You can connect or disconnect to your Klaviyo account in this section.

Klaviyo Integration

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, download the zip file, or export it to an ESP. 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 (opens in a new tab). We will add that link in the HTML email code at the right place.
    💡

    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.

    1. Through Prototype Linking: You can also use Prototype Linking method to add links. We recommend using Prototype Linking to add links to the images.
  • 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.

Introduction