Installation
As a developer or designer you’re probably using a Mac, but in any case, to not exclude folks rocking Ubuntu or Windows, here are the different ways of installing Framer Classic.
Framer
The Framer desktop application is the obvious choice when you’re on a Mac. It’s not free (you need a Framer X subscription), but it is so worth it for the code-completion, the inline error checking, the included device frames, Auto-Code, and above all, Design, the included visual design tool.
Try it! There’s a free trial.
- Go to: classic.framer.com/download
- Unzip the downloaded file
- Move it to your Applications folder
Framer Library
No matter what system you’re using—Windows, Linux or Mac—you’ll need a WebKit browser. The obvious choices are Apple’s Safari (OS X) and Google’s Chrome (Windows, OS X, Linux), but others might work as well.
Installing
- Find the repository on GitHub: github.com/koenbok/Framer
- Scroll down to ‘Set up Framer Library’ and click the ‘Download’ link
- Unzip the downloaded file
Using Framer Library
- The files you need are in the ‘Project’ folder
- Open ‘index.html’ in Chrome or Safari to view the prototype
- Open ‘app.js’ in your favorite text editor to edit the prototype
- There’s an ‘images’ folder for your image assets
Framer Generator (Mac only) will create a fresh Framer project containing your imported Sketch, Photoshop, or Figma design.
Using Framer Library with CoffeeScript
You’ll notice that the .js file contains, naturally, JavaScript. To follow the examples in this book, you’ll need something that compiles (rewrites) your CoffeeScript code into JavaScript, so that your browser can run it.
A few different tools that can compile your files in the background every time you save your project. Examples are:
You can also use a text editor that has the compiler as an optional package or plug-in: