Back to Plugins
Flowlight — Flow Arrows, Connectors, Flowcharts & Diagrams

Flowlight — Flow Arrows, Connectors, Flowcharts & Diagrams

Arrows that stay attached to your layers — across sessions, and after something breaks.

Plugin Preview

Flowlight — Flow Arrows, Connectors, Flowcharts & Diagrams preview

About this plugin

Join two layers. The arrow keeps up.USABLE AT WORK — YOUR IT REVIEW CAN CHECK IT, NOT TAKE MY WORDFlowlight declares no network access at all: zero allowed domains, no server, no account, no sign-in, nothing to upload. Figma prints that on this page beside the last-updated date — so the person who approves plugins where you work can confirm it without contacting me. There is nothing to fill in on a security questionnaire, and no service that can go down and take the plugin with it. It only ever touches the file you have open.Select some layers, choose how to join them, and Flowlight draws the arrows. Then it keeps them right, which is the part that usually goes wrong.Three ways to join one selection: in order — each layer to the next, down the chain; from the first, to all the others; everything to everything.ARROWS THAT SURVIVE BEING CLOSEDEach arrow stores which layers it belongs to inside itself, in the document — not in the plugin's memory. Close the plugin, quit Figma, come back next month, move a frame: Update all puts every arrow back where it belongs, including arrows drawn in a session that ended long ago. While the plugin is open they follow as you drag.REPAIR, FOR WHEN SOMETHING HAS GONE WRONGOne button checks every arrow on the page and tells you, in words, what it found: a line that no longer matches the layers it joins, an arrow whose stroke has lost its weight or opacity, a duplicate of a pair you already joined, a label that should say something and has gone missing, an end pointing at a layer that is not there any more. What can be put right is put right; what needs a decision is named and left to you.EVERYTHING ABOUT HOW THE LINE LOOKSRight angles, curves or a straight line. Solid, dashed or dotted. Colour, weight, corner radius. Six arrowheads (none, arrow, triangle, reversed triangle, circle, diamond) chosen separately for each end. Which edge the line leaves and enters, or automatic. Gaps at each end, how far it runs straight before it turns, and how much room it leaves around other layers. Routing around the layers in between, or not. The colour can be bound to a Figma variable, so changing the variable changes every arrow.HAND-DRAWN, IF YOU WANT ITFour settings, from off to loose. The line keeps its shape — a right angle drawn by hand is still a right angle — and it is drawn twice, because a line gone over twice is what a drawn line looks like. The wobble is worked out from the two layers the arrow joins, so it comes out the same every time that arrow is redrawn: an arrow nobody touched does not quietly change shape when something else on the page moves.WAYPOINTS, WHEN THE ROUTE SHOULD GO YOUR WAYDrop points the line has to pass through, and drag them where you want them. The rest of the route still solves itself — around the layers in between, into the edges you chose — and one button clears them again.LABELS YOU CAN ACTUALLY CONTROLText on the line, with its own font, weight, size, colour, plate colour and position along the path — and a switch that hides the label without deleting the words. The position is stored as a fraction of the path, so it does not drift when the route changes.IT REMEMBERS WHAT YOU CHOSEThe style you used last is the style the next arrow gets, so there is nothing to set up again each time the plugin opens. Give a style a name and it becomes a preset, to apply or delete whenever you like. Presets are kept on your device rather than written into the file, so they follow you into every file you work in instead of belonging to one document.Drawing on selection is there as well, and it is off unless you turn it on: an arrow you did not ask for, in a file other people share, is worse than one extra click.MANAGING WHAT YOU HAVE ALREADY DRAWNRestyle the selection or the whole page in one go. List every arrow and click to jump to it. Show or hide them all. Lock them so they stay out of the way. Collect them into one group in the layers panel. Flip an arrow end for end. Merge a run: A to B, B to C, C to D becomes one arrow, A to D.NATIVE FIGJAM CONNECTORS, BROUGHT BACK TO LIFEFigma stopped letting plugins put native connectors into design files. If your file already has some, they are still sitting there — and nothing can add another, or help you with the ones you have. Flowlight reads them: both ends, the shape of the route, the caps, the colour, the weight, the label. One button redraws each one as an arrow it maintains, and removes the connector it replaced. Anything it will not touch — an end that holds no layer, a pair you have already joined — is named, not skipped, and left exactly as it was.ARROWS ANOTHER PLUGIN LEFT BEHINDWhen a plugin stops working, its arrows do not disappear. They stay in the file, drawn and looking right, and dead: nothing moves them when the layers move, and the plugin that made them is not coming back. Until now the only way out was to delete the diagram and draw it again. Adopt arrows another plugin drew looks for lines whose two ends rest on two different layers, and redraws each one as an arrow that follows. Tested on arrows from the biggest plugin on this shelf, and on plain lines drawn by hand. Anything it will not take is named with the reason — a divider floating in space, a bracket drawn across one card, a pair you have already joined — and left exactly where it was. Undo puts everything back.LINES THAT GO AROUND YOUR OTHER LAYERS, WHEREVER YOU DREW THEMA flow drawn inside a frame is still a flow. Flowlight routes around the other layers in the same frame, not only the ones sitting loose on the canvas, and you choose how wide to look: layers beside it, or everything on the page. Turn it off and the line goes straight through — that is a choice too, and it stays yours.MERMAID, BOTH WAYSPaste a flowchart and Flowlight lays out the boxes and draws the arrows. Decisions arrive as diamonds, terminators as circles, and rounded boxes and stadiums as themselves; subroutine and flag boxes are drawn as rectangles. Four link styles, and labels in either spelling. Or turn what is on the page back into Mermaid text to paste into a pull request. Both directions run entirely on your machine.Free for 25 arrows, every feature included. Then $8, once, for ever. Deleting, restyling, reconnecting, repairing and updating arrows are always free, even at zero: a plugin should not hold your file to ransom.KNOWN LIMITS, STATED UP FRONTArrows follow live only while the plugin is open. Figma gives a plugin no way to run when it is closed. What Flowlight does instead is remember the bond in the document, so Update all puts everything right whenever you come back, including months later.An arrow cannot attach to a layer inside a component instance. That is Figma's own behaviour for connectors, not something a plugin can work around.Purchases are handled by Figma and are tied to your Figma account. They cannot be moved to another account, and Flowlight cannot restore or refund them — Figma's support can. Your receipt comes from Figma by email, not from here.Flowlight draws its own vector arrows. It can restyle and repair native FigJam connectors that are already in your file, but it cannot create them: figma.createConnector is FigJam-only, and cloning an existing one is refused in a design file.

Plugin Details

Version6
CreatedAugust 14, 2026
Last UpdatedSeptember 1, 2026
CategoryFile organization plugins
CreatorGuard
Stats35 installs, 6 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    Flowlight draws arrows between layers that are already in your file. It has no server, no account and nothing to upload, so it makes no network requests at all.

  • Editor Types:
    figma
  • Allowed Domains:
    • none