Sketch + FramerJS — up and running

Published in

Meatball IO

5 min readApr 13, 2016

Many people on my Facebook page is talking about the countdown for a new update for framer.js . And when the clock zeroed out —only the new version of framer is announced. Lots of interesting thing such as the new UI, live code and such.

So as many good technologist do, I download my trial version and see what I can do in one sitting start from sketch and then move it to framer.js to do some cool interactive design. below is what I managed. I will try to retrace my steps below.

For a framer version click here

Sketch up some basic design with craft

To prevent resizing nightmare, I started with a sketch template provided by framer.js here.

If any sketch users are not using Craft right now, you are missing out big time. Craft allows you to dynamically duplicate contents (photos included). This help your design look fresh with minimal effort.

I was listening to Bob Marley while I was doing this — so the obvious choice for the design will have to be a music app. It is a simple design because I want to get my hand into framer.js quickly — so I skipped the wireframe steps. This is a bad practice to do in real life. You would need to sit down and think about features, functions and most of all the users. Before you can start doing any high-fidelity design.

Anyway with that said, the design for my simple music app is as below. (The files can be download at the end of the post)

Here comes framer.js

So I fire up framer.js and the import from sketch is very simple. In 5 sec, I got my sketch design in. The code is automatic. Notice that all the layers from Sketch also follow. (This make the case for naming your layers properly)

Now all I did was just to wrap a tableview to a scroll component, disable to horizontal scroll and give some content inset for a nice touch. 3 lines as below

scroll = ScrollComponent.wrap(MusicList.Scroll)
scroll.scrollHorizontal = false
scroll.contentInset = {bottom: 100}

The result is a nice and simple scrollable design. It is nice but it is too soon to congratulate myself just yet. So I went back to the Sketch and design a second page — which meant to be a listening page. I like the spinning disc design for Tidal.

Second page into Framer.js

Here comes the hard part. I tried to import another Artboard from Sketch into framer.js. I would advice against that because the elements in the middle will be too complex. The current version doesn’t seem to support this very well yet.

A solution I used this time is to export each asset for the second page into images and then import them as layers.

MusicList = Framer.Importer.load(“imported/MusicList@1x”)
Music_BottomBar = new Layer
 image: “images/Music BottomBar.png”Music_Bar = new Layer
 image: “images/Music Bar.png”Album_CD = new Layer
 image: “images/Album CD.png”Artist_List = new Layer
 image: “images/Artist List.png”

Events and States

Let’s begin with states. A quick look into the documentation, framers.js use states in similar way to Keyframe back in the Flash day. It’s a marked all the position that the layers will be moved in to. The convention they use is “stateA, stateB and so on”. It looks something like this.

Album_CD.states.add
 stateA:
   opacity: 0.00
 stateB:
   opacity: 1.00

Now you need event as a way to trigger layers into each states. Framer.js provides you with many events. But just like any app, you would mostly used TouchDown. As you can see below that you can use the menu to link down elements and events

The code will be generated as well. But I find that it is easier to just use the code snippet and code it in. What I want the design todo is when users tab on the bottom bar, there will be a cool transition into the next page. It’s not the easiest to do and the result is not the best — but it is enough to teach me the basic. Which is delay, onTouchEnd, nested events and also if-else statement.


open = false
  Music_BottomBar.onTouchEnd (event, layer) ->
    MusicList.Scroll.states.next(“stateA”,”stateB”)
    Music_BottomBar.states.next(“stateB”, “stateA”)
    Music_Bar.states.next(“stateB”, “stateA”)
 
 if (open is false)
   Utils.delay 0.5, ->
     Album_CD.states.switch(“stateB”)
   Artist_List.states.switch(“stateB”)
     open = true
 else
   Album_CD.states.switch(“stateA”)
   Artist_List.states.switch(“stateA”)
     open = false

Adding final touches

It works now — but I want the spinning cd like the Tidal app. So here is the code to spin up the disc.

rotateAnim = new Animation
 layer: Album_CD
 curve:”linear”
 properties:
 rotationZ: 360
 time: 8rotateAnim.start()rotateAnim.on “end”, ->
 Album_CD.rotationZ = 0
 rotateAnim.start()

Final screenshot

The final design, I used http://uigradients.com/#Passion for a good background. And also use magic mirror2 to do perspective effect.

Final Note

The files for these projects can be downloaded here and here.

Again the framer.js page for this is here.

Framer.js + Sketch is a powerful combination and fun to use. http://www.cooper.com/prototyping-tools might need to update the learning curve for framer.js after this.

Have fun creating :)

-Pondd-