The Framer book - An eBook course for learning how to build prototypes with Framer

Create prototypes that feel like real apps.

Learn CoffeeScript, understand Framer, prototype everything you can imagine.

Edition 2.6 (January 26, 2018)

What You're Getting

Everything you need to become a UX 🦄

Mac, iPad, and iPhone

Full Chapters List

Edition 2.6 (January 26, 2018)

Part 1: Introduction

  • Why use Framer?
  • What is Framer?
  • About this book

Part 2: Intro to Framer

  • Installation
  • A tour of the Framer interface
  • Framer Design
  • First steps
  • Animation basics
  • Previewing your prototype

Part 3: CoffeeScript fundamentals

  • Introduction
  • Variables
  • Decision making
  • Functions
  • Arrays
  • Objects
  • Methods
  • Loops
  • More CoffeeScript

Part 4: Layers

  • Types of layers
  • Image layers
  • Video layers
  • Dimensions
  • Position
  • Background color
  • Border radius
  • Border
  • Rotation
  • Filters
  • Shadow
  • Opacity
  • Visibility
  • Layer hierarchy
  • Stacking order

Part 5: Text Layers

  • Setting and changing the text
  • Templating
  • Auto-sizing
  • Padding
  • Truncation
  • Color
  • Background Color
  • Font Size
  • Font Family
  • Font Weight
  • Font Style
  • Line Height
  • Font
  • Text Align
  • Shadow Color
  • Shadow X
  • Shadow Y
  • Shadow Blur
  • Letter Spacing
  • Word Spacing
  • Text Transform
  • Text Decoration
  • Text Indent
  • Direction
  • Setting other CSS properties
  • Using common layers for text

Part 6: Animation

  • Three ways to animate
  • Using the animate() function
  • Time, Delay, Repeat and Looping
  • A layer’s animation options
  • Using the Animation object
  • Animation curves
  • Animating colors
  • All animatable properties

Part 7: States

  • Creating states
  • Switching between states
  • Cycling through states
  • Editing states
  • Special states
  • Listing all the states

Part 8: Colors

  • Colors are objects
  • Lightening or darkening colors
  • Changing a color’s saturation
  • Mixing colors
  • Generating a random color

Part 9: Gradients

  • Combined with Background color
  • Size of the gradient
  • More color stops
  • Animating gradients

Part 10: Events

  • Basic use
  • Tap events
  • Native browser events
  • Pan events
  • Drag events
  • Swipe events
  • Multi-touch events
  • Accessing gesture event properties
  • Removing an event handler
  • Ignoring events
  • Animation events
  • State change events
  • Scroll events
  • Paging events
  • Image events
  • Transition events
  • Value change events
  • Change events

Part 11: Draggable layers

  • Constraints
  • Overdrag, Momentum, and Bounce
  • Changing the speed
  • Automatic direction lock

Part 12: Pinchable layers

  • Changing the threshold
  • Scaling from the layer’s center
  • Tweaking the scaling behavior
  • Tweaking the rotation behavior

Part 13: Scrolling

  • Basic use
  • Content inset
  • Quickly adding content
  • Changing the scroll behavior
  • Changing the scrolling speed
  • Wrapping

Part 14: Paging

  • Basic use
  • Adding pages
  • Creating many pages
  • Making more pages visible
  • Adding space between pages
  • Setting the initial page
  • Wrapping

Part 15: Slider component

  • Customizing the slider
  • The knob
  • Creating a vertical slider
  • Minimum, maximum, and current value
  • Value change event
  • Setting the value of the slider
  • Knob position vs. slider value

Part 16: Range slider component

  • Customizing the slider
  • The knobs
  • Creating a vertical slider
  • Minimum, maximum, and current values
  • Value change events
  • Setting the values of the slider
  • Knob positions vs. slider values

Part 17: Flow component

  • Difference with the other components
  • Basic use
  • Headers and footers
  • Overlays
  • Current, Previous, and Stack
  • Custom transitions
  • Tips and tricks

Part 18: Utilities

  • Timing utilities
  • Math utilities
  • Utilities for arrays
  • Random value generators
  • Labeling layers
  • Adding custom CSS
  • Platform detection
  • More utilities

Part 19: Global values

  • Background Layer
  • Screen size
  • Framer defaults
  • Device settings

Part 20: Importing from Sketch, Figma, or Photoshop

  • How to import
  • Groups become layers
  • Child layers are directly accessible
  • How does importing work?
  • Tips for Sketch
  • Tip for Photoshop

Part 21: Let’s make something!

Photo

Frequently asked questions

The_Framer_Book_Preview_smaller

Be notified of discounts, updates and new content



( about five emails a year )