The Framer book explains everything about using code in Framer. It shows you how to create different kinds of animations, has all the details about overrides, and teaches you how to create your own code components. This Framer course also doubles as an extended manual that you’ll often refer to.

Last update: April 19, 2021

 

200+ example prototypes made with code

100+ Motion projects in CodeSandbox

100,000+ words of detailed explanations

Framerbook is the hidden Framer manual I always turn to. It keeps up to date with Framer’s changes and is extremely well written.

Kevin Cannon
Product Designer at Pitch

Tes’ book is my go-to resource for everything to do with Framer. The detailed explanations with accompanying code examples really helps you get to grips with Framer and React. Highly recommended!

Simon Lucas
UX Prototyper at Channel 4

The Framer book is well laid out and easy to understand, especially from a developer standpoint.

Anthony Kiplimo
twitter.com/AnthonyLimo

The Framer book has always been my go-to resource when making something in Framer. It’s incredible how well written the book is.

Utsav Shah
Designer at Bose

This clear and example-rich book gave me a deeper understanding of Framer and React. As a designer, I nowadays enjoy opening up the Code tab to design by code.

Markus Lindmark
UX Designer at HiQ

Seriously concise info about Framer that covers most of what you want to learn. Tes has a great way of explaining a broad range of concepts from simple to more complex.

Sascha Michael Trinkaus
UX Designer at GoDaddy Inc.

The Framer book is like a magic cheatsheet for when I get stuck.

Shuo Yang
cargocollective.com/frommainland

With the Framer book, I have a reliable source which is incredibly well made. Structure and writing are just excellent.

Marie Schweiz
Freelance Interaction & UX Designer

Packages

Table of contents

  1. Overrides
    1. Overrides
    2. Framer’s Data Object
    3. Using CreateStore
    4. Overriding Design Components
    5. Overriding Smart Components
    6. Overriding Code Components
  2. Code Components
    1. Code Components
    2. A Simple Code Component
    3. Why Use <Frame>s?
    4. Compatibility Updated
    5. Including Other Components
    6. Customizing an Existing Component
    7. Property Controls
  3. Animation
    1. Animation Free
    2. The Animate Property Free
    3. The Transition Property Free
    4. ‘While’ Animations and Initial Free
    5. Variants
    6. Hooks
    7. The useState() Hook
    8. Animate Presence
    9. The useCycle() Hook
    10. The useAnimation() Hook Updated
    11. Keyframes
    12. Tips for Overrides
    13. Animatable Properties
    14. Animation Types
    15. Animating Scroll Position
    16. API Overview Free
    17. Example Animations Free
  1. Framer Motion
    1. Framer Motion Free
    2. Create React App
    3. CodeSandbox
    4. Differences With the Framer API
    5. Automatic Layout Animations
    6. Shared Layout Animations
    7. Layout ID
    8. Scroll-based Animations
    9. SVG Animations
    10. Drag Controls
    11. Routing
  2. Smart Code Components
    1. Smart Code Components Free
    2. Props Versus State
    3. Passing Down Props
    4. Sharing State
    5. Letting a Prop Change the State
    6. Simple But Smart
    7. iOS Segmented Control Free
  3. Dragging
    1. Dragging
    2. Axis and Direction Locking
    3. Drag Constraints Updated
    4. Drag Elastic
    5. Drag Momentum
    6. Inertia Animations
    7. Modify Target Updated
    8. Min and Max Updated
    9. Snap to Grid Example
    10. Snap to Corner Example Updated
    11. Drag Events Updated

Upcoming 👨‍💻:

  • Update of iOS Segmented Control
  • New section: Tracking gestures with MotionValues
  • A global, introductory ‘Framer’s Toolbox’ section