Ctrlk
Get StartedBlogsCommunity

Figma integration

Turn any Figma design into a working fullstack application. Paste a link, click Import, and Build clones your design into production-ready code.

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.

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 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.

  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:

  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.

PreviousDesign modeNextDeployment

Last updated