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.

All example projects and explanations are up-to-date for the latest versions of Framer Web and Desktop.

Last update: August 5, 2020

Kevin Cannon

“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

Utsav Shah

“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

Anthony Kiplimo

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

Anthony Kiplimo

Marie Schweiz

“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

Sascha Michael Trinkaus

“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.

Simon Lucas

“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 like a magic cheatsheet for when I get stuck.”

Shuo Yang

Design manager


Table of contents

  1. Design Components
    1. Design Components
  2. Overrides
    1. Overrides
    2. Framer’s Data Object
    3. Using CreateStore
    4. Overriding Design Components
    5. Overriding Code Components Updated
  3. Code Components
    1. Code Components
    2. A Simple Code Component
    3. Why Use <Frame>s?
    4. Compatibility with Overrides & Parent Components
    5. Including Other Components
    6. Customizing an Existing Component
    7. Property Controls
  4. Animation
    1. Animation Free
    2. The Animate Property Free
    3. The Transition Property Free
    4. While Hover and While Tap 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 Curves
    15. Animating a Scroll Component
    16. A Frame’s Animation Properties
    17. Example Animations Free
  5. Smart Components
    1. Smart Components Free
    2. Props Versus State
    3. Passing Down Props
    4. Sharing State Updated
    5. Letting a Prop Change the State Updated
    6. Simple But Smart Updated
    7. iOS Segmented Control Free
  6. Dragging
    1. Dragging
    2. Axis and Direction Locking
    3. Drag Constraints Updated
    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

This video shows projects from: Animation, Property controls, and Dragging

The above video is from a while back. The Animations section, for instance, now has about twice the amount of content:

Questions? Check the FAQ.

Join the Framer book mailing list

± 6 emails/year


We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

3 months ago
The @framer book section about Property Controls received an update:

🔹Added: Transition
🔹Added: Event Handler
🔹New String examples
🔹New Enum examples with Twemojis (🙏 @TwitterOSS!)
🔹New Fused Number examples
framerbook photo
4 months ago
Wish I hadn’t used emojis in those @framerbook prototypes, now that @framer also has users on Windows. 🤦‍♂️

Pictured: Chrome on Windows and macOS running side by side with the aid of @ParallelsMac and Mac’s Split View.

(Also: sharing the project w/ myself w/ Framer’s Multiplayer)
framerbook photo
7 months ago
Big 📦 update of the Overrides chapter in the @framer X book!

🔹Using the Data object vs. useState vs. CreateStore
🔹Overriding design components (incl. their children)
🔹What to do when overrides don’t work w/ code components
🔹Knowing which events to use w/ code components
9 months ago
Dropping an early Christmas present - here's a folder of all of the current example files for our Framer X users. 🤶🏻🎁🎄 Enjoy!

Download here 👉🏼
framerbook photo
10 months ago
I took @benjaminnathan’s excellent @framer playground 💫 animations and made a remix: all 36 animations in three versions:
🔹 Code Component
🔹 Framer Motion
🔹 Overrides

Get them here:

More info & online examples:
framerbook photo
11 months ago
iOS 13 introduced a ✨fresh look for the ‘segmented control’.

Here’s a @framer X version:

📍Maps & 🚶Steps prototypes that use it:

And, now in the 📘book, step-by-step instructions on how to build it:
framerbook photo