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, it has all the details about Overrides, and it teaches you how to create your own Code Components, like those that you can find in the Store.

All example projects and explanations are up-to-date for Framer X32 with Playground and the new APIs (older content is in the Archive).

Last update: July 1, 2019

Packages

Table of contents

1. Design Components
   1. Design Components
2. Overrides
   1. Overrides
   2. Tap one Frame, animate another
   3. Overriding Code Components
   4. The Data object
3. Code Components
   1. Code Components
   2. <Frame> vs. <div>
   3. Including other components
   4. Customizing an existing component
   5. 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 New Free
   2. The Animate property New Free
   3. The Transition property New Free
   4. While Hover and While Tap New Free
   5. Hooks New
   6. The useState() hook New
   7. The useCycle() hook New
   8. The useAnimation() hook New
   9. Keyframes New
   10. Tips for Overrides New
   11. Animatable properties
   12. Animation curves
   13. Animating a Scroll Component
   14. A Frame’s animation properties New
   15. Example animations
5. 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 — coming soon:

• Dragging
• Scrolling
• Following drag & scroll movements with useTransform()
• … 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

± 1 email/month — Check out the archive

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.

Leave this field empty if you're human:

The Framer book @framerbook

3 weeks ago
New in the @framer X book: A chapter about 🎞️ Keyframes

This is a second way (apart from async/await) to create a sequence of animations in Framer X. With examples of how to adjust the timing between animations and change their easing curves.

https://t.co/lvhmbLZ3Hc https://t.co/1hMfdpCnSK

View on Twitter

2

9

The Framer book @framerbook

4 weeks ago
New ✨ in the @framer X book: 💫 Playground Animations
This is a big update 💪 that took me almost a month to finish 😅

Check out the 🆓 chapters:
🔹Animation
🔹The Animate property
🔹The Transition property
🔹While Hover and While Tap
https://t.co/LzzNFuv4R1 https://t.co/dUG8jP2uNO

View on Twitter

4

27

The Framer book @framerbook

2 months ago
New ✨ in the @framer X book:
🔹An overview of ALL animatable properties, with examples
🔹The details about Framer’s animation curves
🔹How to animate a Scroll Component
https://t.co/lvhmbLZ3Hc https://t.co/OqRozLBBr9

View on Twitter

13

79

The Framer book @framerbook

2 months ago
New ✨ in the Framer X book:
@benjaminnathan’s Playground Examples recreated as Overrides.

The original Playground Examples:
https://t.co/yCaJW8R4kr

Their Override versions:
https://t.co/Gr0ueboyCX https://t.co/aHTcEAZW0q

View on Twitter

2

6

The Framer book @framerbook

2 months ago
All Framer X book content is updated for Framer X23!
https://t.co/lvhmbLZ3Hc

All the examples now use the new animation API and all Code Components are ‘function components’.

Pages about the former animation API and ‘class components’ were moved to an ‘Archive’ section.

View on Twitter

2

10

The Framer book @framerbook

3 months ago
Framer Beta ⚡️ content added recently:
🔹All the details about Overrides (with new animation API)
🔹Example animations — as Code Components and Overrides
🔹New Code Components (now ‘functional components’ with hooks)
https://t.co/lvhmbLZ3Hc
👨‍💻 working on : animations overview! https://t.co/NHFrjT9lou

View on Twitter

2

9