Flipboard navigation patterns recreated with Framer Studio

Flipboard navigation patterns recreated with Framer Studio

This prototype was made as pure personal test. While learning some of the JS/Coffeescript basics I also wanted to stress Framer Studio to see how far I could go adding multiple views and basic interactions. The code is far from be polished, but the prototype works as supposed.

It features:

  • Scroll interaction for the Following screen
  • Tap on “Design” tile to access the content detail view
    • Share content via mail (just the screen)
    • Add content to two different personal mags
    • Add content to a new mag (jus the “Create” new mag window)
    • Add interest note
    • Show / hide the social sharing card

The graphic files were imported via Sketch 3 although I’ve used Photoshop to cut all the main pieces. Since most of the buttons where flat graphics, I’ve used a mixed approach to define tappable areas: some buttons where made via transparent layers used as hot areas; other tap interactions were made calculating x/y coordinates. This latest solution was a bit tricky to handle due to some limitation of JS with touch events on mobile. To solve this problem, I relied on a function created by Jordan Robert Dobson.

You can test and download the project here (tested on Chrome for Os X 10.10).

Note for the mobile versione:

  • Prototype optimised for iPhone 5s
  • For a better experience, please install Frameless mobile browser (available for free on the App Store)



Next ArticleTwitter Title Scroll (iOS) recreated in Framer Studio