Introducing the Page Tool
Framer X’s powerful new interactive tool lets you design tons of interactions, from simple swipe gestures to 3D numeric pickers.
We’re excited to introduce a brand new interactive tool to the latest version of Framer X: the Page tool. With the Page tool you can go beyond simple vertical and horizontal gesture-based transitions to create everything from list interactions and date pickers to 3D card transitions and momentum-based flicking.
How it works
It’s simple. Just select Page from the interactive tools panel and then draw a swipeable area on the canvas. Drag the multi-connector to all the frames you’d like to page between, then open the Preview window (⌘P) to test the look and feel of your new page component.
Customize everything
Tailor your page component in the robust new properties panel, where you can update elements like swiping direction, alignment, padding, and momentum. You can even choose from five effects that will give your page transitions extra flair. To make it easy to manage lots of pages, we included a content section that lets you preview, rearrange, add, and remove pages all in one place.
Next-level interactions
As our most flexible interactive tool to date, the high-fidelity prototyping possibilities are endless. Check out these examples and then take the tool for a spin in Framer X.
3D Transitions
Choose one of the many effects that come with our Page tool to create stunning custom transitions that take a simple page swipe to another dimension.
Momentum
Turn momentum on in the properties panel to enable momentum-based flicking, which allows you to scroll through lists of items with a single swipe like you see in this date picker example below.
Actions
The Page tool allows you to do much more than swipe between pages. Use it to create advanced interactions in just a few clicks.
Get started
Find out what else we’ve included in the latest version of Framer X on our Updates page or read our updated Docs to learn more about the Page tool. Ready to start tinkering? Download our latest Examples.
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.