Skip to main content

How to use FLOWs

A primer on how to use our canvas

Written by Jeff

So what can this be used for?
​Solve Wars? No. Quit Smoking? No.
But it can, at least, allow you to brainstorm the ideal process and ignite that 🔥.
​

Here are just some use-cases:
​
​#Sitemaps, #UserJourney Maps , #Marketing Channel #Funnels, #Customer Acquisition Funnels, #Strategy Maps, #Product Development, #Customer Discovery, #UX Strategy, #Mood boards , #Brainstorms.

Let's Dive-in!


1. Watch our fearless leader's 3-min walk-through. Seeing is believing!
​
​

2. Start from Scratch using our Main Components:

Shapes
​

Connectors
​
Text (works w/ markdown!)
​
Image/Graphics
​
Wireframes ( low fidelity )
​
​Fonts
​
​Sections

3. or Start with our +20 purpose built Templates
​

Notable features:


Asynchronous multi-user collaboration. You wont see your teammates cursor just yet, but both users can edit the same file, just not yet in real-time. **100% real-time collaboration is coming in v2.

  • Text ( pasting from external source is markdown-aware )
    If you copy text from a website that was made via markdown, and then paste it into the canvas, it will render it with the same markdown.
    ​

  • Text > Adding Links
    ​

    1 - select either the full text object or word
    2 - add a link

    3 - enter the URL
    ​
    ​

  • +56 Colorable Wireframes
    ​


    ​

  • Smart Sections
    ​


    ​

  • Smart Edges : This enables the connector to position-aware, and dynamically change orientation based on the target node's position.
    ​

  • Smart Delete: Maintains the pre-existing pass-through connection on nodes.
    ​


    ​

  • Copy & Paste items aka "nodes" and images from other flows or from your clipboard.

  • Drag 'n Drop Images from your local file browser.

  • Share Flows with clients/teams:
    They can pan/zoom around. Comments coming soon!

  • Embed Flows anywhere!
    Why is this so damn cool? because you can constantly update your flow as-needed and wherever it is embedded it will instantly update too. Great for keeping documentation and clients up-to-date.

  • Light-mode!
    Sometimes the dark-side is too strong.
    ​

Demo of a LofFi Sitemap

Demo Flow of a Basic E-commerce Funnel

Demo Flow of a Shopify Funnel w/ Screenshots
​

Demo Flow of our Architecture

Pro-Tip:
​Save time with our Templates!
Our gallery of templates is growing :
​


​
​Wait!! What about ICONS??
Yep We've made some for you here:
​
Solid & Outlined

AWS

Google

Azure


​
More can be found on https://thenounproject.com/
Instructions : ( Select and icon > select format = SVG > download it to desktop > drag it into your Flow.
​

Did this answer your question?