This guide covers how to use Kombai to generate code from Figma designs. It covers all steps, from adding input to saving the generated code in both existing and new workspaces.

​
In Existing Workspaces

Kombai works seamlessly with existing workspaces. It understands your tech stack and reuses existing components and theme variables to generate code that fits your workspace.
To get started, launch Kombai in code mode within your existing workspace.

​
Add Figma files

Kombai lets you add a single or multiple Figma files as input. Follow these steps to add Figma files:
  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.
  1. Add any other instructions or Figma files to the input and press enter.
  2. After receiving the input, Kombai displays 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 workspace. 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.

​
Review and update plan

Once you proceed, Kombai starts processing the input. It also reads files in your workspace to better understand the context. Based on this analysis, Kombai generates a detailed code plan. The plan consists of the following structure:
  1. Sections: A list of all sections present in the design or asked in the input.
  2. Features: A list of all features present in the design or asked in the input.
  3. Editable Plan Files: A list of plan files you can review and edit, including schema.ts, endpoints.ts, rootProps.ts, theme.ts, and enums.ts.
  4. Style Guide: A style guide that includes colors, typography, and animations.
For static websites and landing pages, Kombai generates a Style Guide. For web apps, Kombai generates Editable Plan Files.
After the plan is generated, you can review and update it as needed. You can update the plan in two ways: by editing plan files directly or by using follow-up instructions.

​
By editing files

Follow these steps to update the plan by editing its files:
  1. Click the icon in the top-right corner of a plan block or file. This opens the block or file in a new tab.
  2. Make the required changes and save the file.
  3. Click the Update Plan button for Kombai to regenerate the plan with your changes.
  4. Once the plan is updated, click the Approve Plan & Start Coding button to accept the plan and begin the code generation process.

​
Using follow-up instructions

Alternatively, you can provide follow-up instructions to ask Kombai to modify the plan:
  1. In the input box, type the changes you want to make to the plan (e.g., “Implement dark mode when the toggle is clicked”) and press enter.
  2. Once the plan is updated, click the Approve Plan & Start Coding button to accept it and begin the code generation process.

​
Generate code

Once you approve the plan, Kombai starts the code generation process. Kombai reads your workspace files to reuse existing components whenever possible. The final generated code conforms to the selected tech stack and the approved code plan.

​
Run code in sandbox

After code generation, you can preview the output in a sandbox:
  1. Click Run in Sandbox to start the sandbox. Kombai will automatically fix any TypeScript or linting errors found in the process.
  2. Click the provided localhost link to open the code preview on the local server.

​
Follow up for improvements (optional)

After the initial code generation, you can chat with Kombai to add new features, improve visual fidelity, or modify specific sections. You can also generate code for new sections, pages, and states based on new Figma designs. To provide follow-up instructions:
  1. Type the improvements you want to make in the Kombai input box.
  2. To add another Figma file, repeat steps 1-3 from the Add Figma files section above.
  3. Press enter to send the input to Kombai.

​
Save to workspace

Once you’re satisfied with the generated code, you can save it to your workspace:
  1. Click View & Save in the working set panel.
  2. Select the Source Files you want to save to the workspace.
  3. If your workspace already contains Build & Config Files, e.g. package.json or index.html, you don’t need to save the same from Kombai.
Build & Config Files are unselected by default when you run Kombai in an existing workspace.
  1. However, if the package.json in Kombai’s working set looks modified (denoted by M next to the file name), review it to see if Kombai has added any new dependencies during the code generation process. If it has, consider saving the package.json file, as well.
  2. Click Save to save the selected files to the workspace.

​
In New Workspaces

Kombai seamlessly generates code from Figma files for new workspaces. New workspaces are IDE windows that either contains an empty workspace (i.e., no files) or has no workspace open at all. Follow these steps to use Kombai in a new workspace:
To get started, launch Kombai in code mode within your new workspace.

​
Add Figma files

Kombai lets you add a single or multiple Figma files as input. Follow these steps to add Figma files:
  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.
  1. Add any other instructions or Figma files to the input and press enter.
  2. After receiving the input, Kombai displays the currently selected tech stack with three options: Proceed, Configure, and Scan Workspace(disabled for new workspaces).
  3. 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.

​
Review and update plan

Once you proceed, Kombai starts processing the input and generates a detailed code plan. The plan consists of the following structure:
  1. Sections: A list of all sections present in the design or asked in the input.
  2. Features: A list of all features present in the design or asked in the input.
  3. Editable Plan Files: A list of plan files you can review and edit, including schema.ts, endpoints.ts, rootProps.ts, theme.ts, and enums.ts.
  4. Style Guide: A style guide that includes colors, typography, and animations.
For static websites and landing pages, Kombai generates a Style Guide. For web apps, Kombai generates Editable Plan Files.
After the plan is generated, you can review and update it as needed. You can update the plan in two ways: by editing plan files directly or by using follow-up instructions.

​
By editing files

Follow these steps to update the plan by editing its files:
  1. Click the icon in the top-right corner of a plan block or file. This opens the block or file in a new tab.
  2. Make the required changes and save the file.
  3. Click the Update Plan button for Kombai to regenerate the plan with your changes.
  4. Once the plan is updated, click the Approve Plan & Start Coding button to accept the plan and begin the code generation process.

​
Using follow-up instructions

Alternatively, you can provide follow-up instructions to ask Kombai to modify the plan:
  1. In the input box, type the changes you want to make to the plan (e.g., “Implement dark mode when the toggle is clicked”) and press enter.
  2. Once the plan is updated, click the Approve Plan & Start Coding button to accept it and begin the code generation process.

​
Generate code

Once you approve the plan, Kombai starts the code generation process. The final generated code conforms to the selected tech stack and the approved code plan.

​
Run code in sandbox

After code generation, you can preview the output in a sandbox:
  1. Click Run in Sandbox to start the sandbox. Kombai will automatically fix any TypeScript or linting errors found in the process.
  2. Click the provided localhost link to open the code preview on the local server.

​
Follow up for improvements (optional)

After the initial code generation, you can chat with Kombai to add new features, improve visual fidelity, or modify specific sections. You can also generate code for new sections, pages, and states based on new Figma designs. To provide follow-up instructions:
  1. Type the improvements you want to make in the Kombai input box.
  2. To add another Figma file, repeat steps 1-3 from the Add Figma files section above.
  3. Press enter to send the input to Kombai.

​
Save to workspace

Once you’re satisfied with the generated code, save it to your workspace:
  1. Click View & Save in the working set panel.
  2. Select all the Source Files.
  3. Select all the Build & Config Files.
    • If you’re in an empty workspace (i.e., no files), ensure Current workspace is selected in the Save in dropdown at the bottom pane. Click Save to save the files to the workspace.
    • If no workspace is open, ensure New workspace is selected in the Save in dropdown at the bottom pane. Click Save.
  4. Browse to the specific location where you want to save the files and click Save.
  5. Click Open in new window to open the newly saved workspace in a new IDE window, or click Open folder to open it in the current window.