Prototyping in Framer: Code Organization

Good organization methods can hugely improve designer’s ability to prototype, leveraging basic copycat replications up to important creative autonomy.

Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →

This article presumes prior knowledge of code foundations. It presents Functions and their Legibility, Animations, Events and States.

Functions

Function is a piece of reusable code, written after arrow ->.

-> nick: "Lucca", age: 20

It is reusable because its instructions are not executed immediately, but only stored for later use.

Using functions

Functions can be stored on memory just like common variables:

createUser = -> profile = nick: "Lucca", age: 20

In the example above, profile variable will not be created until the function createUser is executed with ():

createUser()

Sending parameters

It is possible to send parameters when executing a function. This is the case of Framer's print function, for instance:

print(profile)

Printing parameters

print function show variable values in Framer Preview. It requires a parameter which was the profile in the example.

Naming parameters

A function that receives parameters needs first to declare internal names inside (), before ->:

sum = (x, y) -> x + y

The function above receives two numbers, sums and returns the final value. So executing sum(20,30) will return 50.

Function legibility

Functions are often written with indentation. In that case, they always return the value of its last line:

average = (x, y) ->
    sum = x + y
    sum / 2

So executing average(20,30) will return 25.

When executing, it is possible to replace () by a single space:

average 20,30

When parameters are objects, () can give space to indentation:

layer.animate
    x: 100
    width: 100

But () are still needed when executing functions without parameters. Examples: layer.copy() or layer.destroy().

Animations

Every layer has an animate function. It requires an object with the target property names and values.

layer.animate
    x: 100
    width: 100

It is possible detail the animation with a final options property and some specific sub-properties:

layer.animate
    x: 100
    width: 100
    options:
        delay: 1.5
        time: 0.5

States

Every layer carries a states object. It's a handy index in case one same animation needs to repeat too much.

layer.states.hover =
    width: 250
    backgroundColor: '#38AFFB'
    options:
        time: 0.5

Note that this will not animate, but just save the animation. So that executing it later becomes much simpler:

layer.animate "hover"

For convenience, Framer automatically saves the initial layer representation as a default state.

Events

Layers will emit events when interactions happen. Framer has events for all kinds of interactions:

• Tap, Swipe, Pinch, Click, Drag
• Mouse over, Mouse out, … and many more

Use layer’s on function to capture events, and build interaction feedbacks:

layer.on "mouseover", -> layer.animate "hover"
layer.on "mouseout", -> layer.animate "default"

The on function receives two parameters: event name and a function to be executed when the event happens.

Final notes

You just got everything you need to finaly read code! So building code will be matter of patience and practice.

Code is a topic of continuous learning. But now you are finally prepared to research, read syntax, and learn in context :)

So take your time and challenge yourself. When you get lost, take the doubt as a gem to research. Find the answer, make it work, and get lost again.

Further resources

On the way to prototyping autonomy, some resources will probably help:

• Framer Programming Guide, specially conditional, loop, class and scope
• Coffeescript Documentation, specially the syntax checker
• And Coffeescript Cookbook… if you eventually want to get serious :)