Kombai AI: A Complete Guide & Tutorial for Beginners

Curious about Kombai AI and how it can streamline your workflow? In this guide, we’ll explore what is Kombai AI, its key features, and provide a step-by-step Kombai AI tutorial to help you get started. By the end, you’ll know how to use Kombai AI effectively and maximize its potential.

What is Kombai AI?

Kombai AI is a generative AI tool that converts designs into high-quality code with minimal effort. It helps developers and designers transform Figma designs into React components, HTML + CSS, and email-compatible HTML. Unlike traditional code-generation tools, Kombai understands designs like humans, ensuring structured, optimized, and production-ready code.

Key Features of Kombai AI

Code Generation for Web and Email

• Converts Figma designs into React and HTML + CSS with a single click.
• Generates email-friendly HTML using a table-based structure for compatibility across major email clients.

AI-Powered Design Interpretation

• Works without predefined templates or strict naming conventions.
• Adapts to unique design styles and automatically generates logical div structures and CSS rules.

Optimized for Developers

• Produces high-quality JavaScript and React components with loops, conditions, and reusable elements.
• Supports widely used UI frameworks like MUI Base.

Seamless Integration

• No manual tagging or specific design structures required.
• The generated code is easy to copy, customize, and integrate into development workflows.

Kombai AI for Email

Kombai AI extends its capabilities beyond web development by offering a powerful solution for email design conversion. With Kombai for Email, users can instantly transform their Figma email designs into fully compatible HTML email code. The generated code follows a structured table-based layout using <table>, <tr>, and <td> tags, ensuring broad compatibility across various email clients.

Unlike conventional tools, Kombai does not impose strict design constraints. Users don’t need to follow specific naming conventions or apply predefined templates. Any Figma design that looks natural for an email can be converted into clean, production-ready HTML.

Key Features of Kombai for Email

• One-Click Email Code Generation – Transforms Figma designs into email-ready HTML instantly.
• Email Client Compatibility – Uses a table-based structure to ensure proper rendering across different platforms.
• Flexible Design Input – No need for predefined templates, specific layer names, or strict formatting rules.
• Seamless Integration – Works effortlessly with ESP/MAPs like Klaviyo for direct export and further editing.

Launching the Kombai for Email Plugin

The Kombai for Email plugin can be accessed directly within Figma, making it convenient for both designers and developers. It works in both Design Mode and Dev Mode, offering flexibility.

From the Figma Community Page

1. Search for Kombai in the Figma Community page.
2. Go to Kombai - HTML email code from ANY design in a click Klaviyo, Email builder, Email template, Gmail under Plugins section.
3. Click Open to... button and select the Figma file in which you want to run the plugin.
4. Once the design and the plugin widget is loaded, click on Run.

From a Figma File (Design Mode)

1. Right click on the canvas and go to Plugins.
2. Select the Kombai plugin from Recents or Saved sections (if you have used the plugin recently or saved it before).
3. Go to Manage plugins... and search for Kombai.
4. Open Kombai.

From Dev Mode

1. Turn on the Dev mode in Figma.
2. Right click on the canvas and go to Plugins.
3. Select the Kombai plugin from Recents or Saved sections (if you have used the plugin recently or saved it before).
4. Go to Manage plugins... and search for Kombai in the Plugins tab.
5. Open Kombai.

Using the Plugin for Email

Kombai AI provides a seamless way to preview and export the generated HTML email code before deployment. This ensures users can review, modify, and finalize their email templates effortlessly.

The Preview Tab displays a live rendering of the Kombai-generated HTML inside an iframe, allowing users to see exactly how the email will appear before exporting. This helps in identifying any necessary refinements.

Additional Customization Options

• Subject Line – Add a subject line directly to the email.
• Preview Text – Define a short preview text that appears in the email inbox.
• Email Background Color – Set a background color for the email to enhance its visual appeal.

Exporting the Code

Once the email design is finalized, Kombai provides two options for exporting the code:

• Download Code – Save the auto-generated HTML email code locally for manual use.
• Export to ESP/MAPs – Directly export the email to a marketing automation platform for further customization and deployment.

Users can also view and copy the full HTML email code from the HTML Code Tab, which dynamically reflects any customizations made in the settings.

Kombai AI for Web

Kombai AI simplifies front-end development by converting Figma designs into React and HTML + CSS code with a single click per component. It uses a combination of deep learning and heuristic models to interpret designs like a developer, ensuring clean and structured code without the need for pre-processing.

