Framer Cheat Sheet: Flow Components

This cheat sheet is for users who want to take full advantage of the new design section in Framer. By using flows, you can dramatically decrease the amount of code you need to make a simple prototype.

Tess Gadd

Published in

Designing Humans

9 min readJun 27, 2017

I never was the biggest fan of FlowComponents.

Until I learned that if you can get them right — they are a huge time saver, (especially used in tandem with Framer’s design view). The catch however, is that they are designed for very specific patterns — which is fine, because they are commonly used ones.

TLDR: If you want to make a quick prototype with commonly used patterns, use FlowComponents, otherwise try states or PageComponents.

Like the other Cheat Sheets in this series, we will look at the very basics: simple properties and commonly used patterns. This was written for people like me — who aren’t great at writing code, but are pretty darn good at copy and pasting. If you don’t have Framer yet, download a free 2 week trial.

In this Framer Cheat sheet, we will look at the following:

What is a FlowComponent?
How a FlowComponent works
Standard flow (Next & previous)
Flows with scroll
Flows with overlays
Custom transitions
Header and Footer
Common patterns
1) Pages with a fixed header
2) Hamburger Menu
3) Pop-up
4) Toast notification

1. What is a flow component?

In essence, FlowComponents are really good at doing a few things very quickly, like The Flash quickly. Like a cheetah on rollerblades, quickly. Like a shot of tequila, quickly.

You get the point.

In essence, aFlowComponent allows you to bring layers to the front of the prototype with little effort. This makes it ideal for notifications, modal windows and pages.

Since the design view has been added to Framer, FlowComponent’s have become more valuable than ever. The above prototype was done with 3 screens (and one pop-up), and 14 lines of code.

Easy peezy pudding pie.

2. How a FlowComponent works

At first, FlowComponent’s can be tricky to understand — especially because they work so differently to other components — so don’t worry if you don’t get it right first time.

How is a FlowComponent different from other components?

As mentioned above — FlowComponent’s just work differently to other types of components. Here are a few examples of it’s differences:

They must always be added after all the layers in your prototype (so that in the code they are last, but in the layer list they are on top).
You add content to the FlowComponent while the user is using it. Basically, as opposed to a PageComponent where all the pages are assigned to it in the beginning, a FlowComponent gets assigned content when the user triggers certain events.
FlowComponents automatically create ScrollComponents if the content is too long.
FlowComponents have very limited animation settings — however the ones they do have are very standard/common.

Creating a FlowComponent

A FlowComponent’s size is, by default, the size of the screen (which is dandy). When it is first created, and you haven’t assigned it any content, it will create 3 more layers — namely the ScrollComponent, content and overlay. Notice how the overlay is hidden (layer list on the right).

But it is rather pointless without content. Unlike page and scroll components, you assign layers to a FlowComponent a bit differently. And you can only assign one layer at a time. You will notice that the scrollComponent and the content layer will disappear in the example below.

NOTE: Unlike other components, the FlowComponent should always be the last element you add so that it sits on top of everything else (see below).

If your layer within the FlowComponent is larger than it, it will bring back the scrollComponent (below).

Golly. This is confusing, but stay with me.

Because you can only add / show one layer at a time, the flow will only reveal other layers on a trigger. Notice how LayerB moves into the content section, and that LayerA is invisible (below, in the layer list) of the FlowComponent after the trigger.

3. Standard flow (next & previous)

Standard flows are used for showing pages. They use two basic reactions, ‘bringing in a layer’, and ‘go back to the previous screen’.

.showNext() is used two instances: 1) To go to new pages, 2) To set the first screen (below).

page1 = new LayerflowComp = new FlowComponent
flowComp.showNext(page1)

.showPrevious() reverses the previous animation. .showPrevious can also be used with modals (see further down).

page1 = new Layerpage2 = new LayerflowComp = new FlowComponent
flowComp.showNext(page1)page1.onClick ->
   flowComp.showNext(page2)page2.onClick ->
   flowComp.showPrevious()

Standard flow without animation

You can remove the animation from a standard flow by setting the animate boolean to false.

page1 = new Layerpage2 = new LayerflowComp = new FlowComponent
flowComp.showNext(page1)page1.onClick ->
 flowComp.showNext(page2, animate: false)
 
page2.onClick ->
 flowComp.showPrevious(animate: false)

4. Flows with scroll

If the content of a FlowComponent is longer than it is, it will automatically create a ScrollComponent within it. In the below example, you can see that LayerA is longer than FlowComp — because of this, a ScrollComponent is created (see layers list on the right).

You might not always want a ScrollComponent however. Luckily you can disable it. To do this, just set the scroll boolean to false.

#Left 
bttn1.onClick ->
   flowComp.showNext(page2)#right
bttn1.onClick ->
   flowComp.showNext(page2, scroll: false)

5. Flows with overlays

The best thing about FlowComponents is the convenient light-box effect it has for modals. As mentioned earlier, it by default has an overlay layer which is hidden, until you call it.

You can call the layers to come from different directions. This means that pop-ups, hamburger menus and toast notifications are easier and quicker to make.

