Flow
The Flow package is an experimental navigation tool for Framer X. It provides several features that are currently unsupported by the built-in navigation tool. These features include:
- Navigating from code
- Visual configuration
- Custom transitions
- Swipe interactions
- State preservation
See below for more on each of these topics.
🍕Download the example project.
Installation
You can install the Flow component from the Framer X Store.
- Open the Store tab in Framer X
- Search for Flow
- Click Install
Usage
Once you've installed Flow:
Adding the Flow component
To begin, let's add the component to your Framer X project.
- Install the Flow component as shown above
- On the canvas, create a Frame
- Change the name of the Frame to "Navigation"
- Open the Components panel
- Drag an instance of the Flow component into the Frame
Setting up a navigation context
A Flow component's "navigation context" is made up of all of the Frames that the component may navigate to. We define this context by connecting Frames to the Flow component.
- On the canvas, create another two Frames
- Name the first Frame "Home" and give it some text (such as "Home")
- Name the second Frame "Profile and give it some text (such as "Profile")
- Connect the Flow component to the other two Frames
Using the Link component
With the Link component, you can create transitions to other Frames in the Flow component's navigation context. There's nothing special about the Link tool, but we'll cover how it works later on this page.
- Open the Components panel
- Drag an instance of the Link component into the Frame named Home
- In the Properties Panel, change the selected Link's Target to
Profile
- Select the Frame named Navigation (it contains the Flow component instance)
- Open the Preview by pressing
Command + P
- Click on the Link to navigate to the Frame named Profile
Creating "Previous" links
You can also use the Link component to create "previous" or "back" links. With the Flow component, each time you navigate to a new Frame, you add that Frame to a "stack" of visited Frames. A "previous" link allows you to navigate back through that stack.
- Open the Components panel
- Drag a second instance of the Link component into the Frame named Navigation
- In the Properties Panel, change the selected Link's Previous toggle to True
- Select the Frame named Navigation
- Open the Preview
- Click on the "Home" Link to navigate to the Frame named Profile
- Click on the "Previous" Link to navigate back to the Frame named Home
Using the Marker component
With the Marker component, you can add a marker to a Frame, give the marker a unique name, and then use the marker's name as a navigation target. This provides an alternative to using a Frame's name as a navigation target.
- On the canvas, create another Frame
- Give this Frame some text (such as "Settings")
- Connect the Flow component to this new Frame
- Open the Components panel
- Drag an instance of the Marker component into the new Frame
- In the Properties Panel, change the selected Marker's Name to "Settings"
- In the Frame named Home, create a second Link instance
- In the Properties Panel, change the second Link's Target to "Settings"
- Select the Frame named Navigation
- Open the Preview
- Click on the "Settings" Link to navigate to the Frame with the Settings marker
Note: Markers will never appear in the Preview.
Navigating from code
In addition to using the components described above, you can interact with the Flow component through your Framer X project's overrides and code components.
- In the Frame named Profile, create a new Frame
- Style the new Frame like a button
- In the Properties Panel, click on the row labelled Override
- In the File dropdown, select New File
- Click the Edit Code button
- In the file that opens, delete the file's code and replace it with:
// App.tsx
import { Override } from 'framer'
// @ts-ignore
import { showNext, showPrevious } from '@framer/steveruizok.flow/code'
export function ShowSettings(): Override {
return {
onTap: () => {
showNext('Settings')
},
}
}
- Return to the canvas
- Select the button's Frame
- In the Override section of the Properties Panel, select App in the File dropdown and ShowSettings in the Override dropdown.
- Select the Frame named Navigation
- Open the Preview
- Click on the "Profile" Link to navigate to the Frame with named Profile
- Click the button with the ShowSettings override to navigate to the Frame with the Settings marker
Note: You can use import these same methods into code components and use them in the same way.
Custom transitions
You can customize the component’s transitions by overriding the Flow component.
the variants
prop. See the Flow page for more information.