FlowTrace: Prototype Visualization & Documentation

About this plugin

Instantly document your interactive prototypes. FlowTrace scans your existing Figma prototype connections and automatically draws visible, native curved arrows on the canvas. It transforms clickable hotspots into a clear bird's-eye view of your user flow, perfect for design handoffs, team reviews, and documentation.

Key Features:

1. One-Click Visualization: Automatically scans the page and generates a visual map of all prototype connections between top-level frames.
2. Native Vector Arrows: Creates smooth, high-quality Bezier curves with proper start and end caps that match Figma native styling.
3. Smart Filtering: Intelligently ignores internal component states and variants, focusing only on the main screen-to-screen navigation.
4. Documentation Tools: Includes a built-in tool to create auto-resizing sticky notes for adding context or instructions to your flows.
5. Non-Destructive: All generated arrows are grouped and locked to prevent accidental edits, and can be removed instantly with a single click.

How to Use:

1. Connect your frames using the standard Prototype tab in Figma.
2. Open FlowTrace.
3. Click Visualize Prototype Flow to generate the connection arrows.
4. Use Add Sticky Note to place comments or logic descriptions on the canvas.
5. Click Remove All Annotations to clear the canvas when you need to update the prototype or export clean designs.