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 layerslayerA =backgroundColor: "#00AAFF"size: ScreensizelayerB =backgroundColor: "#FFCC33"size: Screensize# Set up FlowComponentflow =flowshowNextlayerA
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 clicklayerAonClick ->flowshowNextlayerB
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 backwardsflowshowPrevious
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 layerslayerA =backgroundColor: "#00AAFF"size: ScreensizelayerB =backgroundColor: "#FFCC33"width: 500height: Screenheight# Set up FlowComponentflow =flowshowNextlayerA# Show overlay on clicklayerAonClick ->flowshowOverlayLeftlayerB
Need a layer to pop in from the bottom? Simply set the direction.
# All overlay directionsflowshowOverlayCenterlayerAflowshowOverlayToplayerAflowshowOverlayRightlayerAflowshowOverlayBottomlayerAflowshowOverlayLeftlayerA
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 navigationflow.header = sketchnavBar# Add sticky tab barflow.footer = sketchtabBar
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.
- Next & Previous — Go back and forth between two screens.
- Overlay — Show a new screen from the bottom.
- Modal — Show a modal dialog from the center.
- 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.