Intro to Framer

In this tutorial, we're going to be introduced to Framer, a code-based design and prototyping tool. We're going to explore the core concepts that make Framer a powerful prototyping option for designers and developers, and we're going to replicate one of the transitions found in the Design+Code app.

Before we begin, download the project files to follow the tutorial. You should open the 'DesignCode-Chapter-New.framer' file to get started but if, at any time, you feel the need to see the solution, you can download here.

When you open Framer for the first time you will see that it has a very familiar UI, very similar to many of the designs apps that we are use to, by default your new project will open on Design mode but you can work independently or combined with Code mode.

Framer's design tab can be broken down into four main parts.

Here we have tools for inserting artboards, rectangles, ovals, text, zooming the canvas and at the bottom, a built-in icon panel.

Like most other design tools, Framer also has a layer panel. However, there are some key differences. We'll go into these in more detail later, so you can understand how layers work in Framer.

You can use the canvas to create artboards for a wide variety of phones, tablets, watches, desktops and even TV's.

When you select a layer on an artboard, a list of available properties for styling and layout appears.

The Code Tab can be divided into five parts.

The sidebar is very similar like in design mode, you have different tools to quickly animate your layers, plus you can import your designs from other apps hitting the import button, you can also quickly access to the framer documentation or inspect your code.

It shows you all your layers similar like in design mode. If you hover any of your layers on the Layer Panel you can easily identify it on the preview window. Also if you right click any of your layers you can immediately add an animation, a state or and event.

It is really easy to start coding on framer. It has a very appealing and helpful syntax highlighting, the bottom of the editor area is reserved to show you the errors that you have in your code, and something that we love is the Smart Autocomplete feature that Framer has.

It is a canvas with the render prototype, which gives you real time visual feedback.

From the top of the navigation bar you can select different type of devices, and also, you can detach preview window.

You can access it by clicking on the edit icon. On that panel you will see the different properties of your animation, state or event.

There is a nice feature in Framer called Auto-code, if you modify a layer from the preview window you will see the changes in two more places: on the properties panel and in the code editor area. Auto-code keeps up the code with your visual modifications all the time.

Essential things to know about Framer.

Layers in Framer are very similar to layers in any other design tool, but there are a few small differences that set them apart. We're all used to the concept of grouping in Sketch where you select two or more layers and create a group with those layers. Technically, there are no groups in Framer. Layers 'nest' instead, like divs on a webpage. Take a look at the artboard called 'Page1'. It has a number of child layers. iOSGuide is at the top of this tree and itself contains some child layers. iOSGuideImage contains the heading and body text. These text layers are 'nested' and although they appear below the iOSGuideImage in the layer panel, they actually sit above the image and are still visible on the canvas. Let's see a quick video example of how nesting works.

We need to activated the layers in our design, so we can use them on code mode. The layers activated in design mode are highlighted. To target a layer we just need to click on the small icon next to it.

One of Framers power features is responsiveness by default. Depending on where and how you place layers on artboards, Framer will always try to work out how you want it to respond to changes in screen size. So for example, if you place a layer snapped to the right side of the screen, when the screen resizes, the layer will stay snapped to that position.

The layout system obviously can't predict every situation. As your design gets more complex, it’s worth heading over to the layout panel to make modifications yourself. What’s really awesome about Framer's layout tool is that it gives you a preview of how your layer will behave with currently selected settings. Let's see it in action to get a better understanding of how it works.

The core concepts of prototyping in Framer can be broken into four parts. They're simple but mastering them will take your prototyping to the next level.

Layers in Framer are not unlike the layers you'll find in Sketch. When you create a layer, you can style it and add images, texts and videos. Layers can be parented to other layers and animated too. They're the building blocks of Framer.

Animation is what brings your layers to life. You can animate layer properties like background color, height, width, size, opacity, border radius , etc…

States are stored sets of layer properties. You can create multiple states of pretty much anything in Framer and switch or animate between them.

