Prototype with real data in Framer, from JSON to multi-device and internet of things

It is a great time to be designer nowadays. Projects are interesting, tools are getting better and better, rates are also increasing ;)

I was amazed when Craft from Invision first time arrived, and designers were able to duplicate listed blocks easily with dummy information , without typing in tonnes of text layers manually. Then they provided an ability to use JSON stuff, and it became even better. Especially if you have real API from the product you are working on, or you have the proper idea of what data will be in your mockups.

After FramerJS appeared on the scene, you were able to go outside of the box with static screens and do some amazing prototypes that look and feel like a real app. Because Framer project is just basically an HTML application, you can hook it up with any kind of JS related stuff.

So if you have JSON file with data or connection to an API, you can build static stuff in Sketch based on that. Apply proper styling to elements, when happy with the result — move to Framer Studio to build the same thing in an interactive format.

JSON

For my first try of using JSON in design, I used API of the greatest online banks — getmondo.co.uk .Their API allows you to generate JSON file of all your transactions, including vendor logo, transaction category, date and so on.

{
  "transactions": [
  
    {
      "id": "tx_000096Ukzi2XOhUegffTlZ",
      "created": "2016-03-24T17:53:01.06Z",
     "amount": -1.00,
      "currency": "GBP",
      "merchant": {
       "name": "Google",
        "logo": "https://mondo-logo-cache.appspot.com/twitter/google/?size=large",
        "category": "general",
      }
    }

Using craft I was able to build the mockup of the transactions screen pretty fast. Just connecting elements in Sketch to JSON objects and then duplicating the whole row.

At this stage, I had an idea on styling for elements in my design, so I was able to jump straight to Framer.

I used material kit module by Kevin Arnott. It allows you to build material design prototype in Framer with the speed of light:) using premade customizable components.

Using same JSON file I used in Sketch, I was building my transactions list in Framer. In order to parse JSON data to Framer object — you need this kind of code

data = JSON.parse Utils.domLoadDataSync “data/transactions.json”.

This code will give you array of all transactions objects, so in order to get info on for example vendor name from the first transaction you need to type

data.transactions[0].merchant.name.

Using Framer array and knowing styling properties for my text labels from Sketch file I built my transaction list.

http://share.framerjs.com/ance6zejim8y/

Code Less & Achieve More with Arrays in Framer

Final prototype with some transitions for header is looking like this —

HSBC current account by Sergey Voronov

By the way, there is small usefull tool for creating JSON dummy data for your designs made by Aaron Benjamin

dummi

Firebase

After you become more confident with using local JSON files, you can try working with an external database, which stores data in JSON format — firebase.com.

There is great module for Framer and Firebase https://github.com/marckrenn/framer-Firebase written by Marc Krenn
Make sure to check his medium article on this topic

Supercharge your Framer prototype with Firebase, pt.1

It will give you an idea on how to use it.

Why is it cool? First of all, you can create multi-device prototypes, like chats — http://share.framerjs.com/nmlvhwcegfsq/

Second, with some little knowledge of javascript, you can try to connect Framer to internet of things.

I was able to get my hands on Sphero BB8 droid -http://www.sphero.com/starwars . You can connect to it using Bluetooth. It has proper Javascript library https://github.com/orbotix/sphero.js. Unfortunately, it requires using node.js. So library can’t just be included in Framer file itself — which means, you can’t control BB8 directly from Framer. I was really eager to showcase power of Framer platform on framerlondon.com event, but was stuck, because the lack of knowledge on websockets and other scary words I heard from devs when discussing this topic. Then idea strike my head:) I can send control variables to firebase DB using Framer, and using the small code for node.js on macbook — read this values from firebase and send them to BB8 in order to control his speed, color and movement. The code itself was really short.

https://mamezito.github.io/spherobb8.framer

for example i am updating rotation variable in firebase by rotating head

head.on "change:x", ->
 rotation=dragOnCircle.dragAngle
 firebase.patch("/sphero", {"rotation": rotation})

or changing color variable by using radial color picker

colorKnob.on "change:x", ->
 hue=dragOnCircle.dragAngle
 colorHSL=new Color("hsl(#{hue}, 100, 50)")
 colorKnob.backgroundColor=colorHSL
 hex=colorHSL.toHexString()
firebase.patch("/sphero", {"color": hex})

Node.js code looks like this

var sphero = require("sphero"),
    bb8 = sphero("0e3a0777cf0d4abdb0f29af311d528d0");
var firebase = require("firebase");
firebase.initializeApp({
    serviceAccount: "key.json",
    databaseURL: "https://sphero-d446f.firebaseio.com"
});
var rotation = 0;
var color = "#ff0000"
var speed=0;
var db = firebase.database();
var ref = db.ref("sphero");
bb8.connect(function() {
console.log("connected")
  ref.on("value", function(snapshot) {
    color=snapshot.val().color;
    speed=snapshot.val().speed;
    rotation=snapshot.val().rotation;
    console.log(color, speed, rotation);
      bb8.color(color);
      bb8.roll(speed, rotation);
}, function(errorObject) {
      console.log("The read failed: " + errorObject.code);
  });
});

Mind that you need to use your own firebase settings for the project, and BB-8 udid needs to match your droid ID. You can learn its id using node module — node_modules/noble/examples/advertisement-discovery.js

I was not demonstrating the movement and rotation here in video, because bb8 can just jump off the table)

In case you need radial color picker in Framer to mess arround philips hue for example — take it here

radial color picker by Sergey Voronov

External API

I came across George Kedenburg III prototype of Spotify player that is using real Spotify API (https://developer.spotify.com/web-api/) to search for the song, display song , artist information, album cover and URL to song file itself.

http://share.framerjs.com/ed24br2i5unz/

I wanted to showcase multi-device prototype during framerlondon.com event. So I thought it will be cool to show interaction of play pause of the current song playing on an android phone, using your android wear device.

I used most of George’s code to connect to Spotify API, just customised the end result in interface to match my styling and layers. Under the hood — both prototypes — wear and phone are listening and talking to firebase DB. When I click pause on one device — function saves player state -to “pause” in DB.

sketch.play.onClick ->
 playSong()
 firebase.patch("/spotify", { 
    "state":"play",
    })
sketch.pause.onClick ->
 pauseSong()
 firebase.patch("/spotify", { 
     "state":"pause",
     })

The second device is listening to the variable change in DB and stopping the song. Same way I am triggering play event between two different devices /prototypes.

responseFirebase = (data, method, path, breadcrumbs) ->
 if data.state=="pause"
   pauseSong()
  else if data.state="play"
   playSong()
firebase.onChange("/spotify", responseFirebase)

phone prototype — https://mamezito.github.io/androidPlayer.framer/

android wear prototype — https://mamezito.github.io/AndroidWearSpotify.framer/

(if many people will try to run both app same time and clicking play pause, can little messy, cause its using one DB:))

Bonus

You can pass variable to your Framer prototypes using link
in my case, I was passing artist name through URL, and parsing it to variable and then query it using Spotify API.

if location.hash.substr(1).length>0
 query=location.hash.substr(1).split(‘_’).join(‘ ‘)
#so everything in url after # will be in my “query” variable. All “_” will be changed to spaces.

You can see how it works

http://share.framerjs.com/og8pxlqaujf4/#red_hot_chilli

http://share.framerjs.com/og8pxlqaujf4/#kamikaze

Hope this messy article will encourage you to try hacking in Framer even more)