Framer Cheat Sheet: Flow Components

How to make a simple prototype with as little code as possible in Framer.

I was never the biggest fan of theFlowComponent.

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

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

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:

  1. What is theFlowComponent?
  2. How does theFlowComponent work?
  3. Standard flow (Next & Previous)
  4. Flows with scroll
  5. Flows with overlays
  6. Custom transitions
  7. Header and Footer
  8. 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, the FlowComponentis really good at doing a few things very quickly. Like, The Flash quickly. Or like a cheetah on rollerblades quickly. Like a shot of tequila quickly.

You get the point.

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

https://framer.cloud/vwjYP

Since the Design tab was added to Framer, theFlowComponenthas 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 seem 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 work differently than other types of components. Here are a few examples of its 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 in response to how 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.
  • TheFlowComponent has limited animation settings . However the ones they do have are very standard/commonly used.

Creating a FlowComponent

The FlowComponent 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 scrollComponentand 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 its constraints, 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 Layer
flowComp = new FlowComponent
flowComp.showNext(page1)

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

page1 = new Layer
page2 = new Layer
flowComp = 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 animateboolean to false.

page1 = new Layer
page2 = new Layer
flowComp = 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 example below, 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 theFlowComponent 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 appear from different directions. This means that pop-ups, hamburger menus and toast notifications are easier and quicker to make.

shape = new Layer
flowComp = new FlowComponent
bttn_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: 0
bttn.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 the FlowComponent has a header and afooter 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 theFlowComponent .

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

Footer

Fix a footer to the top of theFlowComponent 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 FlowComponentallows you to slide in the menu along with an overlay in one swoop.

https://framer.cloud/igvuP

2. Pop-up

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

https://framer.cloud/DsqMh

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 below, and I will update :)
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.