Building Your First Prototype

Our Goal

The goal of this tutorial is to make a prototype in framer that feels like a real app.  We'll be doing some coding in this tutorial, so roll up your sleeves.  

We're going to be covering the following topics:

  1. Importing designs from Sketch
  2. Transitioning between screens
  3. Animating layers

Let's take a look at the final result we're shooting for:

Our Goal

Our Goal

We're going to create a couple of screen transitions and an animated alert dialog.  Let's get started.

Download the Sketch File

The first thing we're going to cover is how to import from graphics programs like Photoshop and Sketch. If you have Sketch, download our Sketch file here.  

You'll also need Apple's San Francisco font to view the screens in Sketch.

If you don't have Sketch, here's a Framer project that already has the Sketch file imported.  You can just read through the import process here.

Let's start by opening up our Sketch file.

Our Sketch file

Our Sketch file

Importing designs from Sketch can be a little tricky with Framer.  Every item that you want to animate or interact with, needs to be in its own folder.  We're going to be interacting with the hamburger icon (the three horizontal pink lines) on the Profile page, so you can see I've given it it's own folder for this purpose.  Folders can be nested and still accessed directly in Framer. We'll go over this shortly.

Import Sketch file to Framer

With Sketch still open, launch Framer and click the "Import" button in Framer's nav bar.  Framer imports directly from Sketch while Sketch is running, so make sure the file we want to import is in the foreground in Sketch.  In this case it's "wonka".

Import Button

Import Button

You'll see an import dialog where you can select to import from Sketch.  Click import here:

Import Dialog

Import Dialog

Here's what your project should look like.  If you didn't have Sketch and already imported the Framer file with the Sketch import, you can pick up here:

Sketch file imported

Sketch file imported

Woah—what happened here? It looks like we only have one line of code to import, and we're only seeing one of our screens.  Also, what the heck is this huge hunk of text in the middle of the screen and where did it come from?

Let's go through what's happening, but first let's add a line of code after our import line that will help us sort things out.

wonkaLayers.photo.visible = true

The photo screen from Sketch popped up on the screen.  Cool!  It also looks like that weird middle area has some text that's a little brighter.  Hmm, and that text looks sort of familiar.  Where is it from?  It turns out the answer is in our Sketch file.  Take a look at the folder structure in Sketch:

Framer maintains Sketch's folder structure

Framer maintains Sketch's folder structure

You'll notice that only the folders are accessible in Framer.  Only our folders can be animated or used to handle taps or clicks.  Any free standing layers will be imported by Framer, but you won't be able to interact with them.  Let's take a look at our code so far

wonkaLayers = Framer.Importer.load "imported/wonka"
wonkaLayers.photo.visible = true

The first line says "take anything in our imported Sketch file and store it in wonkaLayers".  The second line says, "for the layer photos inside of wonkaLayers, set the visible property to "true".  True is a boolean value, which means it can either be "true" or "false".  If words like boolean and property are unfamiliar to you, don't worry about them for now.  I'll link some tutorials for basic programming in the resources section at the end of this tutorial.

Let's get all our layers into the starting position add the following lines to our code:

wonkaLayers.profile.visible = true
wonkaLayers.photo.x = 750

Get layers into their starting position

These lines make the profile page visible and set the x position of the photo layer to 750.  750 is the width of our screen, so it effectively places the photo layer off our screen to the right:

Photo layer off the screen

Photo layer off the screen

We'll come back to handling the photo layer.  For now let's work on our first transition.

Our first screen transition

For our first transition we are going to implement the commonly seen drawer navigation that appears when you click the hamburger icon (the three lines).  Our profile page will slide to the right and reveal the navigation behind it.  For this we're going to be using something we haven't seen before called "states".

States in framer allow you to define several appearance options for a layer and move between them easily. Let's add a state to our profile layer.  Copy and paste these three lines into our code:

wonkaLayers.profile.states.add
    open:
        x: 340

These lines add a state called "open" to the the profile layer with an x position of 340.  

This is a good point to discuss something we haven't talked about in coffeescript and that's whitespace.  Unlike some programming languages you may have seen before, Coffeescript cares about whitespace (spaces and tabs in your code).  An alternate way to write the line above would be this:

wonkaLayers.profile.states.add {open: {x: 340}}

Coffeescript will accept this syntax (style of writing code) as well.  As you can see, it's a little harder to decipher what's going on in those three lines.  Let's see what happens if we mess up our tabs and spacing in Coffescript.  Delete the tab before "x" in our three lines above.  You'll see that Framer throws an error:

An error from whitespace problems

An error from whitespace problems

You'll probably see these kinds of errors a lot when writing your first Coffeescript.  Fortunately Framer takes care of a lot of this for us by automatically indenting lines for us as we code.  If you're seeing these kinds of errors as we progress make sure to check your whitespace against the posted screenshot.

Ok, onto our first state animation!  Copy and paste our next two lines:

wonkaLayers.hamburger.on Events.Click, ->
    wonkaLayers.profile.states.next()

These lines say that every time someone clicks or taps on the hamburger icon, we should switch between our profile states.  Every time you create a layer, we get a "default" state for free.  So our profile layer has two states.  Once called "default" where x = 0 and one called "open" where x = 340. Every click on the hamburger icon will cycle through these states.  Try it out by clicking on the hamburger icon in the preview window.  If you're not seeing what you expect, check your code against this:

Cool, we have our first screen transition that feels real.  Let's add some lines to animate our photo layer on and off the screen when you tap a photo.

Animate the photo layer

wonkaLayers.image1.on Events.Click, ->
    wonkaLayers.photo.animate
        properties: 
            x: 0
            
wonkaLayers.back.on Events.Click, ->
    wonkaLayers.photo.animate
        properties: 
            x: 750

These lines animate our photo layer on and off the screen if you tap the first image in the profile or the back button on the photos page.  You see that here we are not using states.  It turns out there are many ways to get to the result you're looking for in Framer.  Keep in mind that all the code you write for Framer is disposable.  As long as it works to accomplish the function of your prototype, don't worry about it being the most perfect code ever written. The idea here is to move fast.  Get your prototype done so you can test it with a customer, or show an engineer how you want the interaction to feel.

Let's get our last lines into Framer.

Add a pop up interaction

We're going to create a pop up dialog when the like button on the profile page is clicked. The image for the pop up window can be downloaded here.

Drag and drop the image into the code window

Drag and drop the image into the code window

You'll see the following lines of code show up:

imageLayer1 = new Layer
    width: 600, height: 500
    image: "images/liked.jpg"

Wow, that was easy! Framer adds the image to our project, give it the correct dimensions and links to the file.  Let's change the name of our popup to "liked":

liked = new Layer
    width: 600, height: 500
    image: "images/liked.jpg"

We're going to use a convenience method to center the liked layer in our view. Add this line:

liked.center()

This automatically centers our layer horizontally and vertically.  For this animation we're going to have the popup animate up from the center of the screen when you touch the like button.  In order to do that, we need to set the beginning scale of our liked layer to zero.  Add the line scale: 0 to our code as shown below:

liked = new Layer
    width: 600, height: 500
    image: "images/liked.jpg"
    scale: 0

liked.center()

Let's add our animations.  Add the following lines:

wonkaLayers.Likes.on Events.Click, ->
    liked.animate
        properties:
            scale: 1

liked.on Events.Click, ->
    liked.animate
        properties: 
            scale: 0

These lines handle animating our liked popup.  Let's try out our animations. 

Click in these places to text our animation

Click in these places to text our animation

Not too shabby, but I think we can do better.  Let's make some changes.  Add a curve to our animation when the like comes on the screen, and shorten the time it takes for it to animate off.  Here's our new code for the event handling:

wonkaLayers.Likes.on Events.Click, ->
    liked.animate
        properties:
            scale: 1
        curve: "spring(200, 20, 20)"
liked.on Events.Click, ->
    liked.animate
        properties: 
            scale: 0
        time: 0.3

For more on animation with curves, check out the learn section of the Framer website.

When your finished, your code should look like this:

Final code

Final code

Your interactions should look like this:

Our final interaction

Our final interaction

Congratulations, you've finished the tutorial!