Introducing the Page Tool

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.

slim

Sarah Lim

October 24, 2018

W e’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.

page properties

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.

page properties

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.

Download this example ›

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.

Download this example ›

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.

Download this example ›

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.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

The Official Loupe 2018 Recap

Read more ›

Featured Framer X Packages: October

Read more ›

Interactive Components From Top Design Teams

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.