Framer Flows
A simple way to design your next app
--
When it comes to micro-interactions, Framer has 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, fine-tuning interactions and connecting screens as you go. It’s simple, high-fidelity and fully customizable.
Seamless Screen-to-Screen Workflow
With Framer Flows, you won’t have to manually code animations between every screen transition. 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:
To transition to the next layer on click, we simply use the showNextfunction again. Check out how it looks below or open this example in Framer to try it out yourself.
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.
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.
Need a layer to pop in from the bottom? Simply set the direction.
Common Interactions Made Simple
Framer Flows is a huge asset for designing simple screen transitions, fast. 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.
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 unparalleled 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 prototype, 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.
