Best Figma plugins for user flows and flowcharts
Autoflow is the most-used Figma plugin for user flows, with 1.1M users. Select two frames and it draws the arrow between them, in a hand-drawn or minimalist style. It's paid ($39 one-time in our data); if you want a free option, Arrow Connector (220K users) draws connectors that update as you move screens, and ProToFlow (82K users) draws flow arrows from the prototype links you've already set up.
Top 20 picks
Autoflow
#1 · 1.1M users
Quick answer
Our top picks
- #1
Most used
Autoflow
by David Zhao
Autoflow draws a flow arrow between any two selected frames or layers, in a hand-drawn or minimalist style, and it's the plugin most designers already have installed for the job. It suits quick flows laid out next to real screens. It's paid, $39 one-time in our data with a free tier, and its last update was in March 2025; if you want native FigJam connectors that stay attached when screens move, Simpleflow (113K users) is the maintained alternative.1.1M 14KFree + $39 - #9
Best free option
ProToFlow
by Saeed Alipoor
ProToFlow reads the prototype interactions in your file and generates flow arrows from them, so the diagram matches what you've wired. If you prefer FigJam connectors, you can copy one into the file and hand it to the plugin to use as the arrow style. It's free and runs in Figma Design only, and the result is only as tidy as your prototype links.82K 1.1KFree - #13
Best for diagrams as code
Mermaid in Figma
by art
Write Mermaid code in a text layer, select it, and Mermaid in Figma renders the diagram into your Figma Design or FigJam file. It's free and suits system diagrams that engineers already maintain in Mermaid. The output is a chart image, so restyling individual boxes means going back to the code.52K 312Free
Outside the ranking · Disclosure
The full list
The 20 most-used Figma plugins for flowcharts & user flows
- 01
Autoflow
Automagically draw flow arrows! Create user flows and diagrams in a hand-drawn or minimalist style.
Free + $39 · 14K likes
1.1M14KFree + $39 - 02
220K2.2KFree - 03
166K1.2KFree + paid - 04
129K1.3KFree + $39 - 05
117K1.1KFree - 06
Simpleflow
🪄 Create flowcharts in Figma with native FigJam connectors — stay perfectly in sync as you design!
Free + $10 · 1.9K likes
113K1.9KFree + $10 - 07
98K1.7KFree + paid - 08
85K813Free - 0982K1.1KFree
- 10
78K246Free - 11
71K85Free - 12
Sitemap
Free · 751 likes
55K751Free - 1352K312Free
- 14
Overflow
The Overflow plugin extends Figma’s functionality to create beautiful user flow diagrams.
Free + paid · 628 likes
46K628Free + paid - 15
45K421Free - 16
Flowy
Effortlessly create and customize connections (user flows) between components in Figma.
Free · 457 likes
44K457Free - 17
Flow Connect
Free · 27 likes
33K27Free - 18
33K20Free - 19
MockFlow SiteMap
Free + paid · 173 likes
31K173Free + paid - 20
30K606Free
Buying guide
What to look for
Connectors are a FigJam feature, and FigJam also has FigJam AI for generating flow charts from a prompt and accepts pasted Mermaid syntax. If the flow lives on a workshop board, you may not need a plugin at all. Plugins matter when the arrows have to sit next to real screens in a design file for a review or a handoff. Our guide to flow arrows in Figma covers the manual methods too.
The list splits three ways. Some plugins draw arrows or connectors you place yourself (Autoflow, Arrow Connector, Simpleflow, Flowy), ProToFlow builds arrows from prototype interactions, and a third group turns text into diagrams, whether that's Mermaid code or a plain-text description of screens (Mermaid in Figma, UI flows for Figma).
- 01
Arrows that follow the screens
The main reason to use a plugin over the line tool is that arrows reroute when you move a frame. Test this with a real flow of 15 or more screens before relying on it.
- 02
Where the flow comes from
Decide between drawing connections by hand, generating them from prototype links, or writing them as text. Prototype-based flows stay honest to what you built; text-based ones are faster to edit in bulk.
- 03
Which editor it runs in
Some plugins only run in Figma Design, others in FigJam too. Simpleflow works in Figma Design, Slides and FigJam.
- 04
Labels and line styles
Flows get read by product managers and developers. Check that you can label connectors, change arrowheads, and colour error or alternate paths differently from the main path.
FAQ
Frequently asked questions
Can you make a flowchart in Figma Design?
Yes, with shapes and the arrow tool, but the arrows won't follow your frames when you move them. Native connectors only exist in FigJam. Plugins like Simpleflow and Flowy add connectors to design files. See our flow arrows guide for both approaches.
How do I show a user flow between screens in Figma?
Lay out the screens in order, then connect them with arrows drawn by hand or by a plugin. If you've already prototyped the flow, ProToFlow turns those prototype links into visible arrows so you don't draw them twice.
Is FigJam better than Figma for flowcharts?
For early flows and workshops, usually yes: connectors snap to shapes, FigJam AI can generate a flow chart from a prompt, and you can paste Mermaid syntax onto the board. For flows annotated on top of finished UI, Figma Design plus a connector plugin works better. More options are on our FigJam plugins page.
Can I turn Mermaid code into a Figma diagram?
Yes. In FigJam you can paste Mermaid syntax directly onto the board. In design files, Mermaid in Figma renders it as an image, Mermaid-to-Flow converts it into FigJam flowcharts, and FigJam ↔ Mermaid Converter goes in both directions.
Keep exploring
Related lists and guides
Prototyping
prototyping and user testing
See the top picks
FigJam
FigJam whiteboards
See the top picks
Annotations
annotating designs
See the top picksGuides
- How to Make Flow Arrows in FigmaFigma Design has no connector tool, but you can still draw flow arrows that stick to frames. The native options, the FigJam copy trick, and plugins, explained.
- Figma plugin vs widget: what's the difference?A Figma plugin runs for one person and closes when done. A widget is an object on the canvas everyone can see and use. When to pick which, with examples.