Framer Cheat Sheet: Loops & arrays
This cheat sheet is for users with a bit of experience. Loops allow you to create multiple layers while arrays allow you to store information. Together, you can create really powerful and flexible prototypes.
I wrote this series of Framer cheat sheets for people who, like me, are not so great at writing code (but pretty pretty darn good at copy & pasting). We will look at the very basics, simple properties and commonly used patterns. To see more in the series, check out The School of Do.
In this Framer Cheat sheet, we will look at the following:
- What is a loop
- What is an array
- Creating a loop
- Spacing layers in a loop
- Interactions in a loop
- Importing values from an array
- Pushing layers into an array
- Run a loop through an array to change all layers
- Common examples
1. What is a loop
Are you a lazy arse? me too. Luckily, laziness pays off when it comes to loops. You start learning to think smart as opposed to hardcoding everything.
To prove my point — let’s say I need to make 3 layers.
To hardcode it, it takes 21 seconds — but imagine I needed to make 25 layers.
But to use a loop it takes 11 seconds. See how easy that is.
Just compare these two side by side.
2. What is an Array
An array stores information. This information can be images, names, values, booleans (true / false), layers and more. Think of an array as a list, or a simple database.
You can reference an array using square brackets [].
#This is an empty array
names = []#These arrays have values
names = ["Mary", "Steve", "Mike", "Jane", "Sue"]
numbers = [ 2345, 3456, 6578, 5672, 23467]
Valid = [true, false, false, false, true]
images = ["cat.jpg", "dog.jpg", "dog 2.png"]
You can also reference a specific item in an array by using it’s position. NOTE: The first position in an array is a zero, and not a one. Don’t ask me why, Im still trying to find my zero finger when I count.
names = ["Mary", "Steve", "Mike, "Jane", "Sue"]names[0] = "Mary"
names[1] = "Steve"
names[2] = "Mike"
3. Creating a loop
A loop allows you to create multiple objects with the same values.
To set up a loop, or a for-loop, just do the following:
for i in [0...15]
layer = new Layer#This example will make 15 layers
You always start a loop with the word for. Following this is your counter — most people use an i, but you can use anything ( in case you are wondering, for Jacksparrow in [0...15] still works). After that, you then have in. Then after that you show from where to where your array will start. Traditionally you start at 0, and end at the number of your choice. Your range will always be between square brackets [] and separated by an ellipsis ....
PRO TIP:
With two fullstops (0..3) the range includes the last number (0,1,2,3). With three fullstops (0...3) , the range excludes the last number (0, 1, 2).
(Thank you German Bauer!)
4. Spacing layers in a loop
Maths. Don’t you miss it? Just kidding, I know you are a designer. Luckily Framer will give you the answer, but you just have to figure out the question.
To evenly space items vertically in a loop, you multiply the height of the layer with the i. Because the i changes value with each loop, the values will change.
for i in [0...8]
card = new Layer
height: 60
y: 60 * iIn using the above example, the y for the first card will be: 60 * [0] = 0, (first card).y = 60 * [0] = 0
(second card).y = 60 * [1] = 60
(third card).y = 60 * [2] =120
5. Interactions in loops
Interactions in loops work the same as normal right?
Try the following:
for i in [0...6]
layer = new Layer
width: 100
height: 50
y: Align.center
x: 110 * i + 10
layer.on Events.MouseOver, ->
layer.backgroundColor = "#00aeff"Did something like this happen:
Even though you hover over the other layers — the last layer will always change. This is because by just says “layer.backgrou..” you are referring to the last layer created. Not necessarily the one you are hovering over. So how do we fix this? We use the word this instead of the layer name in the event’s section.
for i in [0...6]
layer = new Layer
width: 100
height: 50
y: Align.center
x: 110 * i + 10
layer.on Events.MouseOver, ->
this.backgroundColor = "#00aeff"PRO TIP:
You can also use @ instead of this.
So this.backgroundColor = "#00aeff" is the same as @backgroundColor = "#00aeff"
(Thank you Andrew Liebchen !)
6. Importing values from an array into a loop
Arrays can give loops information and loops can populate arrays.
Hot damn — things are about to get real. We are going to find out how an array can give information to a loop. In the below example, the card layer is referencing the names array. The i references a specific part of the array with each loop.
names = ["Mary", "Steve", "Anne", "Mark"]for i in [0...4]
card = new Layer
html: names[i]
x: 200 * i
PRO TIP:
You can use the .length of the array to change the amount of iterations in your loop (see [0...names.length] ). Thank you Rohan Shackleford for reminding me!
names = ["Mary", "Steve", "Anne", "Mark"]for i in [0...names.length]
card = new Layer
html: names[i]
x: i * 200
7. Pushing layers into an array
Now let’s populate an array using a loop. In the below example, we can see the program running each line in the loop. As it get’s to cards.push(card) it pushes a new layer into the array.
In the below example, we first define an empty array, then .push each layer the loop creates, into it. I changed the background color of one of the cards to show you how you can reference a layer within the array.
cards = []for i in [0...4] card = new Layer
x: 170 * i
width: 150
html: i cards.push(card)cards[1].backgroundColor = "#558D7E"
8. Creating a loop that is only as long as an array
You may come across an instance where you want your loop to only be as long as an array, or specified list. By doing the below, you will be able to do just that.
Did your mind just get blown…mine did.
flowers = ["rose", "lily", "tulip", "protea", "lavender"]for flower, i in flowers cards = new Layer
html: flowers[i]
size: 70
x: 80 * i
y: Align.center
9. Run through an array to change all layers
When you make tabs or something of the like, you need to make all the layers inactive, excluding the selected on.
The first option is to hardcode everything. I am a little ashamed to say I did this for way too long.
The second option is to run a loop to go through the array to change every layer in one go — and then set the selected layer to active.
#empty array
bttns = []#loop
for i in [0...6] #creating button
bttn = new Layer
width :100
height: 60
backgroundColor: "#555"
borderRadius: 5
x : 110 * i
opacity: 0.5
#pushing bttn layer into bttns array
bttns.push(bttn) #event
bttn.onTap -> #creating loop to run through bttns
for bttn in bttns #What all the layers will turn to
bttn.opacity = 0.5 #making the selected tab active
this.opactiy = 1
11. Common examples
1. Grid
You can create a grid using a loop within a loop (like the movie Inception…but with loops).
The first loop creates a row (or a column — up to you). You then create another loop within the original one — this one is for the cells. In the below example you can see that the rows are one loop and that cells are another on top of the rows.
Try out the below example to fully get to grips with grids.
2. Creating Pages
Creating multiple pages with a loop is significantly easier than making each one individually.
3. Scroll
Create multiple layers that you can scroll through. This is useful if you are making contact lists.
4. Creating multiple moving things
Need to make loads of raindrops? Snowflakes? random dots? This example might help you.
5. Accordion
In this example, we run the loop through a JSON. This is handy if you want to import a contact list, etc.
Accordion’s can be super useful for opening contact cards and the like. I was largely inspired by this prototype — I don’t know who created it, so if you are reading this, please let me know so I can reference you!
Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update :)