shape = new LayerflowComp = new FlowComponentbttn_Left.onClick ->
   flowComp.showOverlayLeft(shape)bttn_Right.onClick ->
   flowComp.showOverlayRight(shape)bttn_Top.onClick ->
   flowComp.showOverlayTop(shape)bttn_Bottom.onClick ->
   flowComp.showOverlayBottom(shape)bttn_Center.onClick ->
   flowComp.showOverlayCenter(shape)

Adding an animation

By default, flows have animation. So, in the instance that you don’t want an animation, you have to set animate: to false. This does however create a very jarring effect.

#left button
bttn.onClick ->
   flowComp.showOverlayCenter(shape, animate: false)#right button
bttn.onClick ->
   flowComp.showOverlayCenter(shape, animate: true)#right button alternative
bttn.onClick ->
   flowComp.showOverlayCenter(shape)

Making the overlay not clickable

By default, you can click on the overlay layer to revert back to the previous screen. You can however disable this using the modal boolean.

#left button
bttn.onClick ->
 flowComp.showOverlayCenter(shape, modal: false)#right button
bttn.onClick ->
 flowComp.showOverlayCenter(shape, modal: true)

NOTE:
You WILL need a ‘back’ or ‘close’ button if you make the overlay not clickable. If that is the case, use something like this:

close_Bttn.onClick ->
   flowComp.showPrevious()

Editing the overlay

As far as I can tell, the only thing you can edit about the overlay is the colour. If anyone knows how to change the opacity without using the backgroundColor property — please let me know :)

bttn.onClick ->
   flowComp.overlay.backgroundColor = Utils.randomColor()
   flowComp.showOverlayCenter(shape)

6. Custom transitions

Ladies, gentlemen and the undecided, we have arrived at possibly my least favorite aspect of FlowComponents, namely, Custom Transitions. Not that there is anything wrong with them, they are just tricky to get right.

Custom Transitions, (as the name suggests) allow you to make custom transitions between layers.

The basic structure is as follows:

transitionName = () ->
   transition = 
      layerA:
          show:
             opacity: 1
          hide:
             opacity: 0
      layerB:
          show:
             opacity: 1
          hide:
             opacity: 0bttn.onClick ->
    flowComp.transition(page2, transitionName)

So, let’s break that bad boy down.

transitionName is up to you to call it what you will ( BadAssMotherFucker = () -> works incase you were wondering).
transition = references that it is a custom transition.
layerA and layerB reference the layers shown in that order — You CAN NOT call them anything else. You just can’t. Don’t do it.
show and hide tell you what happens when you bring layers forward or backwards. Think of them like really shitty states.
.transition( says that it is a custom transition. Within the transition brackets it calls up the layer you want to move to, and how you want to move to it using the custom transition.

Using layerA and layerB

In the below left example, I used a custom transition for both LayerA and LayerB — while on the right, I just used one for LayerB. Notice how in the left example; both layers animate — while in the right; only the back layer animates.

#Left
Scale = () ->
    transition =
        layerA:
            show:
                scale: 1
                opacity: 1             hide:
                scale: 0.5
                opacity: 0
         layerB:
            show:
                scale: 1
                opacity: 1
            hide:
                scale: 0.5
                opacity: 0#Right
Scale = () ->
    transition =
        layerB:
            show:
                scale: 1
                opacity: 1
             hide:
                scale: 0.5
                opacity: 0

7. Header and Footer

When designing with a FlowComponent, layers can get very messy, and your nav bar can easily get lost. Luckily FlowComponent’s have a header and footer option.

Header

Fix a header to the top of a FlowComponent by just defining the .header .

Head = new Layer
  backgroundColor: "rgba(255,255,255,0.3)"
  html: "header"flowComp = new FlowComponent

flowComp.header = Head

Or, you could — you know, just put the Head layer above the FlowComponent .

flowComp = new FlowComponent

Head = new Layer
  backgroundColor: "rgba(255,255,255,0.3)"
  html: "header"

Footer

Fix a footer to the top of a FlowComponent by just defining the .footer .

Foot = new Layer
  backgroundColor: "rgba(255,255,255,0.3)"
  html: "footer"flowComp = new FlowComponent

flowComp.footer = Foot

8. Common Examples

Here are some common patterns that I have used. Enjoy!

1. Pages with a fixed header

This pattern allows you to always keep the header on top while navigating between layers.

2. Hamburger menu

I thought that hamburgers where called ‘handburger’ for far longer than I care to admit. Anyhoo, as we all know, Hamburger Menus are all the rage when it comes to keeping an interface minimal. Using a FlowComponent allows you to slide in the menu along with an overlay in one swoop.

2. Pop-up

Pop-ups. We all hate them, but they are a necessary evil. Luckily a FlowComponent let’s you make one super quickly, so as to lessen the pain.

3. Toast

When some at work said “let’s make a toast”, I get very excited — until I realize that they aren’t talking about drinking champaign.
Anyway, toasts are a slightly (slightly) less annoying way of notifying your user about something.

As always, I hope this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave a comment bellow, and I will update :)