Framer X

Learn how to make more advanced prototypes with Framer X.

The Framer X book teaches you how to add simple animations to your prototypes with Overrides, and how to create your own Code Components, like those that you can find in Framer’s Store.

Last update: May 14, 2019 — All content is updated for Framer X26 with Playground and the new APIs!

Packages

Table of contents

1. Design Components
   1. Design Components
2. Overrides
   1. Overrides Free preview
   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. Example animations Updated
5. Archive
   1. Overrides (pre X22)
   2. Code Components (pre X22)
      1. Property Controls
   3. Animations (pre X22)
      1. Animatable properties
      2. Animation curves
      3. Animating a Scroll component
      4. Toggle animation
      5. Chaining animations
      6. Delaying an animation
      7. Staggered animations

I’m currently 👨‍💻 working on — coming soon:

• A full explanation of the new animation API
• Dragging
• 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

1 week 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 weeks 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

8

The Framer book @framerbook

3 weeks 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

The Framer book @framerbook

3 weeks ago
An example of how you can show and hide Property Controls in @Framer X.
Download: https://t.co/pxk8vLfQgw (for Framer X Beta ✨) https://t.co/tE9gif6ie1

View on Twitter

3

14

The Framer book Retweeted · Carlos Santiago @csantiago132

1 month ago
Logic and data for my personal blog is ready so wanted to have some fun designing the blog page, I did it in @framer since I’ve been wanting to learn it. @framerbook is a great resource to do so! Feedback always welcome 🤗 #typography #productdesign https://t.co/lOwCRPcft8

View on Twitter

1

0

The Framer book @framerbook

2 months ago
Fresh ✨ content added to the Framer X book about animations in Overrides:
🔹how to create a toggle animation
🔹how to chain animations
🔹how to delay animations
🔹how to create a staggered animation

Full TOC: https://t.co/3Kgz7F9Uj7 https://t.co/m3MygVJlTw

View on Twitter

2

8