Intro to Framer » Installation

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.

  1. Go to: classic.framer.com/download
  2. Unzip the downloaded file
  3. 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

  1. Find the repository on GitHub: github.com/koenbok/Framer
  2. Scroll down to ‘Set up Framer Library’ and click the ‘Download’ link
  3. 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 Library’s files and folders

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:

  • Prepros (Windows, OS X & Linux)—$29 (free trial)
  • Koala (Windows, OS X & Linux)—Free
  • CodeKit (Mac)—$38

You can also use a text editor that has the compiler as an optional package or plug-in:

  • Atom by GitHub (Windows, OS X & Linux)—Free
  • Brackets by Adobe (Windows, OS X & Linux)—Free