Kombai

Kombai is an AI-driven tool that seamlessly turns Figma designs into front-end code. It's designed to make the development handoff smoother and save time for both designers and developers.

This tool lets users convert their Figma designs to top-notch UI code with just a click for each component. It automatically produces logical div structures and React components, using names that are similar to what a human would use for classes and components.

It also creates CSS for flex layouts without fixed sizes, incorporating features like flex-grow, flex-shrink, justify-content, align-items, gap, and padding. Kombai generates excellent JavaScript code that includes loops and conditional statements, along with sample data that is easy to replace.

Form elements, like buttons, inputs, selects, checkboxes, and switches, are provided as functional components using either MUI Base or standard HTML. A key advantage of Kombai is that users don't need to tag, name, or group design elements in any particular way, nor do they need to use auto-layout.

The tool is designed to generate code based on a developer's interpretation of the design. At its core, Kombai uses a combination of deep learning and heuristic models specifically created to understand UI designs and produce UI code.

The models are trained to mimic how developers make decisions when coding UI from designs. Kombai is compatible with React as a frontend framework and is built to create code that works well for modern, responsive applications.

The tool's development took 15 months, during which purpose-built models were created and trained from scratch to ensure the code output is accurate and reliable.