Ashutosh Mishra for Kombai

Posted on Dec 7, 2023

Turn email designs to code that works even in Outlook, in a single click

Introduction

Last week, we publicly launched Kombai For Email, a specialized version of our base model that can code custom HTML emails with 95%+ accuracy. It lets you convert email designs to code that works across all major Email Service Providers(ESPs) and Email Clients(even on Outlook) in a single click.

The Research Preview of our base model was launched on Product Hunt in August 2023. And with all your love and support, we made it to the top earning #1 Product of the Day, #1 Product of the Week, and #1 Product of the Month badges.

Today, we are launching the email version of our base model on Product Hunt. The Figma plugin of our email model was made available to the public last week. Since then, we have got 1000+ users who have created more than 800 sessions on our plugin. So, try our product and show us your love on Product Hunt.

Product Hunt Link: https://kombai.com/launch
Kombai For Email Plugin: https://kombai.com/email

What is Kombai For Email?

Kombai For Email is the specialized email version of the Kombai’s base model. You can access it through our Figma plugin. It 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 all major email clients and ESPs.

Getting started with Kombai is easy. Install our Figma plugin from here and follow the below steps:

Open your Figma design and run our plugin.
Select a frame or group you want to convert to code.
Kombai will now generate a preview of the frame/group along with the HTML email code.
Click the ⚙️ (Settings) button(if you have any configurations), make your changes, and save the code.
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.

Features

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.

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.

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.

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

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.

Configurations

Default Kombai-generated code can be configured in the Settings. Once your settings are saved, the HTML CSS tab updates the code to reflect the latest changes.

We support the following configurations in Settings:

Title: This will be added to the <title> inside the <head> element of the HTML.
Preview Text: Preview Text appears next to the subject in the recipient’s email inbox.
Code Minification: If this is turned on, you can copy or download the minified version of the email code.
Output Image Format: You can choose between Linked PNG Files or Base64 Embeds. By default, we use Linked PNG Files due to better support across ESPs and Email Clients.
Autogeneration of Alt text for images: If this is turned on, Kombai will auto-generate alt text for images used in the design.
Fallback for Non-Email safe fonts: For each non-web-safe font used in the design, you can add a fallback font.
Language(Accessibility): Based on the language you select, we'll add the lang and dir attribute to the HTML for better accessibility.
Mobile Responsiveness: Kombai has support for responsiveness in settings. This has been discussed later in the article.

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 are turned on in the settings).

Content Type Support

Links: Kombai supports linking in designs. If your Figma file has a hyperlink, we’ll add that link in the HTML email code at the right place.
GIFs: We also have support for GIFs in our code.
PNG: We have support for all image formats that are supported by Figma, 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. 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.

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.

ESP Support

By design, Kombai-generated code works on all ESPs. However, we have tested our code across 11 major ESPs to ensure the proper functioning of our code.

These ESPs are Klaviyo, Mailchimp, HubSpot, Constant Contact, Active Campaign, Campaign Monitor, Moosend, Brevo, Zoho Campaigns, Mailjet, and GetResponse. For more information, check our Support For ESPs guide.

Email Clients Support

Kombai-generated code works well on all major email clients. This includes Apple Mail(iOS), Apple Mail(macOS), Gmail(Android), Gmail(iOS), Gmail(Webmail), Outlook(Android), Outlook(iOS), Outlook(macOS), Outlook.com, Outlook(Windows), Yahoo(Android), Yahoo(Webmail), and Yahoo(iOS).

We only generate those CSS properties that are supported across the above-listed clients. In case your email design has any property with partial or no support for at least one of the above clients, you can find how to fix them in our Client Compatibility guide.

Mobile Responsiveness

Kombai supports mobile responsiveness in the auto-generated code. We allow you to define a custom breakpoint below which all the responsive configurations will be turned on.

You can set email margins, font size overrides, make content fluid, and stack columns on top of one another. All these settings will be enabled only on the devices below the breakpoint you provide. For more information, visit our Mobile Responsiveness guide.

Support us on Product Hunt

If you are reading this till the end, support our launch on Product Hunt and check out our product. Comment below if you have any questions or feedback.

DEV Community