Framer Flows

A simple way to design your next app

Onboarding Flow by Benjamin den Boer

When it comes to micro-interactions, we’ve always had your back. But it’s time we filled a bigger role in your design toolkit. In this release, we've made it easier than ever to design a high-fidelity app from start to finish.

Start with your first screen, use Framer Flows to go to the next and watch as it intuitively defines a natural animation between the two, no matter what transition you dream up. Work your way from loading screen to checkout, finetuning interactions and connecting screens as you go. It’s simple, high-fidelity and fully customizable.

Seamless Screen-to-Screen Workflow

It does the heavy lifting for you. It’s set up for common iOS transitions, so expect bouncy spring animations and horizontal scroll effects to happen naturally.

Framer Flows is built on the FlowComponent. It’s empty by default, so we’ll start by adding the first layer. Here’s how it works:

# Create layers 
layerA = new Layer
    backgroundColor: "#00AAFF"
    size: Screen.size
 
layerB = new Layer
    backgroundColor: "#FFCC33"
    size: Screen.size
 
# Set up FlowComponent 
flow = new FlowComponent
flow.showNext(layerA)

To transition to the next layer on click, we simply use the showNext function again. Check out how it looks below or open this example in Framer to try it out yourself.

# Transition to layerB on click 
layerA.onClick ->
    flow.showNext(layerB)

To go backwards in your flow, simply use the showPrevious function to cycle to previous screens. You won’t need to specify a new layer here; the FlowComponent does this automatically for you.

# Go backwards 
flow.showPrevious()

Overlays & Scrolling

Apps are rarely limited to horizontal flows. They often include scrollable screens, dialogs, modal views and much more. To support the variety of existing transition states (and to empower you to invent new ones), we've included customizable overlay functions in Framer Flows.

In the featured example above, we overlay a layer from the left side of the screen. See how it works below, or open this example in Framer.

# Create layers 
layerA = new Layer
    backgroundColor: "#00AAFF"
    size: Screen.size
 
layerB = new Layer
    backgroundColor: "#FFCC33"
    width: 500
    height: Screen.height
 
# Set up FlowComponent 
flow = new FlowComponent
flow.showNext(layerA)
 
# Show overlay on click 
layerA.onClick ->
    flow.showOverlayLeft(layerB)

Need a layer to pop in from the bottom? Simply set the direction.

# All overlay directions 
flow.showOverlayCenter(layerA)
flow.showOverlayTop(layerA)
flow.showOverlayRight(layerA)
flow.showOverlayBottom(layerA)
flow.showOverlayLeft(layerA)

Common Interactions Made Simple

But that’s not all. In this release, we’ve also added advanced support for common interactions. You can now easily add anchored elements like tab bars using just a single line of code. Scrollable areas with sticky navigation? No problem.

# Add sticky navigation 
flow.header = sketch.navBar
 
# Add sticky tab bar 
flow.footer = sketch.tabBar

A Few Ways To Get Started

We’re big believers in handing you the reigns when it comes to pushing the boundaries of design. To encourage ingenuity and unparalled invention, we kept Framer Flows code-driven for now. This also allows Windows users and third-party platforms to benefit from it.

Here are a few working examples to jumpstart your next prototoype, with Sketch files included in the .framer folders of each project.

  1. Next & Previous — Go back and forth between two screens.
  2. Overlay — Show a new screen from the bottom.
  3. Modal — Show a modal dialog from the center.
  4. Scroll — Scrollable artboard with anchored layers.

Check out our updated getting starting guide or read the documentation to learn more about Framer Flows and the FlowComponent. A huge thank you goes out to Chris Camargo and Andreas Wahlström for the modules that inspired the making of Framer Flows. As always, we’d love to hear your thoughts and see your prototypes on Facebook or Twitter.