Unlike conventional tools, Kombai does not require grouping, naming layers, or using auto-layout in Figma. It automatically understands logical structures, minimizes hardcoded widths and margins, and intelligently determines which elements should be flexible in layout.

Key Features of Kombai for Web

• One-Click Code Generation – Converts Figma designs into structured React and HTML + CSS code effortlessly.
• No Manual Preprocessing – No need for tagging, grouping, or layer naming in Figma. Kombai auto-detects logical structures.
• Smart Layout Handling – Reduces hardcoded widths and margins, allowing flexible and scalable UI components.
• Developer-Friendly Code – Generates high-quality React components with loops, conditions, and reusable elements for efficient development.
• Seamless Figma Integration – Directly imports designs from Figma without requiring additional setup.

Creating an Account and Connecting to Figma

To start using Kombai for Web, users need to create an account and connect it with Figma. The sign-up process is simple and supports Google and Email authentication.

Signing Up with Google

• Click on Sign up with Google on the registration screen.
• Choose your preferred Google account or enter your email and password.
• Your Kombai account is instantly created, and you will be redirected to the dashboard.

Signing Up with Email

• Select Sign up with Email and enter your email address and password.
• Click Sign Up, and a confirmation email will be sent to your inbox.
• Open the email and click on the Confirm Email link to activate your account.

Connecting to Figma

• After signing in to Kombai, a Connect Your Figma Account popup will appear if your Figma account isn’t linked.
• Click on the Connect Figma button to proceed.

• You will be redirected to the Figma login page. If not already logged in, enter your Figma credentials and sign in.

• Once logged in, a permission request will prompt you to allow Kombai to access and read your Figma designs.
• Click on Allow Access to grant permissions.

• After granting access, you will be redirected to the Kombai dashboard, where you can start converting your Figma designs into code.

Kombai only reads your Figma designs and does not modify or delete any files, ensuring complete control and security over your projects.

Using the Plugin for Web

Kombai makes it easy to convert Figma designs into React and HTML + CSS code with minimal effort. The plugin allows users to import designs, preview them, and generate structured, production-ready code quickly.

Users can bring their Figma designs into Kombai in two ways:

Importing a Figma Frame

• Open Figma and navigate to the page containing your design.
• Select the frame you want to import. You can do this in two ways - from the left panel in Figma where all your frames and elements are listed or, directly from the design canvas itself. Just click on the frame.

• Copy the frame link from the address bar (if using Figma in a browser) or right-click the design tab and select Copy Link (if using the desktop app).

• Open the Kombai dashboard and paste the copied Figma link into the input field.

• Click the Load button (arrow icon) to import the design.
• Wait for the design to load. Larger files may take extra time.

• Once loaded, a preview of the design will appear in Kombai, allowing you to proceed with code generation.

Importing a Figma File

• Copy the link to your Figma file. You can do this by: right-clicking on a design in the Figma dashboard and selecting Copy Link / Opening the design and copying the URL from the browser’s address bar / Right-clicking the design tab in the Figma desktop app and choosing Copy Link.

• Open the Kombai dashboard and paste the copied Figma file link into the input field.Click the Load button to import the design.

• Once loaded, all Figma pages and frames/groups will be displayed.

• Select the design page and frame that you want to convert into code.

• Click Proceed with Selection and wait for the design to load.
• A preview of the design will appear in the Kombai dashboard as shown in the previous section, allowing you to continue with code generation.

Generating the Code

Identifying Components in the Design

Kombai AI automatically analyzes the imported design and breaks it down into logical components or sections. When you hover over the design inside Kombai, you will see these segmented sections highlighted. Each section can be converted into code individually, or you can generate the code for the entire design at once.

Generating Code for Specific Sections

If you want to generate code for a particular section of your design:

• Click on the specific section inside Kombai.
• Kombai’s AI will interpret the design and generate the corresponding React or HTML + CSS code.

Generating Code for the Entire Design

If you want to generate code for the entire design:

• Click on the Generate Code button as shown in the image below.
• Kombai will process the complete design and generate optimized front-end code for all components.

Choosing the Output Format

• HTML/CSS Code – Select the HTML/CSS tab to generate clean, structured HTML and CSS for your design.

• React Code – Select the React tab to generate reusable React components with the appropriate JSX and styling.

Conclusion

Kombai AI simplifies design-to-code conversion, generating React and HTML + CSS from Figma designs effortlessly. We explored Kombai for Email for email-compatible HTML and Kombai for Web for structured web code. With easy design imports, automatic component detection, and export options, Kombai streamlines development, making code generation fast and efficient.

For more information, make sure to check out the official Kombai website.