Learn how to make more advanced prototypes with Framer.
The Framer book explains everything about using code in Framer. It shows you how to create different kinds of animations, has all the details about overrides, and teaches you how to create your own code components.
All example projects and explanations are up-to-date for the latest versions of Framer Web and Desktop.
Last update: July 1, 2020
“Framerbook is the hidden Framer manual I always turn to. It keeps up to date with Framer’s changes and is extremely well written.”
Product Designer at Pitch
“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
“The Framer book is well laid out and easy to understand, especially from a developer standpoint.”
“With the Framer book, I have a reliable source which is incredibly well made. Structure and writing are just excellent.”
Freelance Interaction & UX Designer
“Seriously concise info about Framer 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.
- Design Components
- Code Components
- A Simple Code Component
- Why Use <Frame>s?
- Compatibility with Overrides & Parent Components
- Including Other Components
- Customizing an Existing Component
- Property Controls Updated
- Animation Free
- The Animate Property Free
- The Transition Property Free
- While Hover and While Tap Free
- The useState() Hook
- Animate Presence
- The useCycle() Hook
- The useAnimation() Hook
- Tips for Overrides
- Animatable Properties
- Animation Curves
- Animating a Scroll Component
- A Frame’s Animation Properties
- Example Animations Free
- Smart Components
The above video is from a while back. The Animations section, for instance, now has about twice the content:
Questions? Check the FAQ.
Wish I hadn’t used emojis in those @framerbook prototypes, now that @framer also has users on Windows. 🤦♂️
Pictured: Chrome on Windows and macOS running side by side with the aid of @ParallelsMac and Mac’s Split View.
(Also: sharing the project w/ myself w/ Framer’s Multiplayer) https://t.co/kAMHA6yyq5
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
I took @benjaminnathan’s excellent @framer playground 💫 animations and made a remix: all 36 animations in three versions:
🔹 Code Component
🔹 Framer Motion
Get them here:
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:
📍Maps & 🚶Steps prototypes that use it:
And, now in the 📘book, step-by-step instructions on how to build it: