Take a look at the example prototypes below. These were done in Framer. After this tutorial, you will be able to start creating your own stunning animated prototypes in no time.

Examples of Framer prototypes

Framer came out with its newest version a week ago, and the prototyping market will never be the same. The Framer prototyping tool used to be hard to master but useful as the most accurate and limitless prototyping software. Now, things have changed. Framer now comes with Design + Code + Collaborate features, meaning you can create your prototype directly inside Framer, developing a fully functional prototype without any third-party software and without any coding skills.

Here, I’ll teach you how to use simple Framer code without any prior knowledge of coding required. You will learn how to combine the best features from design and code mode in Framer to create animated and interactive prototypes. So let’s jump into this tutorial and grab some small code snippets to improve your prototypes.

Framer Basics

Let’s get started! Just go to framer.com and download a trial version. They are giving you two weeks of their fully functional demo, and trust me, it is enough time to learn a lot about this prototyping software.

After installation, you may want to go through some of the examples they provide and play with them a bit. When you are done, it’s time to start prototyping.

(In this Framer tutorial, I will be focusing on creating prototypes directly in Framer.js. You should also know there are other ways to start prototyping in Framer. For example, you can work directly with Sketch files. I will cover that workflow in another article.)

The All-new Framer – Design Mode

In this article, we will create three cool prototypes within minutes with minimal code usage: basic interactions, scrolling component, and page component

3 different interactions made in Framer

The newest version of Framer has a great new feature: design mode. It allows you to work almost the same way as you do in Sketch or Figma. You can create vector layers, import images, or create and style text layers. All of this becomes very handy when you want to prototype quickly without any third party apps.

Let’s Create an App-type Design:

In the first part of this tutorial, we will prepare a playground for our Framer prototype. We will create an app-type design, with three different types of layers: vector, image, and text.

Design mode in Framer

Step 1: Create a simple button and background.

To start your design, select the first tab—which is design mode—and add an artboard, just like in Sketch. In this tutorial, we will be working on an iPhone 7 prototype, so I’ve picked this preset as my artboard size. I’ve also added a blue background fill.

Next, select the rectangle tool and create a shape in the form of a simple round button.

Adding and styling a shape layer

Step 2: Add a card with an image.

The second method of adding layers is the drag and drop feature. You can select any image file from your computer, drop it into Framer, and style it using the right sidebar. I used a simple illustration and styled it as a card.

Drag and drop feature for image layer

Step 3: Add an app title.

Framer also allows you to add a text layer. Again, styling it is basically the same as in any graphic software. You can choose font, size, alignment, letter spacing, and more.

Adding and styling a text layer

Step 4: Tell Framer which layers are interactive.

We have one more step before starting our Framer prototype. We just have to tell Framer which layers will be interactive. Just click the dot next to the layer name inside the layer panel. It’s good to name each layer properly for further use. I named my layers card and button.

Naming layers and activating a trigger

Step 5 (Bonus): Define your global colors.

A good practice is to define some variables for the whole prototype. You can set the color palette, typography, and basic dimensions you will be using from the beginning. This helps save time down the line.

When you are setting up your colors, just name them in the code editor, and provide HEX, RGB, or RGBa values after the appropriate “=” sign. Remember to keep all variables at the very top of your code.

#	variables -------------------------------

blue = "#005D99"
green = "#3DBE8B"
white = "#FFFFFF"

Step 6 (Bonus): Adding relative position.

With the new Framer, it is very easy to keep your prototype responsive. You can set relative positions from the design mode, as demonstrated below:

Applying relative positions for layers

Here is a short list of properties that are useful for aligning and calculating layer position directly in the code. You can do the necessary math to calculate layer positions. This becomes necessary when you are adding interactions later and you want to keep your prototype responsive.

# This is how you can align layer position:

	x: Align.center(0) # align layer horizontaly
	x: Align.center(200) # align layer horizontaly with 200 offset
	x: Align.right(0)
	x: Align.left(0)
	
	y: Align.center(0) # align layer verticaly
	y: Align.top(0)
	y: Align.bottom(0)

