How to Export Code from Figma Make

A React project written in TypeScript. The main file is App.tsx, alongside any other files Make created. Make's preview runs in the browser with its own setup, and not all of that setup comes with the download. That's why a downloaded project often doesn't start on the first try.

Yes, with some setup. "Can I run downloaded projects from Figma Make locally?" has about 8.6k views on the Figma forum, and Figma staff there call a ready-to-run export a feature request. The problems people hit:

• No package.json. npm doesn't know what to install. Create a new project with Vite's React TypeScript template and copy Make's files into src.
• Versioned imports. Make writes imports like @radix-ui/react-slot@1.1.2. Local bundlers expect @radix-ui/react-slot. Search the project for @ followed by a version number in import paths and remove the version.
• Missing Tailwind or PostCSS config. If the page renders unstyled, add Tailwind to the project and check the Tailwind directives are in the global CSS file.
• Missing packages. Each "Failed to resolve import" error names a package. Install it with npm install and run again.

A shortcut some forum users take: before downloading, prompt Make to add a package.json, the config files and a README with install steps. Check the result, since Make can't test the local setup for you.

Unzip the download (or clone the GitHub repository), then open the folder with File > Open Folder in VS Code or Cursor. Run npm install and npm run dev in the built-in terminal. From there you can keep editing with the editor's AI, and if you connect the Figma MCP server, your agent can fetch files straight from a Make link and read linked Figma frames too.

1. Open the Make file and click Make settings in the upper-right corner, then GitHub.
2. Click Connect GitHub, sign in and authorise the Figma app for your account or organization.
3. For the first push, click Create Repository, name it and confirm.
4. For later pushes, open GitHub again and use Push to....

Know the limits before you rely on it. The push is one-way: edits made in GitHub don't come back to Make and are overwritten on the next push. Make creates the repository itself, so you can't push into an existing repo. It pushes to the default branch only, and GitHub Enterprise Server isn't supported.

Figma also has Make in your local codebase, which connects Make to your team's repository so you edit the running app and open pull requests from Figma. As of September 2026 it's a closed beta, Mac only, in the Figma Beta desktop app, with a waitlist at figma.com/join-waitlist-make. An engineer has to add setup scripts in a .figma/make folder first.

Get the preview to the screen you want, then click Copy design at the top of Make. Wait for it to finish converting, then paste into a Figma Design file. You get editable layers of that one state.

• The layers aren't linked to the Make file. Editing them doesn't change the app.
• They aren't interactive. Rebuild the flow with prototype connections if you need one.
• Figma tries to bind colours, spacing and type to variables you already have, matching on code syntax, then name, then scope.

For a published Make site, or any web page, the html.to.design plugin is another way to import it as layers. Compare it with the other options here:

New to Make? Start with how to use Figma Make. If the download button is missing or the preview breaks, see Figma Make not working.