Generate code from Figma

This guide covers how to use Kombai to generate code from Figma designs. It includes all steps, from adding input to preview and follow-up in both 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 in code mode.

​

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.

3. If you have any instructions or additional Figma files, add them to the input. When you are ready to continue, press enter.
4. After receiving the input, Kombai displays the currently selected tech stack with three options: Scan Workspace, Configure, and Proceed.
5. 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.

​

Review and update plan

Once you proceed, Kombai starts processing the input. It also reads files in your repo 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.

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 Approve Plan & Start Coding to confirm the plan and begin code generation.

​

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 Approve Plan & Start Coding to confirm the plan and begin code generation.

​

Generate code

Once you approve the plan, Kombai starts the code generation process. It reads your repo files to reuse existing components wherever required. 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 code 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. Alternatively, you can click the Start Preview -> Kombai Browser button to start the preview. 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. If the changes you want don’t require you to tag DOM elements or console errors, you can simply chat with Kombai to make the changes.

---

​

Use Kombai to start new projects

Kombai seamlessly creates entire projects from Figma files. It sets up a new project based on the selected tech stack and generates the code according to the plan.

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

​

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.

3. Add any other instructions or Figma files to the input and press enter.
4. After receiving the input, Kombai displays the currently selected tech stack with three options: Proceed, Configure, and Scan Workspace(disabled for new projects).
5. 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.

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 Approve Plan & Start Coding to confirm the plan and begin code generation.

​

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 Approve Plan & Start Coding to confirm the plan and begin code generation.

​

Generate code

Once you approve the plan, the code generation process starts. 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 code 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. Alternatively, you can click the Start Preview -> Kombai Browser button to start the preview. This feature lets you tag DOM elements in the browser chat window and send them back to Kombai as context. You can attach console errors and send them to Kombai for a quick fix. If the changes you want don’t require you to tag DOM elements or console errors, you can simply chat with Kombai to make the changes.