Create prototypes that feel like real apps.

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

Download a free preview Get the eBook

Current edition: 2.6 (January 26, 2018)

$99 iPhone

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