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 explains how to create your own code components. This Framer course also doubles as an extended manual that you’ll often refer to.

Last update: July 19, 2021

 

200+ example prototypes made with code

100+ Motion projects in CodeSandbox

100,000+ words of detailed explanations

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

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

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

Shuo Yang
cargocollective.com/frommainland

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 well laid out and easy to understand, especially from a developer standpoint.

Anthony Kiplimo
twitter.com/AnthonyLimo

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

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

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 Updated
    6. Overriding Code Components
  2. Code Components
    1. Code Components
    2. A Simple Code Component
    3. Why Use <Frame>s?
    4. Compatibility
    5. Including Other Components Updated
    6. Customizing an Existing Component Updated
    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
    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
    4. Drag Elastic
    5. Drag Momentum
    6. Inertia Animations
    7. Modify Target
    8. Min and Max
    9. Snap to Grid Example
    10. Snap to Corner Example
    11. Drag Events

Upcoming 👨‍💻:

  • The use of code in Framer is improved and streamlined. I’m currently updating all example projects + the relevant chapters.
  • New section: Tracking gestures with MotionValues
  • A global, introductory ‘Framer’s Toolbox’ section
Photo of Tes Mat

Author: Tes Mat

I’m a web and iOS developer who was looking for the best prototyping tool. I tried eight of them, liked Framer (Classic) the most, and wrote an extended manual about it. Then, when the current version of Framer launched, I wrote this manual. I’ve also taught Framer workshops and courses at Projector in Kyiv.