> ## Documentation Index
> Fetch the complete documentation index at: https://docs.figr.design/llms.txt
> Use this file to discover all available pages before exploring further.

# User Flow

> Visualize journeys, document paths, identify gaps. See the complete picture before designing individual screens.

## What Map User Flow Does

Map User Flow creates visual representations of user journeys, process flows, and system interactions. It documents paths, identifies decision points, and surfaces missing states. Map User Flow produces:

* User journey diagrams
* Process flowcharts
* Decision trees
* State diagrams
* Information architecture maps

<Frame>
  <img src="https://mintcdn.com/figr-1af7ae64/gGIZV8y15s2Ijner/images/userflows.png?fit=max&auto=format&n=gGIZV8y15s2Ijner&q=85&s=4def45272724f32b9e8bd1641d9c0718" alt="Userflows" width="3057" height="1872" data-path="images/userflows.png" />
</Frame>

## [​](#when-figr-uses-map-flow) When Figr Uses Map User Flow

Figr engages flow mapping when you:

* Ask to visualize a journey
* Need to document a process
* Want to see all paths in a flow
* Request a diagram or map
* Ask about user journeys

<Accordion title="Trigger Phrases">
  ```text theme={null}
  "Map the checkout flow"
  "Show me the user journey for..."
  "Create a flowchart for..."
  "What are all the paths through...?"
  "Diagram the onboarding process"
  ```
</Accordion>

## [​](#flow-types) Types of Flow Maps

<AccordionGroup>
  <Accordion title="User Journey Maps">
    End-to-end user experience. Journey map includes:

    * Touchpoints and interactions
    * User emotions and pain points
    * Opportunities for improvement
    * Cross-channel transitions
  </Accordion>

  <Accordion title="Process Flowcharts">
    Step-by-step process documentation. Flowchart includes:

    * Sequential steps
    * Decision points
    * Branching paths
    * Start and end states
    * Error handling paths
  </Accordion>

  <Accordion title="State Diagrams">
    All possible states and transitions. State diagram includes:

    * Every possible state
    * Transitions between states
    * Trigger conditions
    * Edge case states
  </Accordion>

  <Accordion title="Information Architecture">
    Content and navigation structure. IA map includes:

    * Page hierarchy
    * Navigation relationships
    * Content groupings
    * Cross-linking patterns
  </Accordion>
</AccordionGroup>

## Getting Best Results

<AccordionGroup>
  <Accordion title="Define Start and End Points">
    * \*\*Clear boundaries: \*\*"Map the flow from clicking 'Create Project' to seeing the new project dashboard"
  </Accordion>

  <Accordion title="Ask for Edge Cases">
    * **Complete coverage**: "Include error states and edge cases" "What happens if the user goes back?" "Show the timeout scenario"
  </Accordion>

  <Accordion title="Specify Detail Level">
    * **Right granularity:** "High-level overview of the signup journey" vs. "Detailed flowchart of form validation logic"
  </Accordion>
</AccordionGroup>