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: April 30, 2020
Packages
-
$69.00 / year -
$9.00 / month
“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.”
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.”
Designer at Bose
“With the framer book, I have a reliable source which is incredibly well made. Structure and writing are just excellent.”
Freelance Interaction & UX Designer
“The Framer X book is well laid out and easy to understand, especially from a developer standpoint.”
This video shows projects from: Animation, Property controls, and Dragging
Table of contents
- Design Components
- Overrides
- Code Components
-
Animation
- Animation Free
- The Animate Property Free
- The Transition Property Free
- While Hover and While Tap Updated Free
- Variants New
- Hooks
- The useState() Hook
- Animate Presence New
- The useCycle() Hook
- The useAnimation() Hook
- Keyframes
- Tips for Overrides
- Animatable Properties
- Animation Curves
- Animating a Scroll Component
- A Frame’s Animation Properties
- Example Animations Free
- Smart Components
- Dragging
-
Archive
- Overrides (pre X22) Free
- Code Components (pre X22) Free
- Animations (pre X22) 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.
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 https://t.co/5KTIJgDwwy
Dropping an early Christmas present - here's a folder of all of the current example files for our Framer X users. 🤶🏻🎁🎄 Enjoy!
Download here 👉🏼 https://t.co/O17dqs2Zv9 https://t.co/zr5HPJ7PSC
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:
🗄️ https://t.co/Ny0tw0JdAR
More info & online examples:
📄 https://t.co/Gr0ueboyCX https://t.co/rLWwxEYj4U
iOS 13 introduced a ✨fresh look for the ‘segmented control’.
Here’s a @framer X version:
🎁 https://t.co/yb2xR0EcB0
📍Maps & 🚶Steps prototypes that use it:
https://t.co/10zfVSBjAu
And, now in the 📘book, step-by-step instructions on how to build it:
https://t.co/fT1S4fH6mk https://t.co/7q5TF8h44p
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
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