# You can use also some variables

	width: Screen.width # current device width
	height: Screen.height # current device height

# As a reference you can also user layer names

	x: layerA.x # layerA horizontal position
	y: layerA.y # layerA vertical position	

	width: layerA.width # layerA width
	height: layerA.height # layerA height
 
# You can combine all of this into the simple math to calculate position or dimensions
	width: Screen.width / 2 - layerA.width

Now You’re Set Up—Let’s Start Our Project.

We have created different types of Framer layers. Now our interaction playground is ready to go.

App-looking prototype with interactions and animations made in Framer

We will create this app prototype step by step.

Finally! The boring part has come to an end. Now it’s time for some interaction design.

Download the whole prototype here: https://framer.cloud/QatjE

1. Creating a Button Feedback Interaction

To design any interaction, we need a trigger to make it happen. It can be almost anything: a screen tap, the end of an animation, the end of an image loading, or your phone accelerometer.

Step 1: Creating the event for interaction.

We will keep it simple. Let’s create a button feedback when you tap it, using the following command:

layerA.onTap (event, layer) ->

Framer just wrote this line of code for you. It means that when you tap the button layer, something will happen.

Step 2: Adding animation to the event.

Let’s start an animation after this trigger. To do this, click on the dot next to the button layer in the layer panel, then pick Add Animation. When you are adding an animation, Framer jumps into animation editing mode. You can scale, move, rotate, or change any parameter of the layer:

Animation editor in Framer

Animation editor in Framer

Framer added a few more lines of code. (Not to worry—you are still able to edit your animation with the animation panel.)

button.onTap (event, layer) ->

	button.animate
		borderRadius: 27
		borderWidth: 10
		borderColor: "rgba(115,250,121,1)"
		options:
			time: 0.30
			curve: Bezier.ease

Congratulations! You just created your first interaction. It works only once right now, but we will fix that. The reason you can trigger this animation only once is that there is nothing set to happen after the animation is finished. We have to reset all the parameters after the first animation ends to how they were before.

Step 3: Resetting animation.

Add another event, almost as we did before. The difference is that we are looking for an event when the animation ends:

Adding an event in code editor

This time code added by Framer will look like this:

button.onAnimationEnd (event, layer) ->

So, when the animation on the button layer is finished, we can add the next animation that will reset the button layer parameters:

button.onAnimationEnd (event, layer) ->

	button.animate
		borderWidth: 100
		borderColor: "rgba(255,255,255,1)"
		borderRadius: 100
		options:
			time: 0.3
			curve: Bezier.ease

That’s it! We now have working feedback after a tap on our button.

Button feedback animation

Button feedback prototype in Framer

2. Creating Different States for Card Layer Interactions

Ok, now you know how to design an animation and trigger it. More often, you have to design different states of a layer. You can design multiple states of the same layer by changing only some parameters, like position, size, or opacity.

Step 1: Adding and creating states for a card layer.

The way to add a state to the card is almost the same as adding an animation. You have to click on the dot next to the card layer and then click Add State. Now you’ve jumped into state edit mode. Design it how you like:

Adding a state in code editor

Please pay attention to the indentation of the code. It should start from the first row.

I’ve designed two different states for my card layer:

card.states.a =
	width: 248
	height: 287
	x: 63
	y: 190
	borderWidth: 10
	borderColor: "rgba(115,250,121,1)"

card.states.b =
	x: 139
	y: 529
	width: 98
	height: 98
	borderRadius: 49
	borderWidth: 1
	borderColor: "rgba(255,255,255,1)"

Step 2: Adding events.

There is only one more step to make it work. We have to create an event for changing these states.

button.onTap ->
	card.stateCycle()

What this does is change all states of the layer one by one, every time you make an action. So, in our case, every time we tap the button layer, we change to the card state. If you would like to create more states and trigger them correctly, the snippet below will work for you much better:

