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
- Three modes: Plan Mode for code plan generation, Code Mode for code generation, and Ask Mode for codebase understanding.
- Preview browser: 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.
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).
Step 1: 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.
Step 2: 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.
Step 3: Define Code Generation Rules
After adding your Figma design URL, set persistent instructions for Kombai using rules and Agents.md files. The rules provide project level instructions to Kombai in order to enforce specific coding standards, architectural patterns, and output formats
To set the rules or instructions, create a AGENTS.md file in your project and add the project rules or instructions.
You can generate the project instructions by first taking screen shots of your Figma design, as shown below.
Then navigate to Google Gemini, add the screenshot to the chat and generate the instructions using the prompt below.
Give me a prompt for generating a React + Material UI web app
from the provided Figma designs. Describe structure of each page section in
detail
Once the instructions have been generated, add them to your AGENTS.md file, as shown below.
After that, Kombai automatically picks up the AGENTS.md file stored, as shown below.
Step 4: 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.
Step 5: Generate, and Review Code Plan
After configuring your tech stack, use Kombai plan mode to generate a detailed code plan for the given input before starting the code generation, as shown below.
You can learn more about Kombai plan mode here on Kombai docs.
Step 6: 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.
Step 7: 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.
Step 8: 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)