Getting Started with Framer

Download Framer Studio

If you don't already have Framer Studio, download it here.  There is a free trial you can use for this tutorial.  Once you've finished installing the app, open it up and select File -> New or press Command+N to start a new project.

The Framer Interface

The Framer Interface consists of two main areas.  The Code Window and the Preview Window

The Framer Interface consists of two main areas.  The Code Window and the Preview Window

The Code Window is where you're going to write all the code for your prototype.  You can create layers here and add interaction and animation.  Any images that you import will also show up on this screen.  

The Preview Window is where you can see an interactive preview of your prototype.  This window updates in real time as you code, so you will immediately see the results of your work.  It is also interactive, so anything you've made clickable or draggable can be tested right away.

Now that we have the basic layout down, let's try making a layer.  We will explain all of those buttons in the interface after this.

Make a Layer

Add a layer using the Snippets button

Add a layer using the Snippets button

The Snippets button gives you access to a bunch of frequently used code snippets.  Don't worry about everything in this list for right now.  Let's take a look at the code this snippet created.  

Here's what's happening in our code

Our first layer

Our first layer

Let's go through what we have here.  The very first line is a comment:

# Create layer

By adding a pound sign (#) we can add commentary to explain our code.  This will not be compiled by Framer and is used just for you to keep track of what's going on.  

Framer code is written in Coffeescript.  You can think of Coffeescript as a special flavor of Javascript.  We'll go over some of the important points about coffeescript later, but for now, let's continue looking at this code.

The next line creates a new layer called "layerA":

layerA = new Layer

The name we select here can be used later in our code to change any properties associated with the layer (such as size and position) or to add interactions when someone touches or drags the layer.

The next 6 lines all set properties of the layer:

    x: 100
    y: 100
    width: 200
    height: 200
    borderRadius: 8
    backgroundColor: "#28affa"

The x and y variables position our layer within the frame.  Framer's origin of 0,0 sits in the upper left hand corner of the screen.  If you've done any front end programming you may notice that we don't have to specify the number of pixels in framer by saying something like "100px".  Just the units will do.  

Try making some changes

Without looking at the code below, see if you can figure out how to make the layer red and increase its size to a 300px by 300px square.

You should have ended up with something like this:

# Create layer
layerA = new Layer
    x: 100
    y: 100
    width: 300
    height: 300
    borderRadius: 8
    backgroundColor: "red"

You can use any hexadecimal to specify your color, such as #ffffff for white or #333333 for a dark grey.  Most common color names will as so work, such as "red", "green", "blue", etc. Note that unlike the numbers here, but backgroundColor property must be specified in quotation marks ("").

Updating layer properties

Updating layer properties

Cool—not too bad, right?  Layers have a lot more properties that we can update beyond those listed here, such as rotation, opacity and scale.  Let's get cooking and try out all three of those properties by making our first interaction.

Trying out animation

Lets minimize, or save and close our first project and open up a new document in framer.

A new empty framer document

A new empty framer document

Go back up to the "Snippets" button and select "Layer with Click Animation" from the dropdown.

A new layer with a click animation

A new layer with a click animation

Try clicking on your white layer in the Preview Window. Your layer should rotate 90 degrees with a little bouncy give at the end.  Let's walk through what's going on here line by line.

Our first two lines create the background for us and set the color to blue:

# Set background
bg = new BackgroundLayer backgroundColor: "#28affa"
bg.bringToFront()

Lines 7-12 give us our familiar new layer code:

# Create layer
layerA = new Layer
    width: 250
    height: 250
    backgroundColor: "#fff"
    borderRadius: 8

Line 14 is a convenience method that centers our layer in the view:

layerA.center()

And our final six lines, create the click interaction that spins our layer around by changing the rotation property:

# Rotate on click
layerA.on Events.Click, ->
    layerA.animate
        properties:
            rotation: layerA.rotation + 90
        curve: "spring(400,25,0)"

Let's look through these last few lines in detail since they contain some new things we haven't seen before.  

This line tells framer that when our customer taps on the layer, we want something to happen

layerA.on Events.Click, ->

I found this syntax pretty weird the first time I saw it, so let's go through it in detail.

Layer event syntax

Layer event syntax

Don't worry about memorizing all of the details of the syntax here, just try to get a sense for what each section of code does.  You can always come back to this image later.

I've added a few comments to the animation code.  Let's take a look at that now:

How an animation is structured

How an animation is structured

Animation curves

Above, we see that we are saying we want to animate the layer named "layerA", and we want to adjust its rotation on a spring curve.  Try inserting some different values in the rotation and for the spring curve.  You can also try out any of the three animation curves you see below:

curve: "linear"
curve: "ease-in-out"
curve: "spring(200,15,0)"

Credit: images from framerjs.com http://framerjs.com/learn/basics/animation/

Try out some of the other animation curves in your prototype and let's animate a couple more properties.  Add the following code to your prototype right after the rotation line:

y: 100                            # move to the top of the screen
opacity: 0.5                   # cut the opacity in half

Your code should look like this:

Try clicking on your layer now.  You should see some new movement.  Hit the reload button or press command+R to reload your prototype to its original state.

Nice work!

Nice work! You've just created your first framer interaction! Pat yourself on the back—Chuck Norris approves.

Where to go from here

Framer has a very active community and there are a ton of great resources online.  The best place to start is the learn section of their website: 

http://framerjs.com/learn/basics/.

You should also join the Framer group on Facebook: 

https://www.facebook.com/groups/framerjs/

There are a lot of active community members there who post code samples and help each other out.

Lastly, have a look at the examples section of Framer's site:

http://framerjs.com/examples/

Have fun and happy prototyping!