From Figma to Production: How I Optimized Frontend Development Time by 70%

Look, AI is getting lots of traction, we all know it! Unless you’re living in the woods or on a far island. Almost every product now digital and physical has a touch of AI added to it. Yes, that’s fun, but one way to get ahead it not by just being a “consumer” of this AI application. It’s good for you and future you to also be a producer.

Now, when building apps, it’s nice (and also industry standard) to have a UI design/mockup of your visionary application., which can be done with Figma. After designing with Figma, the next step is converting the designs to code and adding functionalities. Now you can do this by developing it yourself, or hiring a team of Frontend developers.

However with Kombai, the AI Agent built for Frontend development, you can get that done fast with AI. That’s what we will look at in this article by building an e-commerce website for buying and selling products like dresses, hoodies, shirts. Instead of spending time manually converting the UI design to code, we will plug in the Figma URL and let Kombai do the magic!

Ready? Let’s begin!

Prerequisites

To follow along, make sure you have all of this setup

• Node and NPM/yarn are installed on your computer
• A Figma UI design URL
• An IDE like VS Code/Windsurf
• React/Next.js knowledge
• Knowledge of Express.js and Node.js
• A Kombai account, sign up here

Note: Kombai is an AI agent built specifically for frontend developers. It works with your IDE; VS Code, Cursor, Windsurf, so you never leave your workflow. Kombai builds beautiful, functional frontends directly from Figma designs, plain text prompts, or your existing code. To know more, read this post.

What we are building

We’re building an e-commerce website for buying and selling products like dresses, hoodies, with authentication, cart functionalities, and checking out.

This is what the Figma design that we will convert with Kombai look like:

• The landing and sign up page
  

• The shopping cart
  

The e-commerce product will have:

The frontend

• A landing page with all the products in it.
• An authentication form for signing up and signing in

The backend

• API endpoints for authentication, products, categories, cart, orders
• A database to store the users, carts.

Next we will connect the Figma URL for the above design for Kombai to generate the code.

Moving from Figma to code with Kombai in record time

If you’re new to Kombai, follow the installation steps in this guide. For those that have a Kombai account and have set up their IDE, let’s proceed!

Got to your IDE (Windsurf is used in this tutorial but other IDEs have a similar view), and the left sidebar, you will see the Kombai icon as highlighted with the checkmark below.

It then asks you to Log in or Sign up, click on the Log in button, which then loads your browser, and shows a successful login page. Click on Go back to editor to proceed.

After signing in to Kombai through your browser, this modal shows in your IDE, click on the Open button (don’t worry, it’s all good 😊)

Now we are ready to proceed!

Creating the Frontend from Figma with Kombai

There are two ways to connect Figma designs to Kombai so it converts and generated the code for the designs:

1. Adding the Figma design link/URL
2. Connecting your Figma account and importing the designs

In this article, we will be using option 1, which is adding the Figma design URL to Kombai. To do this, open your Figma design file and copy the share link to the specific screen or frame you want to code. Kombai uses this link to interpret the design, extract components, and generate accurate frontend code

Open your terminal and run this command to create a Next.js application for the frontend.

npx create-next-app@latest
cd project_name

Open the Kombai panel in your IDE and paste the Figma link

In the Kombai panel, paste the Figma link to your Authentication screen in the Figma file. Kombai will fetch the design and start analyzing it.

Once the Figma link is pasted, Kombai will begin indexing the design and will prepare it for the next steps. You’ll see a preview of the design you're working with.

With Kombai connected to your design, you can see a live preview of your Figma file. It’s now ready to generate production-ready code for the frontend.

Add a prompt tells Kombai what to do. This guides Kombai to handle both UI and API integration.

You are to build the fully functional frontend for the e-commerce design as shown in the Figma file from the URL I shared with you. We have a backend for the e-commerce that you will integrate to the Frontend you are building

Let Kombai scan your workspace

Kombai will scan your Next.js project to understand the folder structure, installed libraries, and configurations. This ensures that the code it generates aligns perfectly with your project setup.

Once Kombai starts scanning your project, it analyzes your codebase to detect libraries, configurations, and folder structure.

Kombai then identifies the framework, component libraries, and router being used in the project. Here, Kombai detected NextJS 15, Tailwind v4, and the App Router.

Now that Kombai is connected to the Figma file and your codebase is indexed, let’s generates the code for all the pages/screens in the Figma design. You can follow the exact same process for any other page in your design (product listing, cart, checkout)

Review and approve the plan

Before writing any code, Kombai presents a step-by-step plan showing what components will be created, how the layout will be structured, and where files will be placed. Review this plan carefully,you can edit or fine-tune it if needed, then hit Approve.

Run it in the local sandbox

