Generate code from Figma

This guide covers how to use Kombai to generate code from Figma designs. It walks you through every step, from Figma design input to code preview and follow-up with Kombai. It covers workflows for existing and new projects.

Use Kombai in existing projects

Kombai works seamlessly with existing projects. It understands your tech stack and reuses existing components and theme variables to generate code that fits your codebase.

To get started, open your project in an IDE and launch Kombai.

Add your Figma designs

Kombai lets you add a single or multiple Figma designs as input. Follow these steps to add Figma designs:

1. Click Kombai’s input box. Type @figma and press enter. Alternatively, click the Figma icon in the input box.
2. In the Enter the link to your Figma frame modal, add the Figma URL and click Confirm.

If your Figma account isn’t connected to Kombai, you’ll need to connect it first. Click here to learn how.

3. If you have any instructions or additional Figma designs, add them to the input. When you are ready to continue, press enter.

Review and update plan

Kombai can generate a highly detailed code plan before generating code for your task. Kombai asks clarifying questions to understand the input better. Based on your responses, Kombai generates an editable plan with sections like Design Plan, Technical Implementation, and To-dos.

Follow the steps below to generate a plan for your task:

1. Click the mode dropdown in Kombai’s input box and select Plan.
2. If this is the first time you are using Kombai in this repository, Kombai will display the currently selected tech stack with three options: Scan Workspace, Configure, and Proceed.
3. Click Scan Workspace to let Kombai identify the tech stack used in your project. Alternatively, you can change the tech stack by clicking Configure. Once you’ve configured the tech stack, click Proceed. To continue with the currently selected tech stack, simply click Proceed.
4. Kombai will now ask you clarifying questions to understand the input better. Answer the asked questions and press enter.
5. Click the Approve Plan button to approve the plan and start the code generation.

You can also update the plan instead of directly approving it. There are two ways to update the plan- by editing the plan file or by using follow-up instructions.

By editing plan file

1. Click the icon in the top-right corner of the plan.md file.
2. Click the Edit button to open the plan.md file in markdown.
3. Make the required changes and save the file.
4. Click the Update Plan button for Kombai to regenerate the plan with your changes.
5. Once the plan is updated, click Approve Plan to approve the plan and start the code generation.

Generate code

Once you approve the plan, Kombai auto-switches to Code mode and starts the code generation process. It reads your repo files to reuse existing components in the generated code.

If the task requires installation of a npm package, Kombai runs the necessary terminal commands to install the package. It also fixes any terminal errors found in the process. Ensure you have turned on Auto run all commands in the quick settings. This allows Kombai to execute all terminal commands automatically without asking you for confirmation each time.

After installing the dependencies, Kombai writes the code files to your repo. The final generated code conforms to the selected tech stack and the approved plan. Kombai also auto-fixes any TypeScript or linting errors found in the process.

Preview and follow-up

Once the code is generated, Kombai automatically starts the dev server. You can preview the generated code by clicking the localhost link in the terminal.

You can also click the Run Project and open the localhost link from the chat to start the Kombai Browser. This feature lets you tag DOM elements in the browser chat window and send them back to Kombai as context. You can also attach console errors and send them to Kombai for a quick fix.

Alternatively, ask Kombai to perform a task in the browser. Kombai will autonomously navigate and interact with the browser to test the functionality of the generated code.

---

Use Kombai to start new projects

Kombai seamlessly creates entire projects from Figma designs. It sets up a new project based on the selected tech stack and generates clean, production-ready code according to the approved plan.

To get started, open an empty folder in your IDE and launch Kombai.

Add Figma designs

Kombai lets you add a single or multiple Figma designs as input. Follow these steps to add Figma designs:

1. Click Kombai’s input box. Type @figma and press enter. Alternatively, click the Figma icon in the input box.
2. In the Enter the link to your Figma frame modal, add the Figma URL and click Confirm.

If your Figma account isn’t connected to Kombai, you’ll need to connect it first. Click here to learn how.

3. If you have any instructions or additional Figma designs, add them to the input. When you are ready to continue, press enter.

Review and update plan

Kombai can generate a highly detailed code plan before generating code for your task. Kombai asks clarifying questions to understand the input better. Based on your responses, Kombai generates an editable plan with sections like Design Plan, Technical Implementation, and To-dos.

1. Click the mode dropdown in Kombai’s input box and select Plan.
2. After receiving the input, Kombai displays the currently selected tech stack with three options: Proceed, Configure, and Scan Workspace(disabled for new projects).
3. Click Configure, change your tech stack, and click Proceed. To continue with the currently selected tech stack, simply click Proceed.
4. Kombai will now ask you clarifying questions to understand the input better. Answer the asked questions and press enter.
5. Click the Approve Plan button to approve the plan and start the code generation.

You can also update the plan instead of directly approving it. There are two ways to update the plan- by editing the plan file or by using follow-up instructions.

By editing plan file

1. Click the icon in the top-right corner of the plan.md file.
2. Click the Edit button to open the plan.md file in markdown.
3. Make the required changes and save the file.
4. Click the Update Plan button for Kombai to regenerate the plan with your changes.
5. Once the plan is updated, click Approve Plan to approve the plan and start the code generation.

Generate code

Once you approve the plan, Kombai auto-switches to Code mode and starts the code generation process.

Kombai runs the necessary terminal commands to set up the project based on the selected tech stack. Ensure you have turned on Auto run all commands in the quick settings. This allows Kombai to execute all terminal commands automatically without asking you for confirmation each time.

After setting up the project, Kombai writes the code files to your project folder. The final generated code conforms to the selected tech stack and the approved plan. Kombai also auto-fixes any TypeScript or linting errors found in the process.

Preview and follow-up

Once the code is generated, Kombai automatically starts the dev server. You can preview the generated code by clicking the localhost link in the terminal.

You can also click the Run Project and open the localhost link from the chat to start the Kombai Browser. This feature lets you tag DOM elements in the browser chat window and send them back to Kombai as context. You can also attach console errors and send them to Kombai for a quick fix.

Alternatively, ask Kombai to perform a task in the browser. Kombai will autonomously navigate and interact with the browser to test the functionality of the generated code.