Framer X

Learn how to make more advanced prototypes with Framer X.

The Framer X book shows you how to add different kinds of animations to your prototypes, gives you all the details about overrides, and teaches you how to create your own code components, like the ones that you can find in Framer’s store.

All example projects and explanations are up-to-date for Framer X50.

Last update: March 3, 2020


Sascha Michael Trinkaus

“Seriously concise info about Framer X 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.

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

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

Anthony Kiplimo

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

Anthony Kiplimo

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

Table of contents

  1. Design Components
    1. Design Components
  2. Overrides
    1. Overrides Updated
    2. Framer’s Data object Updated
    3. Using CreateStore New
    4. Overriding Design Components New
    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
      1. String
      2. Color
      3. Image
      4. Number
      5. File
      6. Boolean
      7. Enum
      8. Segmented Enum
      9. Fused Number
      10. Component instance
      11. Hiding Controls
  4. Animation
    1. Animation Free
    2. The Animate property Free
    3. The Transition property Free
    4. While Hover and While Tap Free
    5. Hooks
    6. The useState() hook
    7. The useCycle() hook
    8. The useAnimation() hook
    9. Keyframes
    10. Tips for Overrides
    11. Animatable properties
    12. Animation curves
    13. Animating a Scroll Component
    14. A Frame’s animation properties
    15. Example animations Free
  5. Smart components
    1. Smart 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
      1. Starter
      2. Selected index
      3. Initially selected index
      4. Selection indicator
      5. Variable segment width
      6. Adding the separators
      7. Animating the separators
      8. Responding to property changes
      9. Adding an event property
      10. A pinch of TypeScript
      11. Example prototypes Free
  6. 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
  7. Archive
    1. Overrides (pre X22) Free
    2. Code Components (pre X22) Free
      1. Property Controls Free
    3. Animations (pre X22) Free
      1. Animatable properties Free
      2. Animation curves Free
      3. Animating a Scroll component Free
      4. Toggle animation Free
      5. Chaining animations Free
      6. Delaying an animation Free
      7. Staggered animations Free

I’m currently 👨‍💻 working on / upcoming chapters:

  • More about Framer Motion
  • React Fundamentals
  • And much more in the upcoming months

There’s a changelog of the book’s 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.

1 month 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
4 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
5 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
6 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
7 months ago
New ✨ in the @framer X book: 🤓 Smart components

One component’s ‘state’ can become another component’s ‘prop’: This parent component has a ‘dad says’ state that gets passed to the child components as a property.

Each child also has a 😀 ’mood’ state that changes when clicked.
framerbook photo
7 months ago
New ✨ in the @framer X book: 🤓 Smart components

This ‘kid’ component has a ‘dad said’ property & a ‘mood’ state.

🔹it shares its 😋 ’mood’ w/ the 💬speech bubble (through an Override)
🔹and changing its ‘dad said’ prop (also through an Override) will also update its ‘mood’
framerbook photo