Framer on Windows with framer-cli
- Download Node.js and install
- From Start, open the Node.js command prompt and enter
npm install -g framer-cli
cd C:\Users\yourname\Desktop\, or to some other folder
framer new MyProto.framer
framer preview MyProto.framer
If you now take your browser to
http://localhost:3000/, you’ll see your work! To make changes:
- Navigate to
index.coffeeand make changes
If you make edits while
- Emulate Framer Studio’s Mirror feature by typing
ipconfigin the command prompt. You should see an
IPV4 Addressline with a set of four digits separated by periods. For example:
192.168.0.214. This is your IP address. If you have a device or phone on the same local network, type that number, plus :3000 into your browser. For example
192.168.0.214:3000. Now you can test your work on a phone or tablet. We’re working to make this easier.
- You can change the mouse cursor to a touch point by integrating this outstanding pull request.
- If you’re including code from a Framer Studio project and it doesn’t immediately work, you may want to integrate this pull request.
- If the preview isn’t showing anymore, check the command window where you ran
framer preview. Compilation errors are displayed here.
The two major features that I miss most from Framer Studio are PSD and Sketch import as well as the editor’s intelligent autocomplete. You can play around with plugins for editors like Sublime Text to get better autocompletion (framer-cli is working on support for Tern), but it still won’t be great. And of course designs can be manually imported, but that’s fairly painful.