Events are used to detect and respond to user input or interaction like taps, double taps, drags and more. Normally, events trigger animations or state changes.

For this exercise we will work only on the Code Tab, I already added the designs on the Design Tab and I targeted all the different layers that we will use. What we will do in the exercise, is to replicate the animation when we tap into one of the section cards, this card will unfolds showing us the content of the section, and then we will animate when we tap on the close button and the card folds again.

Most of the first part of our code will focus to set up all our different elements into the artboard, yet in parts Transition 1 (Open Event) and  Transition 2 (Close Event), we will work on the unfold and fold animations respectively.

Before we get into the fun stuff, we're going to do a bit of set up to our exercise.

First we're going to define the spring curve for the animations that we'll use in our example. Then we will write some text that will show up the moment when the card will unfold, you will see it again almost at the end of the exercise.

And finally we will set the default states for the Play and Close buttons.

We will move out of the canvas the close button, then we will scale down the play button to .5 and give an opacity 0.

# Setup

defaultSpring = "spring(280, 27, 5)"

textExample = "Three years ago, Apple completely revamped their design language for modern users. It is now much simpler, allowing designers to focus on animation and function rather than intricate visual details."

closeBtn.y = -40 
playBtn.scale = .5
playBtn.opacity = 0

Then we will select all this code, right click and select 'Fold'. This is where Framer's 'Code Fold' feature really shines. This will create a new section for this code.

It's good to keep this away from our main code to keep it clean.

To introduce paging to our cards, we need to use a PageComponent.

We will make it a child layer of PageView which is the layer from the Chapters artboard in design it should be parented to. Then the Y position is set. As the PageComponent now has PageView as a parent layer, any position values it's given is in relation to its parent. When we set it's Y position to 60, what we're actually doing is setting it 60px down from the top of the PageView layer. To offset this positioning, we've set our PageComponent's height with a simple calculation. This is a quick way to set the value of a property on a layer, if you don't want to set it manually that is. As this PageComponent should only scroll horizontally, we've set scrollVertical to 'false'. Finally, setting the contentInset gives our pages some margin on the left and right. Feel free to play around with some of these values to see how they change the layout.

pageComp = new PageComponent
    parent: PageView
    y: 60
    height: PageView.height - 60
    width: PageView.width
    scrollVertical: false
    contentInset:
        left: 10
        right: 10

You now have the PageComponent set up, but it needs some content. Adding content is extremely easy. We just need to add pages to our PageComponent.

pageComp.addPage(Page1)
pageComp.addPage(Page2)

The code inside the brackets is the layer, or in this case the artboard we want as the content of that page.

It's important that some states are set up for elements so we can animate between them. Let's set up the Play Button.

playBtn.states.Show =
    opacity: 1
    scale: 1
    animationOptions:
        curve: defaultSpring

playBtn.states.Hide =
    opacity: 0
    scale: .5
    animationOptions:
        time: .2

Here we have two states 'Show' and 'Hide'. Think of states as a way of storing properties we can toggle between. We've also added animation options so we get a nice transition between the two states controlled by the spring curve we created in setup. Let's do the same with the Close Button.

closeBtn.states.Show =
    y: 40
    animationOptions:
        curve: defaultSpring

closeBtn.states.Hide =
    y: -50
    animationOptions:
        time: .2

Next, we'll store some default properties from the iOS Guide layer we'll need to use later.

origX = iOSGuide.x
origY = iOSGuide.y
origSize = iOSGuide.size
origPos = iOSGuide.screenFrame

Like what we've done with our Play and Close buttons above, we'll set up states for the iOSGuide and the image inside it.

iOSGuide.states.Open =
    size: Screen.size
    x: 0
    y: 0
    borderRadius: 0
    animationOptions:
        curve: defaultSpring

iOSGuide.states.Close =
    size: origSize
    parent: Page1
    x: 23
    y: 258
    borderRadius: 15
    animationOptions:
        curve: defaultSpring

iOSGuideImage.states.Expanded =
    height: 400
    animationOptions:
        curve: defaultSpring

