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
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.
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.
You’re free to use spaces, points, commas or other ‘forbidden’ punctuation marks in Design. They will automatically be replaced by an
_ underscore. Starting the name of a layer with a number isn’t a problem either, because Framer will add a
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 (
400 from the top (
y), and make it
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
/ (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.” (
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
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
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!