How to Run Framer JS on Windows

2 (mostly) hassle free ways to compile and run

Framer running on Windows using VS Code, Microsoft Edge, and Gulp

Since releasing the Fluent Design Toolkit, there’s been a lot of interest in the Windows Framer Toolkit. Framer is a powerful tool that we use every day here at Microsoft, which may lead some to wonder How do you run Framer on Windows?

Framer Studio is only available for Mac. But since Framer’s code is open source, you can compile and run on Windows without much hassle (ok, a little bit). There are two options to do this. Option 1 is based on node.js, uses VS Code, and Gulp. We use this method a lot, especially since we create and use a lot of modules, and it offers full module support. Option 2 is easier, uses Atom, but has some limitations, especially with modules.

Option 1— Framer Boilerplate

1. Install node.js
2. Install Git (if you haven’t already)
3. Install Gulp — Open up Command Prompt and type npm install -g gulp-cli. Gulp enables compiling a Framer project and viewing it in any browser.
4. Download Framer Boilerplate to a place that you’ll remember. You’ll be coming back to this for each Framer project you create. Framer Boilerplate is what does all the Framery magic.
5. Copy the Framer Boilerplate files to your working directory. I put mine at C:\src\[project-name]
6. If you are using any Modules, put them in the C:\src\[project-name]\app\modules\ directory. You’ll see we’ve already included some basic modules from the Windows Framer Toolkit.
7. In Command Prompt, browse to your project cd \src\[project-name]and type npm install.
8. Open up your project in VS Code. Because CoffeeScript files are whitespace dependent, it’s important to make sure your code editor has the correct whitespace and tab settings.
   * Tab space: 4
   * Tab type: hard
9. In Command Prompt, run a gulp server by typing gulp from the root of your project.
10. Browse to http://localhost:3000 and witness the magic!

Option 2 — atom-live-server

1. Install Atom
2. Type control + , to get into Atom’s settings
3. Click on + Install
4. Search for atom-live-server and install it
5. Open your Framer project’s app.coffee file in Atom
6. In Atom do ctrl + alt +l to run a server (or, find your Packages menu, and select atom-live-server > start server. It will automatically open your Framer project in your default browser.
7. To stop a server, in Atom do ctrl + alt + q (or, find your Package menu, and select atom-live-server > stop server)

With atom-live-server, it might be good to create an empty Framer project from Framer Studio that you can use as a starting point for new projects. OR, you can copy/paste/rename existing projects.

More on Fluent Design System

Joe Day designs for Windows, does music and photography for fun, and is a PSIA certified ski instructor.

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.