Make in your local codebase

You can use Figma Make to ship the UI changes you want directly into your team's real codebase. Connect a GitHub repository to Figma Make and edit the running app directly. Your app opens inside Make with real data, and you can change the UI by adjusting properties in a panel, annotating elements, or describing changes in chat. The agent updates the code, and when you're ready, you can create a branch and open a pull request without leaving Figma.

Work with Make in your local codebase

Here's a quick overview of how to use the Figma Beta desktop app version of Make in your local codebase:

Get access

To apply for access, join the waitlist at figma.com/join-waitlist-make. Joining the waitlist doesn’t guarantee you’ll get access to the closed beta.

After you sign up at figma.com/join-waitlist-make, you’ll receive a confirmation email at the address tied to your Figma account. If you didn't get one, submit the form again. The original submission may not have gone through.

When your access is ready, you'll receive an email at the address on your Figma account.

The closed beta for using Make in your local codebase is Mac-only. You’ll need to use the Figma Beta desktop app for Mac.

For more information, see our FAQs.

Setup, gotchas, and troubleshooting

When you’re setting up Make for your codebase, because this feature is in closed beta, you may have questions or encounter unexpected issues. We provide a comprehensive set of guidance and answers in Make in your codebase: Setup, gotchas, and troubleshooting.

Set up Make for your codebase

This article covers setup for designers and PMs, and a separate section for the engineer who configures the repository.

Before you start

You need the following to use Make with your codebase during the closed beta:

• The Figma Beta desktop app for Mac
• A Figma account that has been admitted to the closed beta
• A codebase hosted in a Git repository
• Access to the repository through your version control provider

GitHub is natively supported in the Figma Beta desktop app. GitLab and Bitbucket are partially supported through SSH.

Note: Each repository needs a one-time setup by an engineer on your team before designers and PMs can use it in Make. See Configure a repository for Make below.

Once your account has been admitted to the closed beta, you’re ready to get started. Choose one of the following methods:

• Start from a local repository: If you’re already working with code locally, such as with an app you’re building or one of your organization’s repositories, you can start using Make with that repository.
• Start by cloning a repository: You can use Make to clone a repository from GitHub. When you clone a repository, Make pulls down the remote code so you can start working with it locally. This is a good way to get started if your organization has a repository you want to work with.

Start from a local repository

Here’s how to set up Make with one of your local repositories for the first time. After following these steps, you start new sessions for the repository without needing to set it up again.

1. Open the Figma Beta desktop app.
2. Create a Figma Make file. In the file browser, navigate to your drafts. Then, in the upper-right corner, click Make.
3. Under the prompt box, click Open a folder.
4. Click New session.
5. Make will add required configuration files to your repository. When you’re prompted in Make, click Run to add the files. You may be prompted to click Run more than once.

6. If your local repository isn’t using git yet, you can add git-based version control. Above the prompt box, next to Initialize git for version control, click Run.

   Note: If the repository already has the .figma/make configuration files, Make installs dependencies, starts the dev server, and loads the preview automatically. If it does not, the chat will guide you through the next steps.

After completing these steps, the preview of your app loads, displaying the live, local version of the interface. You’re ready to start making changes to your app in Make.

Start by cloning a repository

Here’s how to set up Make with a remote repository. As a part of this setup, Make will clone the remote repository, enabling you to work with it locally.

1. Open the Figma Beta desktop app.
2. Create a Figma Make file. In the file browser, navigate to your drafts. Then, in the upper-right corner, click Make.
3. Under the prompt box, click Clone a repository.
4. In the Repository URL box, enter or paste the URL for the remote repository.
5. For Local folder destination, select a folder for the repository. Make pulls the files from the remote repository into the local folder you select.
6. Click Clone.

7. Make will add required configuration files to your repository. When you’re prompted in Make, click Run to add the files. You may be prompted to click Run more than once.

   Note: If the repository already has the .figma/make configuration files, Make installs dependencies, starts the dev server, and loads the preview automatically. If it does not, the chat will guide you through the next steps.

After completing these steps, the preview of your app loads, displaying the live, local version of the interface. You’re ready to start making changes to your app in Make.

To find your repository URL in GitHub, go to the web version of the repository on GitHub. Then, at the top of the repository page on GitHub, click Code and copy the repository URL under HTTPS.

Troubleshooting: Make can't clone the repository.

This usually means authentication failed. Confirm that you have access to the repository through your version control provider, and that your SSH key or GitHub credentials are set up on your machine. See Install the Figma GitHub app and Authenticate with GitHub.

