Getting Started
Install the plugin
Open Figma, go to the Community tab, search for FlowConnect, and click Install.
Direct install linkOpen the plugin
Go to Plugins → FlowConnect. The panel opens at 340 × 595px. Use the Flows tab for linking and style.
Select two frames
Select any two non-connector layers (frames, components, groups). FlowConnect stores them, clears selection, and shows: "Frames stored! Now paste (Ctrl+V) a connector to link them."
Paste a connector
Paste one connector (Ctrl+V or Cmd+V). FlowConnect detects it, binds both endpoints to your stored frames, applies your current style settings, and scrolls the viewport to the new connector. You get a toast: "Connected [Frame1] to [Frame2]!"
Flow Linking
FlowConnect uses a two-frame queue. When you select exactly two non-connector nodes, it stores their IDs, clears the selection (so paste lands on the page, not inside a frame), and waits for a single pasted connector. The connector must be the only selected node after paste.
What gets applied on paste
Connector Style
All style controls live in the Flows tab. Changes apply to the next paste or, if a connector is selected, to that connector immediately.
Line type
Stroke style
Other style fields
Opacity: 0 to 1. Stroke weight: pixels. Color: hex. Free users see a random color on paste; premium users keep their choice. Use Update Connector Style to apply changes to the selected connector.
Stroke Caps
Start and end caps define arrow or terminal styles at each end of the connector.
Text Labels
Connectors with a text node can display a label. If the text field is empty, the default is userflow. Text color is chosen by relative luminance: black on light connector color, white on dark. This keeps labels readable on any background.
Text background
When text background is on, the connector color fills a chip behind the label and text uses high-contrast black or white. When off, the background is cleared and text uses the connector color directly. Connectors without a text node show "This connector does not support text labels" if you try to add one.
Magnets
Magnets control where the connector attaches to each frame. Select a connector to see connected frame names and current magnet values. Update them to change attachment points.
Figma picks the best attachment based on layout.
Attach to top edge.
Attach to bottom edge.
Attach to left edge.
Attach to right edge.
Attach to center.
Presets
Presets store a full style profile: name, lineType, opacity, strokeWeight, strokeColor, strokeStyle, dashPattern, startStrokeCap, endStrokeCap, labelText, and textBackgroundVisible. They are saved to Figma client storage and persist across sessions.
Last-used preset
When you apply a preset, it becomes the last-used. On plugin open, the last-used preset is loaded and applied automatically so your preferred style is ready.
Premium gating
Save preset and Delete preset require a verified premium license. Without it, you get "Presets are a premium feature. Please upgrade to save/delete presets." Applying a preset (if you have any) works in free mode. Use Force Reload Presets to refresh the list from storage.
License & Storage
The License tab handles activation. When the plugin receives a SWITCH_TO_LICENSE_TAB message, it switches to the License tab. On LICENSE_ACTIVATED, it switches back to Flows.
Clear All Storage
Clears license info, all presets, last-used preset, and the source connector ID from plugin data. Use this to reset the plugin state. You will see "All plugin data cleared!" and the UI updates to reflect empty presets and no license.
Set Source
Select a connector and use Set Source to store it as a template. The connector ID is saved in figma.root plugin data. Paste from this connector to clone it. Clear All Storage removes the source.
Tips & Troubleshooting
Paste goes inside a frame
FlowConnect clears selection when you pick two frames. If you re-select a frame before pasting, paste may land inside it. Select two frames again and avoid clicking before paste.
No color control in free mode
Free users get one of eight random colors per paste. Premium unlocks your chosen hex and persists it.
Connector has no text
Only connectors that already have a text node can receive label updates. Figma's connector tool creates them with optional text. If yours has none, ADD_TEXT_LABEL will notify that it doesn't support labels.
Font loading failed
Label updates load the connector font before editing. If the font is missing or restricted, the update is skipped. Use a common font (e.g. Inter) for reliable updates.
Shapes tab
The Shapes tab exists for shape-related controls. Flow linking and connector style live in the Flows tab.
Feedback
Open the plugin on Figma Community for questions and support.