Prototyping is a first-class member of the modern digital product design and development toolkit. Framer is a prototyping tool that lets you turn static mockups into interactive prototypes and to experiment quickly with dynamic, native-feeling animations and interactions. It integrates seamlessly with design tools, exports smoothly to mobile devices, and is powered by the language of the modern web, Javascript. Use Framer Studio to design and build responsive interactions, explore advanced animation techniques, and build data-driven UI prototypes together. You’ll leave empowered to not just design the look or create the functionality of the products you build, but also to control the user experience and feel.
This course and others like it are available as part of our Frontend Masters video subscription.
Published: July 8, 2015
Table of Contents
Introducing Framer
Intro & Agenda
Jay Stakelton begins the course with a brief introduction of himself and an overview of what he’ll be covering. Slides and resources for this course are posted to http://bit.ly/learnframer - http://bit.ly/learnframerUI Prototyping
Prototyping helps to develop ideas and create a shared understanding of your product. It can also lead to more effective feedback loops. Jay explains why he likes to prototype and shares some helpful tools for prototyping interaction and animation.Framer Examples
Framer allows for near-real-time feedback and integrates nicely into most design workflows. It also has device mirroring giving developers an immediate workable mobile prototype. Jay shares a few examples of Framer prototypes he’s created and a few made by other companies.Under the Hood
Jay spends a few minutes explaining the anatomy of a Framer. Framer Studio creates projects which are static websites. Animations are handled using the requestAnimationFrame() method. The entire source code is viewable on the Framer GitHub account.Framer Studio Tour
Framer Studio gives developers easy access to the Framer documentation, a web view with inspector, snippets, and other workflow features. Jay explores some of these features as he walks through the Framer Studio GUI. He also demonstrates how to share Framer projects.Exercise 1: Ship a Framer Prototype
In this exercise, you will ship a Framer prototype to your mobile device.CoffeeScript Primer
Jay gives a brief overview of CoffeeScript which is the language used inside Framer Studio. CoffeeScript is a minimal, legible, and expressive way to write JavaScript. Punctuation is almost always optional and you can typically leave out parentheses and curly brackets.
Framer Fundamentals
Layers
A layer is a rectangle that draws elements. Layers can contain HTML, images, videos or other layers. Jay walks through a couple layer examples and explains some of the properties and methods in the Layer API. He also demonstrates how to nest layers and control their stacking order.Layer Properties
Properties describe how a layer appears. They can be set at initialization of a layer or at anytime afterward. Properties can affect position, rotation, visibility, and almost any CSS3 property or filter.Layer Events
Events are typically caused by user interaction but can also be triggered when an animation starts or ends. Layers listen for events using the Layer.on function. Within the event, you can reference the layer using the this or @ keywords.Code Structure
Jay spends a few minutes talking about how he structures his code in a Framer project. He also demonstrates how to use CoffeeScript classes to extend the Layer class and create reusable objects.Exercise 2: Interacting with Layers
In this exercise, you will create your first Framer interaction. The interaction will display a filled-in heart after the user taps the outlined heart.
Interactivity
Animation Basics
In Framer, any property with a numeric value can be animated. Animations run from a start value to an end value. Typically start values are inferred from the target layer and end values are specified in the animation properties.Dragging & Scrolling
Dragging can be enabled for any layer through the draggable property. Scrolling can be applied to any layer too. However, in order to scroll, the layer must have a sub-layer that exceeds its width or height. Jay demonstrates dragging and scrolling. After, he talks about masking copying layers.Video
The VideoLayer.player API is identical to the HTMLMediaElement API so any properties, methods, and events in HTMLMediaElements are accessible in Framer. After looking at how to add interactivity to video, Jay revisits click events to discuss click-coordinates.Exercise 3: Material Response
In this exercise, you will create a material response button that, when tapped, displays a masked animation from the location of the tap.
Design Workflow
Importing Overview
You can create Framer layers from any open Sketch or Photoshop file. Framer respects nesting and layer depth from the source file. Hidden layers aren’t imported. Jay looks at the import process and how Framer organizes imported files.Importing from Photoshop
Photoshop has the tightest integration with Framer. Layer sets in Photoshop should have unique names and should not contain numbers.Importing from Sketch
With Sketch, art-boards are also imported as named layers. Any layer group with a negative coordinate will get clipped and if an asset is entirely off the art-board or has a duplicate name, it will be omitted. Because importing some assets from Sketch can be tricky, Jay recommends the drag-and-drop approach.Exercise 4: Prototype an App
In this exercise, you will import assets from either Photoshop or Sketch. After importing the design, you will make the content scrollable, animate the navigation opening and closing, and make the photo button functional.
Animation Workshop
Animation Objects
Animation objects allow you to start, stop, reverse and chain animations. Jay creates a few animations and demonstrates how to prevent animation collisions using the isAnimating and animateStop methods.Bezier Animation Curves
Animation curves control the rate of change of animated parameters over time. Bezier Curves are animation curves described by four points. For example, the preset easing function like ease-in and ease-out are all bezier animation curves. After demonstrating bezier curves, Jay introduces spring curves and path animation.Setting Defaults & Layer States
Jay explains the Framer.Defaults object and how it can be used to change the default behavior of animations or layers. He also introduces Layer States which are a set of property values. Layers can have multiple states and state changes can be instantaneous or animated.Sequencing & Cascading
Jay demonstrates how to sequence and cascade multiple animations with the delay property. Sequencing triggers the simultaneous execution of all animations. Cascading will stagger the animations creating an overlapping motion effect.Exercise 5: Animation Workshop
In this exercise, you will recreate the Google Inbox navigation. The navigation consists of five circles and labels animating up from the compose button.Exercise 5: Solution
Jay walks through the solution to Exercise 5.
Responsive UI
Dynamism
Dynamic interfaces respond in real-time to user interaction. Framer allows layer properties to be updated based on changes to other properties. To illustrate this, Jay updates a layer’s drop shadow properties as the layer is dragged by the user.Modulation
You can use the Utils.modulate() method to translate a number between two ranges. It maps one range of values to another range and allows for high and low value limits. While demonstrating modulation, Jay introduces property change events.Resistance
The further you pull a rubber band, the more resistance it build up. Drag resistance can be simulated in Framer by modulating the speedX and speedY properties of draggable layers.Velocity
With any draggable object, the calculateVelocity method can be used to retrieve the x and y velocities. Modulating these values allows you to simulate acceleration and deceleration.Thresholds
Jay explains the concept of thresholds and how they create a more responsive user interface. For example, an object may snap to a location when it is dragged within a certain threshold.Exercise 6: Card Swipe UI
In this exercise, you will create a card-swipe interface which will tint and rotate a card depending on the drag direction.Exercise 6: Continued
Jay continues he walkthrough of exercise 6 by adding the interactivity and animation.
Data-driven Prototypes
Layers & HTML
Every layer has an html property which allows for the injection of HTML text. The layer can be styled with its style property or insertCSS property. Jay spends a few minutes reviewing how Framer handles HTML and CSS before diving into some more complex styling scenarios.Pulling in JSON
Since Framer is JavaScript-based it will work with almost any JavaScript API. This means it’s possible to incorporate JSON into your prototype. Once the data is loaded, Jay demonstrates how to iterate through it and generate user interface elements.Using Firebase
Firebase stores and synchronizes data between client applications. It uses a JSON API and can give prototypes a heightened sense of realism. Jay spends a few minutes walking through the interface of Firebase and demonstrating how to pull data from Firebase into a Framer prototype.Exercise 7: “Smart” Prototypes with Firebase
In this exercise, you will build a pizza slice finder that will use Firebase to keep track of how many likes a pizza location receives.