Prototyping with Framer

Why FramerJS?

  • Code gives flexibility
  • Integrates with third-party JavaScript libraries
  • Awesome community
  • It's free and open-source

Framer Studio

JavaScript

CoffeeScript

// Variables
var myVar = 'I am a variable';

// Arrays
var myArray = [1, 2, 3, 4, 5];

// Objects
myObj = {
    greeting: 'Hi',
    age: 20
}

// Functions
function myFunction () {
    console.log('Hello World!');
}

// Classes
function MyClass (x, y) {
    this.x = x;
    this.y = y;

    this.doSomething = function () {
        console.log('Do something');
    }
}
# Variables
myVar = "I am a variable!"

# Arrays
myArray = [1, 2, 3, 4, 5]

# Objects
myObj =
    greeting: 'Hi'
    age: 20

# Functions
myFunction = () ->
    console.log "Hello World!"

# Classes
Class MyClass
    constructor: (x, y) ->
        @x = x
        @y = y

    doSomething: () ->
        console.log "Do something"

Demo time

Framer workshop

By Timon van Spronsen

Framer workshop

  • 239