Can I run downloaded projects from Figma Make locally?

Hi ​@Jason Melgoza,

I understand you're looking to download code that includes package.json from Figma Make.

It seems this is currently a feature request, and our team is already aware of this kind of feedback.

While we wait for input from our Community experts on this, we encourage you to submit a request on our forum: Share Your Thoughts. Our Product Managers regularly review community suggestions there, so you can directly share your thoughts with them.

Thanks,

I’m also having REAL irritation on this front. tldr is I also had a React site generated, and  evenn deployed (link on request) - but I cannot for the life of me get it working (even with massive changes to significant amounts of the code) 100% because I have none of the config files (eg. package.json, or tailwind.config.js, tsconfig.json, or vite.config.ts), source only. I really need to solve this because actuallly, the tool did an AMAZING job (initially) and saved me a LOT of time…. or would have if i could make it work!

Amazing tool - in fact the first run it worked beautifully, for quite a large site and I was able to publish, and thankfully to save the code. I did notice that it was indeed just the source with absolutely no config files… but at least I have the files.

I then went back to Make and my second prompt (as is often the way with these sorts of AI coding tools) basically hosed the project. It wouldn’t build (the error: @https://www.figma.com/webpack-artifacts/assets/figma_app-8c16fd76d51e2b1b.min.js.br:333:1968590) and wasn’t seemingly fixable, and of course there’s no way to roll back changes. So in spite of how brilliant the results were, the project is now irrevocably broken, there’s a “Save local copy” feature, but no corresponding “Open local copy” feature (which is all it would take) - it’s such a shame because you have a very cool toy here.

Anyway, disappointed, but still overall absolutely thrilled with what had been created (this had just saved me days of the sort of work I’m REALLY not good at) I went to try and get the original, working code I’d downloaded running… and it’s 24 hours later and even after so many changes to the code that I KNOW my config is the problem (whether its versions, or other stuff in package.json, or tailwind.config.js, tsconfig.json, or vite.config.ts, or I don’t know what else :/) and the best I’ve managed is to get everything working except the CSS…

Sorry about this rant,  but it’s a very cool and useful thing you’ve provided here but please, if you could just provide the files that you must have seeing as in my case at least, it’s deployed (I can’t share the link here im afraid because the product is still being developed and isn’t public). I’ve already tried contacting support, and you can message me here or e-mail me on my registered e-mail and I can give you all the details, then it would be BEYOND helpful, and I’m in a slightly embarrassing situation where I said I had something to demonstrate to my client (I assumed...) and now I’m in a situation where I can’t do that!

Update: Amazing timing from suopport. I just got a response, I had prepared a pretty scathing little speech (they closed my 2 page, proper, bug report+support) ticket with a stock response that said check the forums) but they at least it seems it’s still got somebody investigating.

Sharon here from Figma Support, thanks for reaching out.

Could you please add support-share@figma.com as an editor on this file, and grant a full seat to this account on your team so we can take a closer look? This will not add any additional charge to your bill.

Regarding package.json not exporting - this is great feedback and I have passed this onto our product team for review going forward. We are always eager to improve our product based on the feedback received! Unfortunately at this time it is not possible to download this, but I recommend keeping an eye on our release notes for any product updates: https://www.figma.com/release-notes/

Regarding the old version - is the version you are trying to restore named 'version 2'? Or is it a different version?: 
What happens when you click 'restore this version'?

Now, Sharon points out something that I noticed when giving them access - outside of the make editor, if you right click on the file created by it, you CAN see revisions!

None of this addresses the main point of how the hell do we get this stuff running, I’ve been fiddling with it now for bloody ages (but I’m effectively 100% new to node and react) and have just about managed to get it working (but some bits are inexplicably broken). Somebody who knows a bit about this stuff (or somebody @ Figma) could I’m sure solve this in about 10 mins.

Here are the configs that currently have the code I downloaded *basically* working. It did however take a lot of code changes (in components/ especially) and obviously you’re going to need some basic understanding of how it all fits together. Anyway these are better than nothing….
 

Sharon here from Figma Support, thanks for reaching out.

Could you please add support-share@figma.com as an editor on this file, and grant a full seat to this account on your team so we can take a closer look? This will not add any additional charge to your bill.

Regarding package.json not exporting - this is great feedback and I have passed this onto our product team for review going forward. We are always eager to improve our product based on the feedback received! Unfortunately at this time it is not possible to download this, but I recommend keeping an eye on our release notes for any product updates: https://www.figma.com/release-notes/

Regarding the old version - is the version you are trying to restore named 'version 2'? Or is it a different version?: 
What happens when you click 'restore this version'?

how to use this config file? im not understand coding btw but helped by figma make

I’m sorry :( this was some time ago, and this is not something that you’re going to want to even attempt without a pretty solid coding background - OR a background in these particular technologies.

I’d be amazed if the product was the same as when I used  it, if it’s still there then some solution has been found (or more people would be requesting the same info) so if I was you I’d look around for buttons that might be relevant.

I had the same challenge and big thanks to Step’s config.zip as the foundation I was able to get my Figma Make project to run locally after persistent tinkering. 

tldr: steps based on my learnings:

0. create your project via Figma Make
1. Use vite to create your local react project folder on your computer
2. Download your Figma Make project code and paste into your local react project folder( my config assumes you put the code in src/, but you can change this)
3. unzip and copy the contents of my Figma Make Local Config.zip(built upon Step’s config.zip) into the local react project, replace any existing duplicates
4. run npm i, npm run dev...etc and it should work

My understanding is that figma make runs their preview in a browser based node runtime with specific configs that aren’t all applicable to local dev so they just hid it from us(which we wish they didn’t). The difference includes how library imports are handled, how tailwind is loaded and some css they don’t include in the code download, and all the other stuff in Step’s config.zip. It’s one giant headache we need to reverse engineer to even begin to think about solutions. My config zip includes a vite plugin that should enable us to take the tsx files and not have to edit them by dynamically removing the @{number}.{number}.{number}. from every library import. 

I haven’t tried this out yet, but I wanted to thank you anyways for taking the time to share this info! Will try to give it a shot soon.

Quick follow-up. Found this post on LinkedIn from Rob Boyett that looks to have some helpful information and tips as well. The part about asking it to prepare itself for local dev I found really interesting.

Quoting from his post here:

👷 Setup process
1. Prepare for download: Ask your Figma Make project to prepare itself for local development. This prompts it to include necessary configuration files that might otherwise be missing.
2. Generate setup documentation: Request a comprehensive setup guide and README file with all required installation steps.
3. Download and follow the guide: Extract all code to a local folder and follow the setup instructions. This is typically where issues emerge.

🚨 Common fixes for local deployment
Based on a recent dashboard project, here are the most frequent issues and their solutions I encountered:

🧑‍🔧 PostCSS Configuration Fix
- Fixed postcss.config.js by changing the incorrect plugin name from '@tailwindcss/postcss' to 'tailwindcss'
- Installed the correct dependencies: tailwindcss, postcss, and autoprefixer

🧑‍🔧 Radix UI Import Fixes
- Removed version numbers from Radix UI imports (e.g., changed @radix-ui/react-switch@1.1.3 to @radix-ui/react-switch). Needed to do this across multiple components in the UI directory

🧑‍🔧 Other Package Import Fixes
Removed version numbers from various package imports across all UI components e.g. class-variance-authority (from @0.7.1), lucide-react (from @0.487.0)...

🧑‍🔧 Verification Steps
- Confirmed that Tailwind directives were correctly set up in globals.css
- Verified no non-standard CSS directives were present
- Checked that package versions in package.json were properly specified

checkout https://github.com/likang/figma-make-local-runner just download code from Figma Make and copy all the files and folders into the src directory, run `npm install && npm run dev`

This seems like a great solution, worked out of the box for me. Thanks!

Hi frustrated fam, i made a quick vsix extension based on the above repo and a few tweaks. Install in your fave IDE and CMD+SHIFT+P Figma Make add…. and select the zip file. Happy coding :) https://github.com/spetro511/figma-make-scaffolder

Beside truncating all versions from the imports by using https://github.com/likang/figma-make-local-runner  , make sure that you have tailwindcss enabled in your styles. E.g add @import "tailwindcss"; to the top of your globals.css

Good tip!

​@buildr, maybe your extension could add this if it doesn’t already?

I was about to leave to lovable even though I’ve invested some time in improving my website. Because neither asking Figma make for the config files not the figma-make-local-runner worked. In the end it was just about using node 22 (instead of node 18 or 20) together with figma-make-local-runner.

This combination worked for me perfectly. Thanks to all who contributed for getting this to work. (My node was already at 22).