Prototyping Animated Apps In Your Browser

I've not come across Framer before, but I got my head around it in about 10 minutes. There's an easy route to leverage Photoshop mockups, but you can do it from scratch without too much trouble (and there's a plug-in for Sketch if you–like me–avoid Photoshop).

Many people already prototype in the browser. It's simple and quick. But while html/js/css/jquery gets a lot done it has some downsides:

  • It can get pretty complicated mixing all the different technologies
  • It can be hard to get the pixel perfect control you want
  • It's not always performant, especially on mobile
  • It's pretty far from how it will be actually implemented if you prototype for native

Framer tries to solve some of these problems by providing a very lightweight framework modeled after larger application frameworks. The basic idea is that you only need a few simple building blocks like images, animation and events to build and test complex interactions.

Some useful additional background also in this case study of building Potluck.