Framer Cheat Sheet: Page components

This cheat sheet is for people who are starting out — as well as a reference for more experienced users. Pages allow you to create structured, realistic and dynamic prototypes. They also save a whole lot of time.

Published in

Designing Humans

7 min readMar 30, 2017

By now you should have a pile of awesomely styled layers and a few awesome loops with state changes — now it is time for a new challenge my friends! Let’s bring everything you already know and put them into pages.

Like the other Cheat Sheets in this series, we will look at the very basics, simple properties and commonly used patterns. This was written for people like me — who aren’t so great at writing code, but are pretty darn good at copy and pasting.

In this Framer Cheat sheet, we will look at the following:

What is a page component
Creating a basic page component
Creating pages with a loop
Page setting
Moving between pages
Common examples
1. page component with step indicators
2. Page component with navigation
3. Page component with page indicator
4. Animating with pages and utilities
5. Scrolling pages
6. Pages with states

1. What is a page component?

Page components help you create pages that you can flick between or navigate to.
Page component: A PageComponent is the parent of the pages. The pages will only be visible where the component is. In the example below, the square is the page component.
Page: A page is a basically a layer — until you say that it belongs to a page component. In the below example, the brightly coloured layers are the pages.

2. Creating a basic page component

To create a page component, you just have to first declare something as a PageComponent. Notice how a page component without pages has a grey overlay.

pageComp = new PageComponent

And then declare another layer as a page. You do this by saying it’s part of a page component’s content. The most common mistake that people make is leaving out the .content after they declare the parent.

pageComp = new PageComponentpage1 = new Layer
   parent : pageComp.content

Now let’s add another page — after all, what is the point of having a one page in a page component.

pageComp = new PageComponentpage1 = new Layer
   parent : pageComp.contentpage2 = new Layer
pageComp.addPage(page2, "right")

3. Creating pages with a loop

Let’s say you need to create 20 pages — it will be a bit of a pain to do each one, so rather use a loop. Use the the x value to put the pages next to each other. To find out more about loops, try this Cheat Sheet.

pageComp = new PageComponentfor i in [0...20]   page = new Layer
      width: 200
      x: 200 * i
      parent: pageComp.content

Referencing a specific page within a loop

If you are familiar with referencing layers within loops, referencing a page is the exact same. You create an array, push the pages into it, then reference the page using the array.

pageComp = new PageComponentpages = []for i in [0...20]  page = new Layer
     width: 200
      x: 200 * i
      parent: pageComp.content  pages.push(page)pages[2].backgroundColor = "#00aeff"

4. Page component settings

Page components have different settings for you to choose how the pages move.

Scrolling directions

By default, pages scroll in both directions. In the below example, the one on the left doesn’t have scrollVerticaldisabled (default), while the one on the right has.

#left example
pageComp = new PageComponent
    scrollVertical: true#right example
pageComp = new PageComponent
    scrollVertical: false

Also try

scrollHorizontal: false

Page animations

Animation is all about having all the right curves in all the right places. And luckily Framer allows you to do just that, by letting you change your animation settings. In the below example, the one on the left is set to default, while the on on the right has a curve: “Spring(100,10,0)".

#right example
pageComp.animationOptions =
   curve: "spring(100,10,0)"
   time: 0.25

Page origins

Page origins defines where the pages should snap to. If you are using the x origin, and the value is 0, the pages will snap to the left of the page component. If it is 1, then it will snap to the right. The default value is 0.5. If you are using the y origin, the 0 value means that it will snap to the top and the 1 value means it will snap to the bottom.

#left example
pageComp = new PageComponent
   originX : 0,5#right example
pageComp = new PageComponent
   originX : 0

Also try:

originY : 1
originY : 0

Velocity threshold

The velocity threshold limits how fast you can scroll through the pages.

#Example on the right
pageComp.velocityThreshold = 6

5. Moving to pages

One of the best reasons to use pages is the ability to quickly switch between them. There are lots a different ways to move between pages (apart from scrolling of course). Use the examples below and see how many ways there are to move between page1 and page2.

pageComp = new PageComponentpage1 = new Layer
   parent: pageComp.content
   backgroundColor: Utils.randomColor()
   
page2 = new Layer
page2.backgroundColor =  backgroundColor: Utils.randomColor()
pageComp.addPage(page2, "right")

Snap to Page

Snap to a specific page. This means that the page component will navigate directly to which ever page you want.

pageComp.snapToPage(page2)

You can also put this in an event, so for example if you click on a button, it will navigate to your desired page.

button = new Layerbutton.OnTap ->
   pageComp.snapToPage(page2)

You can also declare a specific animation when snapping to page.

pageComp.snapToPage(
    page2
    true
    animationOptions = curve: "ease", time: 2
    )

Snap to next page

Snap to the next page in your prototype. By default, the direction is set to “right”.

pageComp.snapToNextPage()

You can change direction by using “left”

pageComp.snapToNextPage("left", true)

Snap to previous page

Snap to the previous page that was active.

pageComp.snapToPreviousPage()

Start at a specific page

While you are building a specific page, it can help to make the prototype start on the page you are building.

pageComp.snapToPage(page2)

6. Common examples

The below are prototypes of some of the common page patterns, that I have used.

1. Page Component with step indicators

Step indicators are used to show how far you are in a process, be it a tutorial or an image slider.

While it is easy to create pages and indicators, the trick comes in when you have to link the two together so that the indicator changes on page turn.

2. Page Component with a navigation bar

Navigation bars can help your users navigate quickly from section to section within your prototype.

3. Page Component with a page indicator

Navigation bars can help your users navigate quickly from section to section within your prototype. Having a page indicator on your navigation bar can help the user identify what page that they are on.

4. Pages and Utilities

Animating with pages, allows you to make really beautiful on boarding screens. Check out this cool IF onboarding prototype by Tes Mat.

5. Scrolling pages

Pages with scrolling can be useful if you are creating contact lists, articles, newsfeeds and more.

To make a scrolling page is pretty simple, you just make the page’s content a scroll component.

pageComp = new PageComponentscroll = new ScrollComponent
   parent: pageComp.contentcontent = new Layer
   parent: scroll.content

6. Pages with states

If you want to have multiple pages visible at the same time — it could be useful to give them active and inactive states.

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 :)