Framer Tutorial: From Design to Code, Components and Beyond

Step-by-step tutorials that’ll help you create stunning Framerprototypes in no time.

Take a look at the example prototypes below. They were all made with Framer. In this tutorial, I’ll walk you through the foundations of Framer and teach you how to make your very own prototype.

Framer launched a new version recently, and the prototyping market will never be the same. The Framer prototyping tool has always been the most useful when it came to accurate and limitless prototyping, though it was a hard tool to master. Now, things have changed. Since the launch of Framer Design , you can now design your prototype directly inside Framer and then develop it into a fully-functional prototype without any third-party software or coding skills.

I’ll teach you how to use simple Framer code logic, no prior programming knowledge needed. You will learn how to combine the best features from both Design and Code mode 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 and download a trial version. They give you two weeks of their fully-functional demo, and trust me, that is more than 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 around with them a bit. When you’re done, it’s time to start prototyping.

(In this Framer tutorial, I will focus on creating prototypes directly in Framer, although there are other ways to use this tool. For instance, you can import designs from Sketch and Figma or start directly in the Code mode. I will cover these other workflows in a different tutorial.)

The All-new Framer — Design Mode

In this article, we will create these three cool prototypes within minutes, using minimal code: basic interactions, scroll component, and PageComponent.

The newest version of Framer has a great new feature: Design mode. It allows you to work in 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 design an App Screen:

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

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.

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.

Step 3: Add a title.

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

Step 4: Tell Framer which layers are interactive.

We have one more step before starting to animate our Framer prototype. At this point, we just need to tell Framer which layers will be interactive. Just click the dot (Target Icon) next to the layer name inside the layer panel. You only need to name the layers you will want to animate, but it’s good to name each layer properly for further use. I named my layers card and button.

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:

Here is a short list of properties that are useful for aligning and calculating layer positions 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

You’re All Set Up — Let’s Start Our Project

Now that we’ve created different types of Framer layers, it’s time to get started in our interaction playground.

Finally! The boring part has come to an end. Now it’s time for the interaction design part. Download the whole prototype here to follow along with the code: 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’ll keep it simple. Let’s create a button that reacts when you tap it, using the following command:

layerA.onTap (event, layer) ->

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

Step 2: Adding animation to the event.

Now that we have our trigger, let’s set the animation. 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 directly in the preview window.

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 only works once right now, but we can fix that. The reason the animation only triggers once is because we haven’t set an event to happen after the animation is finished. After the first animation ends, we have to reset all parameters to the original state.

Step 3: Resetting animation.

To do so, we add another event to stop the animation:

This time the code snippet added by Framer will look like this:

button.onAnimationEnd (event, layer) ->

So, when the animation on the button layer has finished, we add the next animation to reset the button’s 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 a button that reacts according to a specific action.

2. Creating Different States for Card Layer Interactions

Ok, now you know how to design an animation and trigger it from a specific action. More often than not, you’ll also need to design the different states of a layer. You can create multiple states for the same layer by changing 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. Notice that you’ve now jumped into state edit mode so go ahead and add styling as you please.

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

In this example, 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 much better for you:

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 to change the speed and curve of the animation between states:

card.animationOptions =
	curve: Spring
	time: 0.8

There is a lot more that you can do with Events, but at this point, you should be able to create almost any basic interaction. If you get stuck, check out the Framer documentation, it’s one of the best-written docs I’ve ever seen.

Speeding Up Your Workflow in Framer: Components

The time has come to speed up your workflow by using components. To get the most out of the tutorial from this point on, download this prototype: https://framer.cloud/WTySI

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.

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. Instead, 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 which 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

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

2. The Page Component: Swiping Screen to Screen

Using the PageComponent, Framer lets you swipe between screens and automatically snap 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. This is where all the magic happens:

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’s 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, with some slight modification. Instead of one card image, this time I imported two images.

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 accordingly: card1 and card2.

Step 3: Adding layers to the page component.

At the end of that block of 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.

PageComponent allows you to swipe through screens, both horizontally and vertically. Your prototype is now ready to go!

Final Word

That’s all, folks! I hope you found this Framer tutorial useful in helping you get started on your journey to master the most powerful prototyping tool on the market. You should also consider joining the Framer group on Facebook. It’s a huge community and it’s extremely helpful for 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!

This tutorial was originally published at www.toptal.com. Toptal is an exclusive network of the top freelance software developers, designers, and finance experts in the world. Many large companies rely on Toptal freelancers for their most important projects. Check out the top 3% of Framer-proficient designers on Toptal and hire one today!