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:
    screen-shot-2016-09-07-at-17-20-50

✌Join us for more

1000s have recommended us, sign up today for free.

  • Stay up to date with prototyping tools and design news.
  • Comment and give feedback.
  • Become an author and share your expertise.
Sign Up