Announcing Framer 2

Quality prototyping for mobile and desktop

Framer is a tool to build interaction and animation prototypes for mobile and web. You can use images, animation, and events to quickly build and test complex interactions. Framer is Javascript based, hardware accelerated and includes spring physics for bouncy animations.

When I announced Framer four months ago, I built it as a practical tool trying to help solve a simple problem: not enough interaction designers actually make interactive prototypes, and rely too heavily upon static mocks. I knew that there had to be a better way to create high fidelity prototypes, and Framer was built to solve this problem.

Since then, many talented designers at Facebook, Instagram, Google and Dropbox have picked up Framer and created great things. Today I’m happy to announce Framer 2 with a set of handy new features.

Full Photoshop Integration

Framer 2 comes with a brand new Mac application that converts any photoshop file directly into a Framer project. This means you can easily export your Photoshop documents directly to the browser and add interactions. This eliminates the tedious work of slicing your assets and rebuilding your project in code.

Watch this video for a quick demo.

CSS Keyframes

Framer 2 now uses CSS keyframes for animation. This ensures smooth animations on every device. It also allows you to re-use your animations on any website. Just build and test the animations in Framer, then simply copy the CSS over to any project.

Third Dimension

Views can now rotate in full 3 dimensional space. Optionally, you can add perspective and animate any axis’ position and rotation.

And More…

More debugging tools, better documentation, new experimental ui components like a custom scroll- and paging view, and a completely revamped website containing many examples and lessons.

I hope you will enjoy Framer 2. And don’t forget to share what you build!