Using The Plugin

Generate the code in a click

Kombai translates your Figma designs to code within a single click. Select your Figma design and run Kombai for Email to generate the HTML email code.

Preview code

Kombai lets you preview the auto-generated code inside its plugin. The rendering of the code is shown in the preview area, whereas the auto-generated code is shown in the HTML/CSS tab.

Customize code output as per your need

The default Kombai-generated code can be customized further as needed. We supports various customizations - Manage Fonts, Convert Layers to Images, Localize Email, etc. Let's take a look at each of them:

Manage Fonts

Kombai provides a set of font-related features to help you manage fonts in your design better. These features can be found under the Manage Fonts section. We support marking fonts as images, adding font fallback for non-email-safe fonts, and adding a custom font to the design.

Click here to know more about this feature.

Convert Layers to Images

Convert Layers to Images allows you to convert any Figma layer to images. This feature is handy while converting large groups or frames to images.

Click here to know more about this feature.

Localize Email

Kombai supports localize email feature to help you translate your design into 75 different languages. Once you have defined the traslation language and followed the mentioned steps, Kombai will generate a copy of the source design in the translated language.

Click here to know more about this feature.

Links in Figma

If the source Figma design has any external link, Kombai will place that link in the appropriate place in the auto-generated code.

Click here to know more about this feature.

Customize Dark Mode

Customize Dark Mode section lets you define override font and background colors for your email. Once you have defined a dark mode override color in the plugin, the auto-generated code will intelligently figure out the theme of the rendering device and client, and display the light or dark mode colors accordingly.

Click here to know more about this feature.

Mark Elements to Edit in ESP

Kombai allows you to mark specific texts and images as editable for Klaviyo. Once you have marked the elements and exported the code, you can further edit those elements inside Klaviyo.

Click here to know more about this feature.

Mark Sections to Replace in ESP

Kombai allows you to mark specific sections as replaceable for Klaviyo. Once you have marked the sections and exported the code, you can further replace those sections inside Klaviyo.

Click here to know more about this feature.

Export email

The Kombai-generated code can be further exported in two ways:

Download HTML

Once the auto-generated code is ready for your design, you can download it locally on your computer with the help of the Export button in the preview tab.

Click here to know more about this feature.

Export to ESPs

Instead of going through the download code route, you can also export the Kombai-generated code directly to the ESPs. The exported code can be a static email or one with marked dynamic blocks to make further edits in ESPs.

Click here to know more about this feature.