Visualizing prototype flows

Overview

Figma prototypes use invisible “reactions” (interaction noodles) to define navigation between screens. While these work great for interactive prototypes, they can be hard to see and document. This workflow converts prototype reactions into visible FigJam connector lines, creating clear visual flow diagrams.

This is especially useful for:

Creating flow documentation
Presenting user journeys to stakeholders
Identifying navigation gaps
Generating clickable flow diagrams in FigJam

Use cases

Flow documentation: Create visual diagrams of app navigation for handoff
Stakeholder presentations: Make prototype flows visible to non-designers
User journey mapping: Visualize complete user paths through the app
Design reviews: Highlight interaction patterns and navigation structure
QA reference: Provide clear flow diagrams for testing teams
Information architecture: Document navigation hierarchy visually

How it works

The visualization process extracts prototype reaction data from your design frames and generates corresponding FigJam connector lines that visually represent the interaction flow.

Workflow

Prepare your prototype

Ensure your Figma file has prototype reactions set up between frames. You can work with:

Click/tap interactions
Hover states
Navigation flows
Back actions

Use get_document_info to understand your prototype structure:

get_document_info()

Extract prototype reactions

Use get_reactions to extract all prototype flows with visual highlight animations.

get_reactions()

This returns an array of reactions with:

Source node (the interactive element)
Destination node (the target frame)
Trigger type (ON_CLICK, ON_HOVER, etc.)
Transition animation details

The tool also highlights source nodes in Figma so you can see which elements have reactions.

Set default connector style

Copy a FigJam connector line with your desired styling (color, arrow style, stroke weight) and set it as the default.

set_default_connector()

You must copy a connector before running this command. The copied connector’s style will be used for all generated connections.

Generate connector lines

Use create_connections to generate FigJam connector lines based on the prototype flows.

create_connections({
  reactions: extractedReactions
})

You can also create custom connections by providing a manual mapping:

create_connections({
  customConnections: [
    { sourceId: "node-1", targetId: "node-2" },
    { sourceId: "node-2", targetId: "node-3" }
  ]
})

Review and refine

Check the generated connectors in your FigJam file. You can:

Adjust connector paths manually if needed
Add labels to connectors
Organize connectors into groups
Color-code different flow types

Connector styling

Before generating connectors, customize a FigJam connector line with:

Color

Choose colors to represent different flow types (e.g., primary flows in blue, error states in red).

Arrow style

Select single-ended, double-ended, or no arrows based on your needs.

Stroke weight

Use different weights to show importance or frequency of paths.

Line style

Solid lines for primary flows, dashed for optional paths.

Advanced techniques

Flow categorization
Custom flow mapping
User journey highlighting

Generate multiple sets of connectors with different styles for different flow types:

Extract all reactions
Filter by trigger type (ON_CLICK vs ON_HOVER)
Set different connector styles for each type
Generate connectors for each category

const clickFlows = reactions.filter(r => r.trigger === 'ON_CLICK');
const hoverFlows = reactions.filter(r => r.trigger === 'ON_HOVER');

// Set blue connector for clicks
set_default_connector();
create_connections({ reactions: clickFlows });

// Set green connector for hovers
set_default_connector();
create_connections({ reactions: hoverFlows });

Create additional connections that aren’t in the prototype:

create_connections({
  customConnections: [
    { sourceId: "splash-screen", targetId: "onboarding-1" },
    { sourceId: "onboarding-3", targetId: "home" }
  ]
})

Useful for:

Showing conditional paths
Documenting error flows
Mapping data relationships

Highlight specific user journeys by creating connectors only for paths along that journey:

const signupJourney = [
  { sourceId: "landing", targetId: "signup-form" },
  { sourceId: "signup-form", targetId: "verification" },
  { sourceId: "verification", targetId: "welcome" }
];

// Use a distinct color for this journey
set_default_connector();
create_connections({ customConnections: signupJourney });

Best practices

For complex prototypes with many reactions, generate connectors in stages. Start with primary flows, verify them, then add secondary and error flows with different visual styles.

Test connector style first: Create one manual connection with your desired style before batch generating
Use consistent styling: Establish a visual language for different flow types
Label connectors: Add text labels to important transitions for clarity
Organize by layer: Put connectors on separate layers or frames for easy toggling
Version your flows: Keep dated copies when updating flow diagrams
Export for documentation: Use the visual flow diagrams in design specifications

Tool sequence

join_channel - Connect to Figma
get_document_info - Understand prototype structure
get_reactions - Extract all prototype flows with highlights
set_default_connector - Define connector style (copy one first)
create_connections - Generate connector lines from reactions

Visualizing different flow types

Primary navigation flows

Main user paths through the app. Use bold, solid connectors in your primary brand color.

const primaryFlows = reactions.filter(r => 
  r.trigger === 'ON_CLICK' && !r.destination.name.includes('Error')
);

Error and edge cases

Error states and exceptional flows. Use dashed connectors in red or orange.

const errorFlows = reactions.filter(r => 
  r.destination.name.includes('Error') || 
  r.destination.name.includes('404')
);

Back navigation

Hover and tooltip interactions

Example output

After running the visualization workflow, you’ll have:

Clear connector lines between all interactive frames
Visual representation of your prototype’s navigation structure
Easy-to-understand flow diagram for stakeholders
Documentation-ready visual assets
Basis for user journey mapping exercises

Integration with FigJam

The generated connectors work seamlessly in FigJam, allowing you to:

Add sticky notes with annotations
Create swimlanes for different user types
Build comprehensive journey maps
Present flows in workshops or reviews
Export as images for documentation

get_reactions - Extract prototype reactions with visual highlights
set_default_connector - Set the default connector style
create_connections - Generate FigJam connector lines
get_document_info - Get document structure information
scan_nodes_by_types - Find specific frame types

reaction_to_connector_strategy - Strategy for converting prototype reactions to connector lines

Use Cases

Overview

Use cases

How it works

Workflow

Connector styling

Color

Arrow style

Stroke weight

Line style

Advanced techniques

Best practices

Tool sequence

Visualizing different flow types

Example output

Integration with FigJam

Build docs developers (and LLMs) love

Use Cases

​Overview

​Use cases

​How it works

​Workflow

​Connector styling

Color

Arrow style

Stroke weight

Line style

​Advanced techniques

​Best practices

​Tool sequence

​Visualizing different flow types

​Example output

​Integration with FigJam

​Related tools

​Related prompts

Build docs developers (and LLMs) love

Overview

Use cases

How it works

Workflow

Connector styling

Advanced techniques

Best practices

Tool sequence

Visualizing different flow types

Example output

Integration with FigJam

Related tools

Related prompts