What is Framer Classic?

Framer’s creator, Koen Bok, was working as a designer at Facebook and noticed that colleagues who used prototypes were more successful at presenting their work. He built something in JavaScript to make prototyping quicker and easier, and also included a tool to import designs from Photoshop. It was all open source and freely downloadable on GitHub—and it still is today.

Six months later, many designers—not only at Facebook—were already using it.

And then the idea sprouted to make the Framer desktop application: a way of using Framer.js without having to switch between editor, web browser, and Framer Generator (the tool that imports your design). Framer for Mac also uses CoffeeScript, a friendlier version of JavaScript.

So Framer’s magic is the good old front-end web package at work: HTML, CSS, and JavaScript. A Framer Classic project is actually just a static website.

You can see this when you take a look inside a .framer folder:

What you’ll find inside, from top to bottom:

• app.coffee contains the CoffeeScript you’ve written in Framer’s editor
• framer: a full copy of the Framer.js library
• images: the image files you’ve dragged into Framer (those dragged into Design will be in their own design folder)
• imported: designs you imported from Sketch, Figma, or Photoshop
• index.html: the webpage with the prototype, as shown in Framer’s preview window
• modules: the place for adding these optional extensions to your project