Instead of writing directly into your repo, Kombai generates the page inside a sandbox. You can preview the Authentication page, test the UI states (login form, error handling), and check that the design matches the Figma file.

Save to your project

Once satisfied, save the generated code into your repo. Kombai will create the files under your project structure.

At this point we have successfully generated the UI for the Authentication page with Kombai. You can repeat this exact workflow for the other pages.

Integrating the backend API endpoints with Kombai

Now that we have generated the UI with Kombai, the next step is to connect it with the backend APIs. Kombai is not limited to only building UI components, it can also help you generate API interaction code directly inside your frontend components.

In this scenario, we will integrate the Authentication endpoints (/api/signup and /api/signin). Once you understand the workflow, you can repeat the same process for products, cart, and other features.

With the e-commerce signup page UI generated, we will then instruct Kombai to connect the sign up form with our backend API.

Open the Komabi chat in the left side bar as shown below

Providing the prompt for Kombai

The way you prompt AI agents matter a lot, you got to make sure the instructions are clear and direct, so you get exactly the result you want. To connect the sign up form to the backend API, enter this prompt:

Generate code to connect this signup form to the backend API.
    - Use fetch() to make POST requests to `/api/signup`.
    - Send email and password from the form.
    - Show error messages if the API fails.
    - Show success message and redirect to the signin page on success.

Kombai will read your existing page.signup.tsx file, and generate the the form submission logic without breaking your styling or layout.

Review the Plan

Kombai will show you a plan of what files and functions it wants to update. Review this carefully and make changes where you want to make the changes, after that approve the plan and save it.

To make it more fun, you can extend the same workflown above as it applies to other parts of the e-commerce application. From the signin, to products, cart, and checkout. You will need to tweak the prompt slightly depending on the endpoint you want to hit and the page you are working on.

Running the frontend project

After you have integrated the whole endpoints with using Kombai, open your command terminal and run the npm run dev command, which the starts the frontend application like so:

Copy the local app URL http://localhost:3000, and enter it in your preferred browser to load the e-commerce website.

When the application is running, it displays like so:

Setting up the backend for the frontend we have built with Kombai

Now that we have the Frontend setup, converting the Figma design to code, let’s quickly set up the backend.

In your computer, create a new folder, and open it in your command terminal, then run these commands to create and navigate to the backend directory.

mkdir ecom-backend && cd ecom-backend
npm init -y

Install the needed dependencies for the project with these commands

npm i express mongoose cors dotenv bcrypt jsonwebtoken express-validator axios
npm i -D nodemon

After the dependencies have been installed, create a .env file in the root of your project’s directory to securely store the environment variables:

PORT=5050
MONGO_URI=mongodb://127.0.0.1:27017/ecommerce
JWT_SECRET=super_secret_change_me
JWT_EXPIRES_IN=1h

This is the project tree for how the backend for the e-commerce would be

├─ .env
├─ package-lock.json
├─ package.json
└─ src
   ├─ config
   │  └─ db.js
   ├─ controllers
   │  ├─ auth.controller.js
   │  ├─ cart.controller.js
   │  ├─ category.controller.js
   │  └─ product.controller.js
   ├─ index.js
   ├─ middleware
   │  ├─ auth.js
   │  └─ error.js
   ├─ models
   │  ├─ Cart.js
   │  ├─ Product.js
   │  └─ User.js
   ├─ routes
   │  ├─ auth.routes.js
   │  ├─ cart.routes.js
   │  ├─ category.routes.js
   │  └─ product.routes.js
   └─ utils
      └─ validate.js

Next, configure package.json file:

"scripts": {
  "dev": "nodemon src/index.js",
  "start": "node src/index.js"
}

This script allows you to run your application in development mode with nodemon, using npm run dev and start the application in production mode using npm start.

Now that the backend start script is set up, create a User model file src/models/User.js with the following code:

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");

const UserSchema = new mongoose.Schema(
  {
    name: { type: String, trim: true, required: true },
    email: { type: String, trim: true, required: true, lowercase: true, unique: true },
    passwordHash: { type: String, required: true },
    role: { type: String, enum: ["customer", "admin"], default: "customer" }
  },
  { timestamps: true }
);

// Virtual setter to hash on create/update when using user.setPassword(plain)
UserSchema.methods.setPassword = async function (plain) {
  const salt = await bcrypt.genSalt(10);
  this.passwordHash = await bcrypt.hash(plain, salt);
};

UserSchema.methods.comparePassword = async function (plain) {
  return bcrypt.compare(plain, this.passwordHash);
};

// Hide sensitive fields in JSON
UserSchema.methods.toJSONSafe = function () {
  const obj = this.toObject();
  delete obj.passwordHash;
  return obj;
};

