Skip to content

Prototyping with Framer.js and P5.js

Previously worked as a UX designer, I’d been wanting to make prototypes with interactive designs.  Since I had been learning Javascript in class, I tried to explore what could I do to create interactive mobile apps prototypes. In the past week, I had a chance to learn Framer.js, a tool to create an interactive prototypes.

There were many copy/paste, errors, trial and error, and frustration. I admitted that it’s (for me) a hard thing to learn. I needed to understand the concept, not just the language but also how this Framer.js really works, the principals. Before I learned Framer.js, pretty much I made prototypes only with drag and drop tools, such as Axure and InVision. So this was a big step for me.

It is said that Framer.js is a designer friendly tool to make prototypes. It provides design from scratch and animate it or make interactive designs by coding. Even though it’s a prototype tool, but to get more interactive, we need to use Javascript. So designers have to work at the level of code.

The readme file on Koen Bok’s (the founder of Framer) Github repository said:

Framer Library is an open source JavaScript framework for high fidelity prototyping. Use it to design animations and interactions without any limitations. Make use of real spring physics or animate with 3D effects, anything is possible.

In my opinion, Framer.js is a quite powerful tool. I can create micro-interaction as I want, combine it with HTML, CSS, and also real data. It makes prototype look like a real app. But if you’re a UI or UX designer, you don’t need to make detail prototype. So, Framer.js is a nice to have tool for UI/UX designer, but superb for UX Engineer.

Framer.js is built on top of CoffeeScript. It is actually a Javascript, but more simplified so that it’s more efficient to write. This is what Framer’s developers said why they chose CoffeeScript:

We chose CoffeeScript for Framer because its properties neatly align with the goals that designers typically have when building interactive work. As a bonus, learning CoffeeScript will give you an edge when it comes to learning similar languages, like JavaScript or Swift.

I wasn’t really frustrating switching to CoffeeScript, since it’s just like Javascript without using any symbols and brackets. But the big difference is the usage of whitespace (spaces and tabs). I had a hard time trying to figure out why the code didn’t work. It turned out that we have to carefully pay attention to spaces and tabs. We can’t mix spaces and tabs, because it’s very sensitive and can cause errors.

The basic thing about Framer.js is that it uses layers, just like Photoshop and Sketch. So, it’s easier for designer to think about how they’re doing with the code. Basically, the object that can be animated/interacted is in a layer.

Layers on Framer.js

This is what is looks like as layers hierarchy.

Layer Hierarchy on Framer.js

As for this week assignment, we had to create something using arrays and class. Since I’m new to Framer.js and using CoffeeScript, I needed pretty much longer time to learn everything. I learned from the tutorials and also Framer’s Book. Furthermore, I also learned about classes and arrays in Framer from this site.

This is the preview of my simple Framer.js and P5.js project.

Preview

By making this simple project, I learned more about class and object. In this project, I used a class and array. This class has its properties and behaviours. And I could use it in array, so that there are some duplicate cards.

First, I created a class called Card and initiate it with default properties. This card is what it seemed in the middle of the screen.

class Card extends Layer
  constructor: (options={}) ->
    options.width = 300
    options.height = 500
    options.backgroundColor = "rgba(255, 255, 255, 1)"
    options.borderRadius = 10
    options.clip = true

    super options

Then I also create an array that contained images. Each card has different images. So that when I clicked a button on each card, it showed different images based on which card it is.

canvases = ["http://www.cristinburton.com/uploads/7/1/3/3/71331791/1968615_orig.jpg",
"https://i.pinimg.com/originals/6f/f1/ba/6ff1baee2f59d2fa015b0c2aa57da4c3.jpg",
"https://craigmod.com/images/journal/coccyx/aba-04.png",
"https://i.pinimg.com/originals/48/d9/6c/48d96c502714e63cd2dcffb4b8fc0406.jpg"]

Here’s how I used the Card class in the array.

for i in [0..3]
  drawing = new Layer
    parent: page.content
    width: Screen.width
    height: Screen.height
    backgroundColor: null
    x: page.width * i
		
  # Create Card class
  card = new Card
    parent: drawing
    photo: canvases[i]
    y: Align.center()
    x: Align.center()

So basically I used class and array in Framer.js using CoffeeScript. Okay, how about p5.js? Since this whole week I was more focus on learning Framer.js, then I just embedded the p5.js into Framer.js. I created a p5.js sketch in web editor, then embedded it using iframe.

Here’s the p5.js that I made, and the code is here.

Here’s the code how I embedded p5.js sketch into Framer.js. I made a layer that contained the p5.js canvas, then added html iframe into it.

p5Canvas = new Layer
  parent: @
  html: "<iframe width='300' height='500' src='http://alpha.editor.p5js.org/embed/HJ4671mpZ'></iframe>" # Embed p5.js file
  width: 300
  height: 500
  delay: 1
  backgroundColor: "rgba(230,230,230,1)"

Pretty much that’s it what I learned this week. I’m happy that I had a chance to learn Framer.js and how I could use p5.js in my Framer.js project. In the future, I’d like to explore more and make interactive prototypes.

You can see the final code here in my Github. Also, try the prototype here (I know, the p5.js sketch doesn’t work here. I don’t know why. But it does work on local).

Here’s the final project!

Prototyping with Framer.js & P5.js from Vidia Anindhita on Vimeo.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *