This project is meant to get you started with Framer.js as quickly as possible.
You can use this project to create a local development environment similar to Framer (previously Framer Studio).
A benefit of using this versus Framer is that you are able to stay within your preferred operating system, editor, and WebKit-compatible browser environment.
The project may work on earlier/later versions of the above, but it has not been officially tested.
- Clone the repository
cdinto the created directory- Run
npm install
After the install has completed, run gulp to launch a local server at http://localhost:3000 and add your Framer.js code to app.coffee.
Any changes you make to app.coffee will automatically refresh the page automatically.
gulp- Runs a local web server at http://localhost:3000 and refreshes the page when changes are madegulp compile- Compilesapp.coffeeand required modulesgulp server- Runs a local web server http://localhost:3000
Open index.html in any WebKit-compatible browser to view your prototype (no local web server needed). Note that default device type renderings may not appear if you do not have an internet connection.
Your Framer prototype can also be viewed on other devices on your local network by pointing your device's WebKit-compatible browser to your local IP at port 3000 (e.g. http://192.168.0.100:3000). Note that the local web server must be running (gulp server) for this to work. Any device type rendering will be hidden appropriately.
Existing Framer projects can be easily imported into this project by copying the following files/folders from your project.framer folder into the project's root directory:
app.coffeemodules/(optional if you do not have any modules)images/(optional if you do not have any locally referenced images)imported/(optional if you do not have any imported Sketch/Photoshop assets)
Alternatively, you can copy the same folders to your project.framer folder from your framer-bootstrap project to export back into Framer.
CoffeeScript is the preferred language for Framer.js. The docs are all written with respect to CoffeeScript.
While most editors don't come with syntax highlighting or autocompletion for CoffeeScript (and Framer.js syntax), there are many packages readily availble that accomplish these features.