module.exports = mongoose.model("User", UserSchema);

This defines a User model with password hashing, comparison, and secure JSON output.

Validation Helpers

After the user models are setup, create validation helpers in the src/utils/validate.js directory with the following code:

const { body, validationResult } = require("express-validator");

const registerRules = [
  body("name").isString().trim().isLength({ min: 2 }).withMessage("Name is required"),
  body("email").isEmail().withMessage("Valid email is required"),
  body("password").isLength({ min: 6 }).withMessage("Password must be at least 6 chars")
];

const loginRules = [
  body("email").isEmail().withMessage("Valid email is required"),
  body("password").isLength({ min: 6 }).withMessage("Password must be at least 6 chars")
];

function validate(req, res, next) {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ ok: false, errors: errors.array() });
  }
  next();
}

module.exports = { registerRules, loginRules, validate };

This utility provides validation rules for user registration and login, along with a validate function to check for errors.

Adding the authentication middleware

Create an authentication middleware file src/middleware/auth.js with this code:

const jwt = require("jsonwebtoken");

function auth(requiredRole = null) {
  return (req, res, next) => {
    try {
      const header = req.headers.authorization || "";
      const [scheme, token] = header.split(" ");
      if (scheme !== "Bearer" || !token) {
        return res.status(401).json({ ok: false, message: "Unauthorized" });
      }
      const payload = jwt.verify(token, process.env.JWT_SECRET);
      req.user = payload; // { id, role, iat, exp }
      if (requiredRole && payload.role !== requiredRole) {
        return res.status(403).json({ ok: false, message: "Forbidden" });
      }
      next();
    } catch (err) {
      return res.status(401).json({ ok: false, message: "Unauthorized" });
    }
  };
}

module.exports = { auth };

This middleware above authenticates requests made to the backend server using JSON Web Token (JWT)

To connect it all together, create the main application file src/index.js with the following code:

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const { connectDB } = require("./config/db");
const { errorHandler } = require("./middleware/error");

const authRoutes = require("./routes/auth.routes");
const productRoutes = require("./routes/product.routes");
const categoryRoutes = require("./routes/category.routes");
const cartRoutes = require("./routes/cart.routes");

async function main() {
  await connectDB(process.env.MONGO_URI);

  const app = express();

  app.use(cors());           // Lock this down to your frontend origin in prod
  app.use(express.json());   // Parse JSON bodies

  app.get("/", (_req, res) => res.send("Ecommerce API is up"));

  // Routes
  app.use("/auth", authRoutes);
  app.use(productRoutes);
  app.use(categoryRoutes);
  app.use(cartRoutes);

  // Error handler
  app.use(errorHandler);

  const port = process.env.PORT || 5050;
  app.listen(port, () => console.log(`🚀 API listening on http://localhost:${port}`));
}

main().catch((e) => {
  console.error("Fatal startup error:", e);
  process.exit(1);
});

This sets up the Express server, connects to the database, applies middleware, routes requests, and starts listening on the specified port.

Running the backend

To run the backend, ensure MongoDB is installed and running locally. Navigate to the ecom-backend directory and run this command:

npm install
npm run dev

This starts the server on http://localhost:5050. It will automatically restart if you make changes to the code. Note that it relies on the .env file for configuration, so ensure it’s set up correctly.

And that’s it! From a Figma design to a full stack e-commerce website, we have our frontend and backend all connected!

To load the frontend as we mentioned in the frontend section above, open this URL http://localhost:3000, in your browser, and the frontend loads like so

• The Sign in page
  

• The products page

How We Actually Optimized Frontend Development Time by 70%

Kombai reduced my frontend development time for building this full-stack e-commerce website by 70%, bringing it down from hours of manual work to just minutes. Here’s how it worked for this project:

• Figma Parsing: Kombai automatically processed the Figma design, saving time on manual asset extraction.
• In-IDE Chat Prompting: I used the chat panel to quickly request changes, avoiding extra steps.
• Repo Indexing: Kombai understood my project setup, saving time on manual adjustments.
• Auto-Fixing & Preview: Errors were fixed instantly, and previews helped catch issues early.
• Efficient Code Generation: Kombai created clean, usable code right away, speeding up the process.

This time save came from Kombai’s ability to handle the entire workflow smoothly.

Check out more examples of how to build great frontends with Kombai here

Next steps

Turning Figma designs into production-ready frontends has always been one of the most time-consuming parts of my workflow, but using Kombai changed that. Instead of spending hours translating layouts, adjusting components, and fixing TypeScript errors, I was shipping pixel-perfect UIs in a very short time.

Learn more from the Kombai documentation

Got Figma designs from your UI/UX designer? Add the designs to Kombai, let it generate the Frontend code in record time!