# Figma integration

### Overview

Build reads your Figma design files and generates a fullstack application that matches the design components, layouts, styles, and assets included. There is no manual redrawing or component mapping. You give Build access to your Figma account once, paste the file link, and it handles the rest.

The workflow is three steps:

1. **Connect -** link your Figma account to Build using a Personal Access Token.
2. **Import -** paste your Figma file URL and click Import.
3. **Build -** click Start Building and get a working fullstack application.

<figure><img src="/files/Uh5h7mTuAspojV3SyWbx" alt=""><figcaption></figcaption></figure>

***

### Connecting your Figma account

Build authenticates with Figma via a Personal Access Token (PAT). You generate the token inside Figma and add it to Build once. After that, you can import any Figma file your account has access to.

#### Step 1 Generate a Figma PAT

1. Open [figma.com](https://figma.com) and click your **profile avatar** in the top-left corner.
2. Go to **Settings → Security → Personal access tokens**.
3. Click **Generate new token**.
4. Give the token a name for example, `CodeMate Build`  so you can identify it later.
5. Click **Generate** and **copy the token immediately**. Figma will not show it again after you close the dialog.

> **Keep your PAT secure.** Treat it like a password. Do not share it, commit it to a repository, or store it in plaintext. You can revoke it at any time from **Figma Settings → Personal access tokens**.

#### Step 2 Connect the token in Build

1. Open **Build** from within CodeMate Toolbox or [Click here](https://build.codemateai.dev/build).
2. Click on Figma Project toggle.
3. Paste your PAT into the token field and click **Connect**.
4. Build verifies the token with Figma and shows a confirmation once the connection is active.

***

### Importing a design

Once your Figma account is connected, importing a design takes under a minute.

1. Open the Figma file you want to import in your browser.
2. Copy the URL from the address bar. It will look like this:

   ```
   https://www.figma.com/file/XXXXXXXXXXXXXX/Your-Project-Name
   ```
3. In Build, paste the URL into the **Figma URL** field.
4. Click **Import**. Build fetches the file for you.
5. Now you can sit back and Build will turn your figma design into a working fullstack website.

The generated project is ready to preview, edit, and deploy directly inside Build.

***

### Getting the best results in Figma

The quality of generated code depends on how the Figma file is structured. A few practices make a meaningful difference:

**Use Auto Layout throughout.** Frames without Auto Layout produce less predictable CSS. Build works best when spatial relationships are defined with Auto Layout rather than manual positioning.

**Name your layers clearly.** `Sidebar`, `NavItem`, `CardHeader`  layer names become React component names in the generated code. Generic names like `Frame 42` or `Group 7` produce generic, harder-to-maintain output.

**Use Figma Styles for colors and typography.** Define your colors and text styles as Figma Styles rather than per-layer overrides. Build converts them into reusable design tokens or Tailwind config values.

**Design at 1440px for desktop.** If you need responsive output, include a separate mobile frame at 390px alongside your desktop frame. Build will generate responsive CSS rules when both frames are present.

**Avoid deeply nested groups.** Deeply nested groups where Auto Layout would work better generate fragile absolute positioning. Flatten your structure where possible.

***

> **Need help?** Reach out to the CodeMate team via the in-app contact option inside Toolbox, or visit [app.codemate.ai](https://app.codemate.ai).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codemate.ai/build/figma-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.