iOSGuideImage.states.Initial =
    height: 250
    animationOptions:
        curve: defaultSpring

The final bit of setting up before we begin coding the transition is to add some extra content to the iOSGuide, as seen in the example. Framer's TextLayer makes this easy.

articleText = new TextLayer
    text: textExample
    parent: iOSGuide
    x: 25
    y: 430
    width: Screen.width - 50
    fontSize: 17
    fontFamily: "SF-Pro-Text-Regular, -apple-system"
    lineHeight: 1.75
    color: "#000"

headerText = new TextLayer
    text: "Core Philosophies"
    parent: iOSGuide
    x: 25
    y: articleText.maxY + 20
    width: Screen.width - 50
    fontSize: 17
    fontWeight: 900
    fontFamily: "SF-Pro-Text-Bold, -apple-system"
    lineHeight: 1.75
    color: "#000"

We want the transition to begin when the iOSGuide is tapped. To do this, we're going to use the 'onTap' event.

iOSGuide.onTap ->

When this happens, we want to remove it from the PageComponent and parent it to the Chapters screen. This is so when it expands, it isn't clipped by its parent layer and appears above everything else. By default, parenting the iOSGuide layer to a new layer on an event would change its position on screen, but we want the transition to start from the same position it was in when inside the PageComponent. To do this, we're going to use one of the properties from iOSGuide we stored earlier, called 'screenFrame'. In Framer, this property gets the exact position and size of an element on screen.

   this.parent = Chapters
   this.screenFrame = origPos

For now we'll use 'this'.

Next, let's change the appearance of the Status Bar and place the iOSGuide under it. This is obviously optional but when designing for iOS, it's good practice to make use of both light and dark versions of the Status Bar so there's always good contrast when changing the context it's displayed in.

   StatusLight.visible = true
   StatusDark.visible = false
   this.placeBehind(StatusLight)

We're going to use the states we set up earlier and animate the iOSGuide and the iOSGuideImage to these states.

   this.animate("Open")
   iOSGuideImage.animate("Expanded")

To animate to different states, we've used the .animate() method and passed in the name of the state we want to animate to. The state name should always be a string- so, it should be enclosed in quotation marks.

We should now have a transition between screens. For the moment, there's no way to reverse this though. We need to show the Close and Play buttons. To do this, we'll use .animate() again and pass in the state "Show" for each to animate to these states. We'll also place them above the iOSGuide to make sure they're visible.

    closeBtn.animate("Show")
    closeBtn.placeBefore(iOSGuide)
    playBtn.animate("Show")
    playBtn.placeBefore(iOSGuide)

We need a way to close the article screen and return back to Chapters. To do this, we're going to add an 'onTap' event to the close button and reverse our components back to their initial states.

closeBtn.onTap ->
    iOSGuide.animate("Close")
    iOSGuideImage.animate("Initial")

    StatusLight.visible = false
    StatusDark.visible = true

    closeBtn.animate("Hide")
    playBtn.animate("Hide")

The final thing we need to do is put the iOSGuide back into the PageComponent when the close animation ends. To do this, we're going to listen for when the iOSGuide's current state name is 'Close’. This is because we're going to .onAnimationEnd to check for when it stops animating, but we don't want to put it back into the PageComponent when the opening animation ends.

iOSGuide.onAnimationEnd ->
    if iOSGuide.states.current.name is "Close"
        this.parent = Page1
        this.x = origX
        this.y = origY

We used an 'if' statement to check if the iOSGuide's current state name is 'Close', and if it is, do something. In this case, putting it back into Page1 in the PageComponent, and setting it's X and Y properties back to their initial values inside Page1, which we stored in origX and origY earlier in the prototype.

Now we can tap on the card, and we can see how it opens, and then we can tap on the close button and we can see how it closes. If we want we can add an iPhone frame to our prototype, as well.

Special thanks to John Sherwin and Daniel Nisttahuz for co-authoring this section.