Install the Figma GitHub app

To use GitHub with Make, a GitHub org admin installs the Figma GitHub app for your organization. This is a one-time setup per organization. Once it's installed, every person on your team can authenticate with GitHub on their own, without admin involvement, terminal access, or SSH keys.

To install the app, your GitHub org admin visits https://github.com/apps/figma/installations/new.

Version control provider support during the closed beta:

• GitHub: Fully supported, including cloning, pushing branches, and creating pull requests.
• GitHub Enterprise Cloud: Supported.
• GitHub Enterprise Server: Not supported.
• GitLab and Bitbucket: Partially supported through SSH. Cloning works via SSH (not HTTPS), and pushing branches works, but pull request creation does not. Users on GitLab or Bitbucket set up their own authentication, such as a local SSH key.

Note: Organizations that require authentication through a corporate-approved browser, hardware key, or other restricted auth flow may not be able to complete the GitHub login flow inside Make. This limitation applies to other agentic coding tools as well.

Authenticate with GitHub

The first time you push a branch or create a pull request, Make prompts you to authenticate with GitHub. Sign in through the prompt to give Make permission to push branches and open pull requests on your behalf.

Note: Pull request creation in Make is only supported for GitHub during the closed beta. GitLab and Bitbucket users can push branches and open pull requests in their provider's interface.

Configure a repository for Make

Each repository needs a one-time setup before it can be used in Make. This step is typically done by an engineer on your team and only needs to happen once per repository.

To ease using the repository, the configuration files should be committed and pushed to the main branch of the repository. This ensures that Make doesn’t need to reapply the configuration files when a branch is switched or the repository is pulled elsewhere. Once the folder is committed to your main branch, every designer and PM on the team can open the repository in Make without further setup.

Automatic setup

The first time a repository is used in Make, the required configuration files will usually be automatically added to the local repository as part of the setup.

Simply commit and push the configuration files to the main branch of the repository.

Manual setup

If preferred, an engineer on your team can manually add the configuration files.

The configuration must be created in a .figma/make folder at the root of the repository.

The folder contains five files:

The setup, install, dev, and verify files are shell scripts. They must return exit code 0 on success and any other value on error. Scripts should be idempotent. For example, the setup script should check whether a dependency is already installed before installing it.

.figma/make/setup

Use this script to install system dependencies such as databases and language toolchains.

#!/bin/bash
set -e

echo "Checking system dependencies..."

NODE_VERSION="$(node --version 2>/dev/null || echo "none")"
if [[ "$NODE_VERSION" == "none" ]]; then
  echo "Installing node"
  brew install node
fi
echo "Node $NODE_VERSION OK"

echo "System dependencies verified."

.figma/make/install

Use this script to install project dependencies.

#!/bin/bash
set -e

echo "Running npm install"
npm install
echo "Dependencies installed"

.figma/make/dev

Use this script to start the development server. Make runs this process in the background and terminates it when the session ends.

#!/bin/bash
set -e

echo "Starting development server"
npm run dev

.figma/make/verify

Use this script to check that the development server is ready to serve requests. The script should wait for the server to come up, then return exit code 0. It should return a non-zero exit code if the server fails to start within a reasonable time.

#!/bin/bash
set -e

HEALTHCHECK_ENDPOINT='http://localhost:3000/health'
MAX_WAIT=120
INTERVAL=2
ELAPSED=0

echo "Waiting for development server to be ready"

while [ $ELAPSED -lt $MAX_WAIT ]; do
  if curl -sf $HEALTHCHECK_ENDPOINT >/dev/null 2>&1; then
    echo "Dev server is up"
    exit 0
  fi
  sleep $INTERVAL
  ELAPSED=$((ELAPSED + INTERVAL))
done

echo "Error: Dev server did not start within ${MAX_WAIT}s"
exit 1

.figma/make/env

Use this file to define environment variables passed to the dev server, and to tell Make which port and URL the server uses. PORT and FIGMA_MAKE_URL are required.

PORT=3000
FIGMA_MAKE_URL=http://localhost:3000

Commit the configuration

Once the five files are in place, commit the .figma/make folder to your main branch. Every branch created from main will inherit the configuration, and designers and PMs on the team can start sessions without further setup.

Troubleshoot setup

If you run into issues while trying to set up Make with one of your local repositories, see Make in your local codebase: Setup, gotchas, and troubleshooting.