First steps

Let’s get our feet wet by trying out a few simple things.

Open Framer and click the + button to get an empty document (or select New from the File menu) and go to the Code tab.

Save your project as First steps.

By default, you’ll have Canvas as the selected device, which is good because it has a clean white background and will show everything at its actual pixel size.

First things first: Framer works with layers. Everything you see in a prototype is a layer. You can draw layers in Design (or import them), but here, to better understand the basics, we’ll create them in Code.

Create a new Layer by typing ⇧⌘N.

layerA = new Layer

If you prefer to write your code manually, make sure to type Layer with a capital ‘L’.

You’ve created a layer with the name ‘layerA’. You can use any name, even ‘Bob’ or ‘Susie’, but it’s best to give your layers descriptive names, like ‘navigationBar’, ‘timeline’, ‘avatar’, ‘saveButton’, etc.

The above line actually says the following:

layerA is a new object of type Layer.

Later we’ll talk about what objects precisely are.

It’s not obligatory, but the convention is to start the names of your layers with a lowercase letter. So that would be ‘bob’ and not ‘Bob’.

You cannot use spaces, so for longer names, it’s best to use camel case. E.g.: ‘navigationBar’, or ‘navBar’ for friends.

Ah, and one more thing: don’t start your names with a number, so no ‘1stLayer’. But names like ‘layer1’ or ‘layer1ofMany’ are perfectly okay.

We didn’t add any details about the size, position or even color of our layer, so Framer is using default values.

Let’s give ‘layerA’ some properties.

Click the little handle next to layerA to put it in edit mode.

When a layer is in edit mode, you can change its position by dragging it, and change its dimensions by dragging the handles.

Position the layer 150 from the left (x) and 400 from the top (y), and make it 350 by 100 points. Instead of dragging the layer you can also enter these values in the Layer Panel.

Or you can be a hacker and type everything directly in code. Type a ⇥ tab to indent the lines with properties.

layerA = new Layer
	x: 150
	y: 400
	width: 350
	height: 100

You can put different properties on the same line, if you want, by separating them with commas:

layerA = new Layer
	x: 150, y: 400
	width: 350, height: 100

You can even use math operators like +, -, *, and / (add, subtract, multiply, divide). So when you’re figuring out the correct position of a layer, you can do things like: “Ten more points to the right… and maybe another four.” (150+10+4)

Try this:

layerA = new Layer
	x: 150+50
	y: 400/2
	width: 350-50
	height: 100*3

When you use a calculation (or anything but a number) to set a property, you’ll see a little padlock appear in the properties panel.

It’s the panel’s way of saying: “I’m not touching this!”, and that’s good because you wouldn’t want it to override your custom code.

By the way, using math operators in the Properties Panel will directly calculate the result (like in Framer Design, or in Sketch).

The result is a 300 by 300 pt square, positioned 200 pt from the left and the top.

So yes, the same as this:

layerA = new Layer
	width: 300
	height: 300
	x: 200
	y: 200

We’ll now change the default background color and give the square a touch of border radius.

Pro tip: To get to edit mode you don’t always have to click the little handle, you can just type ⌘E when your cursor is somewhere in the layer’s code block.

Set a border radius of 50 pt by dragging the little handle in the layer’s top left corner.

The background color can be picked in the properties panel. The panel will always write an “rgba()” value, even when you select a crayon, or one of the web safe colors in hex notation like #00FF00.

But you can, in fact, use any CSS color notation in your code. Try "red", one of the CSS named colors.

layerA = new Layer
    width: 300
    height: 300
    x: 200
    y: 200
    borderRadius: 50
    backgroundColor: "red"

Note that whenever a value is not a number but text, like the string "red", it must be enclosed in quotation marks.

You can also change a layer’s properties after having created it.

Let’s make the square orange and convert it to a circle by giving it a border radius of 150.

layerA = new Layer
    width: 300
    height: 300
    x: 200
    y: 200
    borderRadius: 50
    backgroundColor: "red"
layerA.backgroundColor = "orange"
layerA.borderRadius = 150

These two new lines override the earlier backgroundColor and borderRadius values. You can change the properties of a layer at any time.

Note that for changing existing properties you have to use dot notation, and write equality signs instead of colons.

Another way to change properties is to set them on props. In this case, you do write them in the same way as when creating a layer (and you have to type less).

layerA = new Layer
    width: 300
    height: 300
    x: 200
    y: 200
    borderRadius: 50
    backgroundColor: "red"
layerA.props =
    backgroundColor: "orange"
    borderRadius: 150

Enough with the static layers, let’s move some stuff around. Time to animate!