button.onTap ->
	card.stateSwitch("b")

This snippet is useful when you want to trigger a particular state of the layer.

The last adjustment I made to my prototype is a change of animation speed and curve between states:

card.animationOptions =
	curve: Spring
	time: 0.8

Final prototype with animations

States interaction on iPhone prototype

There is a lot more what you can do with events, but at this point, you will be able to create almost any basic interaction. It is one of the best-written documentations I have ever seen.

Speeding up Your Work in Framer: Components

The time has come to add in components for speeding up your work. To get the most out of this tutorial from this point on, download this prototype: https://framer.cloud/WTySI

1. The First Component: Scrolling

Scrolling interaction inside iPhone 7 mockup

I have modified our prototype a bit. Now we have a list inside, but its height is above the screen resolution. We have to create scrolling to be able to see the whole list in the prototype.

Step 1: Creating layers and setting up components.

Creating scroll prototype in design mode

Let’s start by creating a layer with a height bigger than our screen. Mark this layer as interactive and name it list. Then jump to code mode. We will not use the handy left sidebar this time. Let’s set up our whole screen to be scrollable:

scroll = new ScrollComponent
	width: Screen.width
	height: Screen.height

This code creates an invisible area with the width and height of the current device.

Step 2: Tell Framer what layers you want to scroll.

Nothing has happened yet. We have to tell Framer which layers should be scrollable. To do this, we add our list layer to the scroll component:

list.parent = scroll.content

Step 3: Locking vertical scroll.

We are allowed to scroll now, but it is happening in all directions. We have to lock scroll on a vertical axis:

scroll.scrollHorizontal = false

Final prototype with scroll feature

Scrolling component

Wow! You created a scroll inside your app with just five lines of simple code.

2. The Page Component: Swiping Screen to Screen

Screen swipe prototype inside iPhone7 mockup

In the pages component, Framer lets you swipe between screens and automatically snaps them into position.

A very popular interaction for switching between screens is swipe. The idea here is very similar to the scrolling component. You can download a working prototype here: https://framer.cloud/icddT

Step 1: Setting up the component.

First, we have to create a “box” in the code editor where the magic will happen:

page = new PageComponent
	width: 315
	height: Screen.height
	x: Align.center
	scrollVertical: false
	clip: false # the content outside the box won't be clipped

At this point, you should be familiar with all the code here. It is just a simple setup of the component and its area. Now we have to create some layers to swipe.

Step 2: Creating layers

We will use our first prototype design and modify it a little. Instead of one card image, this time I imported two images.

At first, we have to make the artboard two times wider. In the artboard properties panel, find width and multiply it by two (or just add *2). Place the cards next to each other, activate them with the blue dot, and name them properly: card1 and card2.

Preparing prototype in design mode

Step 3: Adding layers to the page component.

At the end of our code in the code editor, we have to add:

card1.parent = page.content
card2.parent = page.content

That means we are adding these layers to the component.

Final prototype with page component

Page component—it allows you to swipe through screens, both horizontally and vertically

The page component is now ready to go!

Final Word

That’s All, Folks! I hope you found this Framer tutorial useful to start your journey with the most powerful prototyping tool in the market. Also, you should consider joining the Framer group on Facebook: www.facebook.com/groups/framerjs. There is a huge community around, and they are helpful when you are starting out.

If you would like to go even deeper inside Framer, try reading the Framer documentation.

p.s. Prepare yourselves for more Framer articles to come!

About the author

Wojciech Dobry, Poland
member since November 1, 2016
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals. [click to continue...]
Hiring? Meet the Top 10 Freelance Framer.js Designers for Hire in June 2017

Comments

Alex
Nice tutorial, I always wanted to learn how to do these things!
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
You can edit your subscription preferences here.
Trending articles
Relevant Technologies
About the author
Wojciech Dobry
Designer
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals.