> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma to code

> Learn how to convert your Figma designs into high-fidelity frontend code using Kombai.

export const Send = props => {
  return <div style={{
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    width: "20px",
    height: "20px",
    borderRadius: "5px",
    backgroundColor: "#48de94"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="black" strokeWidth="2" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
    </div>;
};

export const FigmaMakeCopyDesign = ({width = 24, height = 24, ...props}) => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={width} height={height} fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M4.5 16a.5.5 0 0 1 .5.5V18a1 1 0 0 0 1 1h1.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2v-1.5a.5.5 0 0 1 .5-.5m8.593-1.184c-.425-1.081.643-2.147 1.723-1.723l4.342 1.705h.001c1.17.46 1.105 2.137-.095 2.508l-1.343.414-.413 1.343h-.001c-.36 1.165-1.944 1.26-2.461.202l-.047-.107-1.706-4.34zm1.358-.793a.33.33 0 0 0-.428.428l1.707 4.341a.33.33 0 0 0 .622-.023l.569-1.85 1.849-.568a.33.33 0 0 0 .023-.622zm1.651-7.018A1 1 0 0 1 17 8v2l-.005.102a1 1 0 0 1-.893.893L16 11h-5v5l-.005.102A1 1 0 0 1 10 17H8a1 1 0 0 1-.995-.898L7 16V8a1 1 0 0 1 1-1h8zM8 16h2v-1h-.5a.5.5 0 0 1 0-1h.5v-1h-.5a.5.5 0 0 1 0-1h.5v-1H8zm0-6h2V8H8zm3 0h1v-.5a.5.5 0 0 1 1 0v.5h1v-.5a.5.5 0 0 1 1 0v.5h1V8h-5zM7.5 4a.5.5 0 0 1 0 1H6a1 1 0 0 0-1 1v1.5a.5.5 0 0 1-1 0V6a2 2 0 0 1 2-2zM18 4a2 2 0 0 1 2 2v1.5a.5.5 0 0 1-1 0V6a1 1 0 0 0-1-1h-1.5a.5.5 0 0 1 0-1z"></path>
      </svg>
    </div>;
};

Kombai features a specialized Figma interpretation engine that gives the Agent a native understanding of your designs. It is significantly more advanced than Figma to code tools and Figma MCPs, capable of handling complex design structures with ease.

Kombai can handle common Figma issues like messy grouping and invisible layers without requiring you to clean up the file or use Auto-layout. It generates high-quality, production-ready code that handles the UI heavy lifting, giving you a solid foundation to iterate on.

## Get started

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. In the chat input, type @figma, and press <kbd>Enter</kbd>.
3. Paste your Figma design URL in the newly opened modal and click **Confirm**.

   <Note>
     The Kombai extension works best with individual Figma frame URLs. So, project-level or page-level URLs without a `node-id` are treated as invalid, as the extension requires a specific frame reference to accurately capture the design context.
   </Note>

4) If you have any instructions or additional Figma designs, add them to the input.
5) Press <kbd>Enter</kbd> or click the <Send /> button to send the message.

## Connect Figma

To generate code for your Figma designs, you need to connect your Figma account with Kombai. This lets Kombai access your Figma design and generate code.

To connect your Figma to Kombai:

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. Type `@figma` in the chat input and press <kbd>Enter</kbd>.
3. Click **Connect Figma**.
4. Click **Open** in the newly opened modal.
5. Click **Allow access**, then **Open** in the alert.
6. Go back to the IDE and click **Open** in the modal.

## Reconnect Figma

If you have connected the wrong Figma account to Kombai, or the authentication has expired, you can reconnect your Figma by following the steps below:

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. Type `@figma` in the chat input and press <kbd>Enter</kbd>.
3. Click **Reconnect Figma**.
4. Click **Open** in the newly opened modal.

<Note>
  Click **Switch accounts** if you want to switch the current Figma account.
</Note>

4. Click **Allow access**, then **Open** in the alert.
5. Go back to the IDE and click **Open** in the modal.

If you are unable to reconnect, reach out to [support@kombai.com](mailto:support@kombai.com).

## FAQs

<AccordionGroup>
  <Accordion title="I am unable to attach Figma designs to Kombai due to API rate limits">
    Effective November 17, 2025, Figma has implemented new [API rate limits](https://developers.figma.com/docs/rest-api/rate-limits/) for all users. Because the endpoints Kombai uses to fetch designs are classified as Tier 1 by Figma, you may encounter limitations while generating code for your Figma designs.

    Here's what you can do to troubleshoot the issue:

    #### Export Figma design as image and attach to Kombai

    If you are unable to attach the Figma design to Kombai, you can export it as image and attach to Kombai.

    1. Open your Figma design and select the frame you want to export as image.
    2. Click **Export** at the bottom of the right-sidebar.
    3. Select a higher resolution and **PNG** as the format.

    <Note>
      Kombai will be able to better interpret your image in higher resolution.
    </Note>

    4. Click **Export** button.
    5. Attach the exported image to the Kombai chat.

    #### Upgrade your Figma account

    Upgrade to a higher Figma plan. This will increase your API limit and you will be able to attach more Figma designs to Kombai. Visit the [Figma pricing page](https://www.figma.com/pricing) for more details.

    <Note>
      Ensure that the Figma account connected to Kombai has a **Dev** or **Full**
      seat for higher API limits.
    </Note>

    #### Connect a different Figma account

    If you have mistakenly connected Kombai with the wrong Figma account, you can connect a different Figma account by following the steps below:

    1. Click `@figma` in the chat box.
    2. Click **Reconnect Figma**.
    3. Select **Switch accounts** in the Figma OAuth page.
    4. Click **Allow access**, then **Open** in the alert.
    5. Go back to the IDE and click **Open** in the modal.
  </Accordion>

  <Accordion title="How do I generate code from Kombai using Figma Make URL">
    Kombai does not support code generation from Figma Make URLs. To use Kombai with Figma Make, you must first transfer your work to a Figma Design file.

    1. Open your Figma Make project and click the <FigmaMakeCopyDesign width={30} height={30} /> button in the top menu bar. This saves the design to your clipboard.
    2. Open a new Figma design file and paste the design from your clipboard.
    3. Right-click on the newly pasted design.
    4. Hover over **Copy/Paste as** and select **Copy link to selection**.
    5. Open Kombai in your IDE and type `@figma` in the chat input and press <kbd>Enter</kbd>.
    6. Paste the Figma design URL into the input box and press <kbd>Enter</kbd>.
  </Accordion>

  <Accordion title="How do I generate code from Kombai using Figma Sites URL">
    Kombai doesn't support code generation from Figma Sites URLs. To use Kombai with Figma Make, you must first transfer your work to a Figma Design file.

    1. In your Figma Sites project, select the section containing the generated site.
    2. Right-click the selection and click **Copy**.
    3. Open a new Figma design file and paste the design from your clipboard.
    4. Select the Figma design from the section you pasted.
    5. Right-click the pasted content, hover over **Copy/Paste as**, and select **Copy link to selection**.
    6. Open Kombai in your IDE and type `@figma` in the chat input and press <kbd>Enter</kbd>.
    7. Paste the Figma design URL into the input box and press <kbd>Enter</kbd>.
  </Accordion>
</AccordionGroup>