TL;DR
Imagine if you could convert your Figma designs into production-ready React + Material UI code faster than you can grab a coffee.
In this guide, you will learn how to convert Figma designs into production-ready React code in minutes using Kombai, a specialized frontend AI agent that's about to become your new best friend.
Before we jump in, here is what we will cover:
What is Kombai?
Setting up the Kombai AI Agent in your IDE (VS Code, Cursor, etc.)
Connecting Figma with Kombai
Adding Figma design to Kombai
Configuring your tech stack
Reviewing code generation plan
Running & previewing your app using Kombai browser
Here is a preview of the final results.
What is Kombai?
Kombai is an AI agent purpose-built for frontend development. It generates beautiful, functional frontends from Figma, text, images, or code, understanding your codebase and best practices of 30+ frontend libraries.
Key features:
Multi-input support: Works with Figma designs, text instructions, images, or existing code
Tech stack aware: Supports 30+ frontend libraries including React, Next.js, Material UI, Tailwind, and more
Smart planning: Generates editable development plans before complex tasks
Codebase integration: Scans and reuses existing components and theme variables
Auto-fixing: Automatically fixes TypeScript and linting errors
Sandbox preview: Run and test generated code in a local environment
Two modes: Code mode for generation, Ask mode for codebase understanding
You can learn more about Kombai AI agent here on Kombai docs.
Prerequisites
To fully understand this tutorial, you need to have a basic understanding of React
A Kombai AI account (they have a free tier).
A Figma account with a design file you want to convert.
Visual Studio Code (or a supported IDE like Cursor).
A new or existing React project (e.g., created with create-react-app or Vite).
Set Up Your Project and the Kombai Agent
In this section, you will learn how to set up your React project and Kombai AI agent in your IDE (VS Code, Cursor, WindSurf, etc).
Let’s get started.
First, open your React project in your IDE or set up one using the command below.
npx create-react-app figma-kombai-demo
Then Install the Kombai AI extension from the marketplace, as shown below.
Once the Kombai extension is installed, click Sign In button in Kombai. Then you will be redirected to the Kombai website to Sign up or log in to your Kombai account.
After signing in, you will be redirected back to the IDE.
Connecting Figma and adding your Figma design to Kombai
In this section, you will learn how to connect your Figma account to Kombai and add your Figma design to convert it into React code.
Let’s get started.
First, connect your Figma account with Kombai in order to access your Figma design and generate code based on them, as shown below.
Once you have connected your Figma account, copy your Figma design link, and add it to Kombai, as shown below.
Manage Rules
After adding your Figma design URL, set persistent instructions for Kombai using rules and Agents.md files.
Rules provide project-level or global instructions for Kombai. With rules, you can control Kombai’s behavior across your projects.
For example, you can enforce specific coding standards, architectural patterns, and output formats.
The **AGENTS.md** is a rule file for AI agents and Kombai automatically picks up the file if available in the project.
You can create the **AGENTS.md** file with the content below.
Create a React web application using Material UI (MUI) that meticulously replicates the "Dashnext" admin dashboard shown in the two provided Figma designs.
The application must include the following:
1. Core Structure & Theme:
Technologies: React (with hooks) and Material UI. All styling must be done using MUI components (<Box>, <Grid>, sx prop, etc.).
Layout: Use an AppBar for the top header, a persistent Drawer (permanent variant) for the sidebar, and a main content area that uses MUI's Grid component for the dashboard layout.
Light/Dark Mode: This is a critical feature. Implement a complete light/dark mode toggle. The app should use MUI's createTheme and ThemeProvider to switch between a light palette (from image_6f1ce1.jpg) and a dark palette (from image_6f1d21.jpg). The toggle button (sun/moon icon) should be in the AppBar.
2. Component Breakdown:
Sidebar (Drawer):
Header: "Dashnext" logo and title.
Navigation: Use MUI List and ListItemButton for the navigation items ("Modern", "Forms Elements", "Avatar", etc.), complete with ListItemIcon and ListItemText. The "Modern" item should be styled as the active link.
Sections: Use ListSubheader for the "DASHBOARD", "FORM", and "AUTH" section titles.
Promo Card: At the bottom, add a Card component for the "Get unlimited access" promotion, as shown in the design.
Header (AppBar):
Left Side: IconButton for the sidebar toggle (hamburger menu) and a "Search" TextField with an InputAdornment (search icon).
Right Side: A series of IconButton components for grid, language (?), light/dark toggle, and notifications.
User Menu: An Avatar, user name ("Chedo Haseviki"), and role ("Business"). This should look like it could be a Button or Chip that opens a Menu.
Main Dashboard Content (Grid container):
Row 1: Stat Cards: A Grid item containing another nested Grid of 6 Card components (Employees, Clients, Projects, Events, Payroll, Reports). Each card should have an Avatar with an icon, a Typography for the title, and a Typography for the number.
Row 2: Charts:
Revenue updates: A Card containing a Bar chart. Use recharts or MUI X Charts for this. Include the title, dropdown, and legend items ("Earning this month", "Expense this month").
Yearly backup: A Card containing a Donut or Pie chart (use recharts or MUI X Charts), a title, and a legend.
Row 3: Charts & Info:
Financial Summary: A Card with a smaller Bar chart.
Projects overview: A Card with two small bar charts/progress indicators.
Weekly earning: A Card with a Line chart.
Row 4: Tables & Lists:
Employee Task Overview: A Card containing an MUI Table. The table should have columns for Employee (with Avatar and name), Projects, Priority (use MUI Chip components with colors: red for High, orange for Medium, green for Low), and Amount.
Best selling products: A Card containing a list of products, each with an image, title, and an MUI LinearProgress bar.
3. Data:
All data, including chart data, table rows, and stat card numbers, should be hard-coded as mock data within the component.
4. Responsiveness:
The Grid layout must be responsive. On smaller screens, the grid items should stack vertically.
The sidebar Drawer should become temporary (toggleable) on mobile screens.
Then Kombai automatically picks up the **AGENTS.md** file stored, as shown below.
Scan and Configure your tech stack
Once you have managed project rules, configure your tech stack. Kombai offers a wide range of tech stack. This lets you generate code that aligns with your workspace’s requirements.
In this case, our Tech stack will be React, TypeScript and Material UI. To configure your tech stack, follow the steps as shown below and then save the configuration.
Review code generation plan
After configuring your tech stack, you can plan for complex tasks. Kombai always generates an editable plan for you to approve or update. This ensures that the task and generated code is always in your control.
Complexity of a task is determined by the number of sections, images, icons, global store entities, queries, etc. required in the code.
You can plan for complex tasks, as shown below.
Once the plan is generated, click the Approve Plan & Start Coding button to accept the plan and start the code generation process, as shown below.
Generating code
Once the plan is approved or updated, Kombai starts the code generation process in the workset. Working set refers to the set of files generated by Kombai during the code generation process, as shown below.
Running & previewing your app using Kombai browser
After generating the code, Kombai will run the development server and fix any errors.
Also, Kombai browser lets you preview your app’s local deployment in the browser, with built-in listeners so you can iterate fast by sending elements and errors back to Kombai as context.
To open the preview, click the Start Preview button below the Kombai input box. Kombai will start the dev server.
Once the server is runnning, click the Kombai Browser button to open the browser preview, as shown below.
Analyzing Kombai output results
Once you have run and previewed your app, analyze the generated code and the UI to make sure it is close to what you wanted.
With other tools, you'll see an endless nesting of divs, often with no semantic meaning, because the tool is just tracing layer groups.
However, with Kombai, you'll get clean, semantic JSX that a human would write. Kombai understands layout and structure, not just layers, as shown below in the App.tsx file.
import { useState } from 'react';
import type { FC } from 'react';
import { Box, Toolbar, Typography } from '@mui/material';
import Sidebar from './components/Sidebar';
import TopBar from './components/TopBar';
import StatCard from './components/StatCard';
import RevenueChart from './components/RevenueChart';
import YearlyBackupChart from './components/YearlyBackupChart';
import FinancialSummaryChart from './components/FinancialSummaryChart';
import ProjectsOverviewCard from './components/ProjectsOverviewCard';
import WeeklyEarningChart from './components/WeeklyEarningChart';
import EmployeeTaskTable from './components/EmployeeTaskTable';
import BestSellingProducts from './components/BestSellingProducts';
import { mockQuery } from './data/dashboardMockData';
const App: FC = () => {
const [mobileOpen, setMobileOpen] = useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
<Box sx={{ display: 'flex', minHeight: '100vh' }}>
<Sidebar mobileOpen={mobileOpen} onDrawerToggle={handleDrawerToggle} />
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
<TopBar onMenuClick={handleDrawerToggle} />
<Box
component="main"
sx={{
flexGrow: 1,
p: { xs: 2, sm: 3 },
bgcolor: 'background.default',
overflowY: 'auto'
}}
>
<Toolbar />
{/* Statistics Cards */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: {
xs: '1fr',
sm: 'repeat(2, 1fr)',
md: 'repeat(3, 1fr)',
lg: 'repeat(6, 1fr)'
},
gap: 3,
mb: 3
}}
>
{mockQuery.statistics.map((stat) => (
<StatCard key={stat.id} {...stat} />
))}
</Box>
{/* Charts Row 1 */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', lg: '2fr 1fr' },
gap: 3,
mb: 3
}}
>
<RevenueChart
data={mockQuery.revenueData}
stats={mockQuery.revenueStats}
/>
<YearlyBackupChart {...mockQuery.yearlyBackup} />
</Box>
{/* Charts Row 2 */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' },
gap: 3,
mb: 3
}}
>
<FinancialSummaryChart {...mockQuery.financialSummary} />
<ProjectsOverviewCard {...mockQuery.projectsOverview} />
<WeeklyEarningChart {...mockQuery.weeklyEarning} />
</Box>
{/* Tables Row */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', lg: '2fr 1fr' },
gap: 3,
mb: 3
}}
>
<EmployeeTaskTable tasks={mockQuery.employeeTasks} />
<BestSellingProducts products={mockQuery.bestSellingProducts} />
</Box>
{/* Footer */}
<Box sx={{ textAlign: 'center', py: 2 }}>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Design and Developed by{' '}
<Typography
component="a"
href="https://getnextjs.com"
target="_blank"
rel="noopener noreferrer"
sx={{ color: 'secondary.main', textDecoration: 'underline' }}
>
GetNextJs Templates
</Typography>
</Typography>
</Box>
</Box>
</Box>
</Box>
);
};
export default App;
From the output results, Kombai gets you 80-90% of the way where it builds the perfect UI scaffolding, which is the most laborious part. You, the developer, are still needed for the last 10-20% and that's the fun part.
Also, as you can see from the preview results below, Kombai was able to generate frontend UI that is pixel perfect with the Figma design. The code only requires minimal tweaks to match the desired UI design.
So, is Kombai the Best Choice for converting Figma Design to React code in minutes?
After using general coding agents, MCPs and Kombai to convert Figma designs into React Code, Kombai significantly outperforms these other AI tools in building UX & UI from Figma, images, or text based prompts as shown below in benchmarks for real-world frontend tasks.
Here are the key reasons for its high-quality output:
Understands Design Intent: Unlike other AI tools that require perfect Figma designs (like strict auto-layouts and layer naming), Kombai's AI agent is trained to interpret the visual design. It understands logical groupings, spacing, and layout intentions, even from "messy" Figma files.
Codebase & Tech Stack Aware: You can configure Kombai for your specific tech stack. It can scan your existing codebase to reuse your own components and styles and even integrate with popular libraries like Tailwind CSS, MUI, **and **Shadcn UI.
**Generates Readable & Maintainable Code: **Kombai analyzes the entire design, identifies repeating UI elements, and automatically generates them as reusable React components. This promotes a modular, DRY (Don't Repeat Yourself) codebase from the start.
Agentic & Iterative Workflow: Kombai is built for frontend teams and the "Plan, Code, Preview" loop is a game-changer. You review a plan, preview the component in a sandbox, and ask for changes before any code is written to your files. This gives you full control and trust in the process.
Focuses on the 80%: Kombai intelligently handles the 80% of UI work that is tedious (layout, styling, component boilerplate) so you can focus on the 20% that matters (logic, data fetching, and state management).
If your goal is to ship React UIs that look exactly like the Figma file, respect your repo conventions, and compile error-free on the first try, Kombai is currently the only AI agent purposely built to do exactly that—nothing more, nothing less.
Conclusion
In conclusion, Kombai AI agent changes the developer's role where it eliminates the most time-consuming, least creative part of frontend development.
Note that this isn't about replacing developers but upgrading their frontend developement workflow.
You are no longer a translator for a designer but a reviewer and integrator of high-quality code, which allows you to move 10x faster and focus on what actually matters: your app's logic, state, and data flow.
Stop hand-coding your UI boilerplate. Grab a free Kombai account, install the VS Code extension, and try converting one of your own Figma frames.
You won't just be surprised by how much time you get back, you will change how you approach frontend development.
Top comments (0)