Flow Connect

About this plugin

Automatically generate flow arrows from your Figma prototype links. FlowConnect reads every interaction you've already created in Prototype mode and draws beautiful, annotated connectors between screens so you can document flows without drawing a single arrow by hand.FlowConnect is free and open to useFeaturesAutomatic prototype scanning detects all On Click, On Hover, On Drag, After Delay, and other prototype interactions on your page.Trigger labels on every arrow see exactly what type of interaction connects each screen (e.g., "On click → Navigate", "On hover → Open overlay").Customisable arrow styles solid, dashed, or dotted lines in any color and thickness.Element-level or Frame-level connections choose whether arrows point from the exact interactive element or from the parent frame.Smart bezier curves smooth, professional-looking curved connectors that avoid harsh straight lines.One-click generation scan your page, tweak settings, generate. All arrows appear in a single grouped layer.Easy cleanup clear all arrows instantly, or lock the annotation layer to prevent accidental edits.Handles edge cases overlapping arrows are offset automatically, self-referencing frames get loop arrows, deleted destinations are skipped gracefully.How to useCreate your prototype interactions in Figma as you normally would (Prototype mode → drag connectors)Open FlowConnect from the Plugins menuClick "Scan full page" or "Scan selection" to detect interactionsAdjust arrow style, color, thickness, and label settingsClick "Generate flow arrows"All arrows appear in a "🔗 FlowConnect Annotations" group layerPerfect forDocumenting user flows for handoff to developersPresenting navigation architecture in design reviewsCreating flow diagrams for case studies and portfoliosAuditing prototype completeness instantly see which screens are connected and how-------------------------------------------FAQCan I customise the arrow appearance?Yes. You can change the line style (solid/dashed/dotted), color (6 presets + custom color picker), and thickness (thin/medium/thick).What happens when I change my prototype links?Just re-run the plugin. Click "Clear all arrows" to remove the old ones, scan again, and regenerate. The plugin always reads the latest prototype data.Does it work with component instances?Yes. FlowConnect scans interactions on component instances just like it does on regular frames.Does it support overlays and scroll-to actions?Yes. The trigger labels will show "Open overlay", "Scroll to", "Swap", etc. — whatever navigation type your prototype uses.Can I scan only specific frames?Yes. Select the frames you want, then click "Scan selection" instead of "Scan full page".-------------------------------------------Made with ⚡ by Abhinav AgrawalHave feedback, ideas, or found a bug? Reach out:Instagram: @abhinavagr180Linkedln: /abhinavagrIf FlowConnect saves you time, leave a ⭐ on the community page it helps others discover it too!