UI Prototyping with Framer.js
This course is outdated and does not reflect our current course standards or industry best practices.
Table of Contents
Intro & AgendaJay 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
UI PrototypingPrototyping 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 ExamplesFramer 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 HoodJay 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 TourFramer 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 PrototypeIn this exercise, you will ship a Framer prototype to your mobile device.
LayersA 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 PropertiesProperties 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 EventsEvents 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 StructureJay 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 LayersIn this exercise, you will create your first Framer interaction. The interaction will display a filled-in heart after the user taps the outlined heart.
Animation BasicsIn 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 & ScrollingDragging 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.
VideoThe 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 ResponseIn this exercise, you will create a material response button that, when tapped, displays a masked animation from the location of the tap.
Importing OverviewYou 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 PhotoshopPhotoshop has the tightest integration with Framer. Layer sets in Photoshop should have unique names and should not contain numbers.
Importing from SketchWith 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 AppIn 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 ObjectsAnimation 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 CurvesAnimation 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 StatesJay 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 & CascadingJay 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 WorkshopIn 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: SolutionJay walks through the solution to Exercise 5.
DynamismDynamic 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.
ModulationYou 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.
ResistanceThe 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.
VelocityWith 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.
ThresholdsJay 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 UIIn this exercise, you will create a card-swipe interface which will tint and rotate a card depending on the drag direction.
Exercise 6: ContinuedJay continues he walkthrough of exercise 6 by adding the interactivity and animation.
Layers & HTMLEvery 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.
Using FirebaseFirebase 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 FirebaseIn this exercise, you will build a pizza slice finder that will use Firebase to keep track of how many likes a pizza location receives.