3 Step Overview of Framer.js

1. Create UI ?  2. Add animation and interactions ?  3. Export to browser or device

1. Create your UI (use drag and drop or code)

  • Use Framer’s ‘Sketch-like’ UI editor to create elements, whilst Framer converts everything to coffee-script on the fly:
  • Or you can drag and drop pre-made elements into Framer, and even import entire mockups from Sketch/Photoshop:

2. Add interactions and animation

  • Attach mouse and touch events to any element, and create effects and animations using simple code snippets:

3. Export to browser or device

  • You can design for a range of predefined screens, or create your own:
  • Easily export to a browser, and install a ‘viewer app’ to run on a mobile device: