Connect & Flow

About this plugin

# Connect & Flow**Connect, arrange, annotate, and document—all in one plugin.**Turn scattered frames into clear, developer-ready design documentation with **Connect & Flow**. Whether you’re mapping a user journey, organizing screens, creating redlines, or explaining design decisions, everything you need is available in one intuitive panel.No more switching between multiple plugins. Just select your layers, choose a tool, and keep your ideas flowing.## What You Can Do### 🔗 Create Smart ConnectorsConnect any two layers in seconds with customizable lines, directions, labels, and endpoints. Choose from solid, dashed, or dotted styles, then add arrows, dots, triangles, or double-ended caps.Need more than a basic line? Add labels, emojis, or one of 15 flowchart shapes to create diagrams directly on your canvas.### ✨ Arrange and Connect Multiple FramesClean up messy canvases with automatic layout tools. Arrange selected frames into rows, stacks, grids, or web-style layouts with precise spacing and alignment.Sort frames by their numbering, create custom grid patterns, wrap everything inside a Figma Section, or use **Make Magic** to arrange, connect, and label your frames in one click.### 🏷️ Add Semantic Frame HeadersMake complex flows easier to scan with color-coded frame headers. Choose from Detail, Positive, Negative, Warning, Neutral, Primary, Question, and Idea states.Customize the title, icon, size, and meaning to create consistent visual cues across your project.### 📐 Generate Specs and RedlinesCreate clear handoff documentation without manually drawing every measurement.Generate:* Width, height, padding, and spacing measurements* Outlines, overlays, and corner-radius annotations* Horizontal and vertical guide lines* Typography, color, dimension, and style specifications* Comprehensive property cards for selected elementsControl colors, offsets, label positions, font sizes, opacity, and individual corners for precise documentation.### 📌 Create Callouts and AnnotationsAdd numbered pins and descriptive note cards to explain interactions, requirements, edge cases, bugs, or design decisions.Choose from multiple pin styles, note placements, connector lines, card designs, shadows, icons, and numbering formats. A live preview lets you see the result before placing it on the canvas.For designer-to-developer communication, **Dev Notes Mode** creates a terminal-inspired annotation card with monospace text and a developer-friendly visual style.## Perfect For* User flows and wireframes* Flowcharts and diagrams* Design handoff documentation* Specs and redlines* UX annotations* Design-system documentation* Developer notes* Responsive layout specifications* Canvas organization## Why Connect & Flow?Connect & Flow combines connectors, automatic layouts, frame headers, specifications, and annotations in one streamlined toolkit. Its premium dark interface keeps advanced controls organized without interrupting your workflow.It works in both **Figma Design and FigJam**, requires no account, and is ready whenever your canvas needs a little more clarity—and a lot more flow.