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 X44 and use the current API.

Last update: September 19, 2019

Packages

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

“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

“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
   2. Tap one Frame, animate another
   3. Overriding Code Components
   4. The Data object
3. Code Components
   1. Code Components
   2. A simple Code Component
   3. <Frame> vs. <div>
   4. Including other components
   5. Customizing an existing component
   6. 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 New
   2. Props versus State New
   3. Passing down Props New
   4. Sharing State New
   5. Letting a Prop change the State New
   6. Simple but smart New
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 Smart Code Components
• Framer Motion
• … 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

7 days 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. https://t.co/RoSoq87peS

View on Twitter

3

15

The Framer book @framerbook

2 weeks 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’ https://t.co/Xss6pDykBS

View on Twitter

2

9

The Framer book Retweeted · Anthony Kiplimo 🥑 @AnthonyLimo

1 month ago
#friday is exploration day on @framer with @framerbook https://t.co/WNuoiOBVHH

View on Twitter

1

0

The Framer book @framerbook

2 months ago
New ✨ in the @framer X book: Everything about dragging.

🔹‘Snap to grid’ & ‘Snap to corner’ examples
🔹Axis and direction locking
🔹Constraints + their drag elasticity
🔹Tweak Inertia animations w/ Modify Target, Power, Time Constant, Bounce Stiffness, Damping
🔹Events https://t.co/3ypj09EJpf

View on Twitter

3

16

The Framer book @framerbook

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

3

10

The Framer book @framerbook

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

28