Kombai - HTML email code from ANY design in a click |Klaviyo, Email builder, Email template, Gmail

About this plugin

Documentation with Tutorials

Playground File

What is Kombai for Email?

Kombai for Email lets users convert any email designed in Figma to HTML code in just a click. The autogenerated code works on all major ESPs and email clients, including the dreaded Outlook. Also, email-coding best practices are built-in to ensure responsiveness, high deliverability, and low spam risk of the autogenerated emails.

Do we need to use specific templates/ design blocks to generate code with this plugin? Are there any other rules (tagging/ autolayout etc.) that we need to follow?

No, Kombai for Email does not require your email design to be constrained by any specific templates, blocks, or rules. You don't need to use specified components/ design blocks or name/ tag the layers in any specific way. Using autolayout is also not required.

You can create your email design from scratch in Figma, use any of the publicly available email design templates or leverage Kombai’s in-built email-builder tool. Kombai is trained to create code based on how the email design would “look like” to a developer. Hence, as long as your Figma design visually represents the email you want to send out, it can generate a high-quality email code for this.

How do you make sure that the code actually works for Email clients? Would it pass tests on litmus/ email-on-acid etc.?

Yes! The auto-generated code uses a table structure with appropriate <table>,<tr>,<td> tags, and CSS that is widely supported across common email clients. It also uses special conditionals to ensure that the emails render correctly other clients that require specific code-handling, such as Outlook.

Specifically, we have optimized and tested the tool for the following email clients, which should cover 95-100% of email users, depending on your specific target segment:

• Apple Mail (MacOS & iOS)
• Gmail (iOS, Android & Desktop webmail)
• Outlook (Windows, MacOS, iOS, Android & Outlook.com webmail) and 
• Yahoo Email (iOS, Android, Webmail)

Kombai for email also runs all generated code through 25+ automated checks to detect any design element that might not be compatible with some email clients. The results of these automated tests can be found in the “Email Compatibility” tab of the plugin. 

We, as well as our users, have extensively tested the autogenerated code with testing tools such as litmus and email-on-acid. The code usually passes these tests with flying colors. 

How do the auto-generated emails work on mobile devices?

All email codes generated by Kombai should work on mobile by default. 

In addition, for our advanced users - the tool lets you customize specific responsive behaviors, such as margins, font-size scaling, fluid behavior, etc., for any breakpoints you choose to define.

More about the mobile-compatibility and responsiveness of Kombai for Email can be found here.

What features are included in the Free and Paid plans of Kombai for Email?

The Basic version, appropriate for casual users, is available for free. The Professional version, appropriate for professional email marketers and developers, is available in monthly and annual plans. The annual plan has a 20% discount over the monthly plan.

The Basic (free) plan includes the following features:

• Generate email code for designs in Figma (Unlimited)
• Copy code (Unlimited)
• Send preview emails (Unlimited)
• Minify Code
• Customize responsive behavior
• Automated compatibility evaluation
• Email design blocks for easy drag-and-drop

The professional (paid) plan includes all of the features in the basic plan, plus:

• Unlimited code downloads with optimized images
• Define font fallbacks for email clients that do not support non-email-safe fonts
• Autogenerate alt-text for images
• Premium support

Is there a free trial available?

All users get access to a free trial of the Professional plan for 5 code downloads. Once they exhaust their five free downloads, they can either pay (via Stripe) to upgrade to the Professional plan or continue using the Basic plan.

What if I do not have email designs ready?

Kombai for Email has a built-in email-builder that has several email design blocks for easy drag & drop. You can use these to build your tool.

You can also use popular drag-and-drop-email design builders like Marka, Cannoli, or Ampier to get your first design draft and then customize the designs. Similarly, there are a number of great email template libraries available in the Figma community. Here are some of our favorites:

• The ones by Grisha, creator of Marka
• The ones by Maool

We already use a drag-and-drop builder. How can Kombai for Email help us?

There are several solid drag-and-drop email builders, like Emailify in Figma, Stripo, Stensul, and Beefree. However, many a time, it’s not possible to create the exact email design you’d want with a drag-and-drop builder. In such cases, Kombai lets you create any design file in Figma and convert it into an HTML email in just a click.

What’s the technology under the hood?

Under the hood, Kombai for Email is powered by Kombai’s proprietary AI models that are trained to interpret designs like human developers. The models have been trained to emulate the implicit and explicit inferences developers make while writing code from designs.

You can read more about our technology here.

I would like some more help. How can I contact Kombai?

Please feel free to write to us at [email protected] for any additional help you might need.