How to Make Flow Arrows in Figma

It depends on which Figma product you mean. FigJam has connectors: lines that snap to shapes and stickies and reroute when you move them. Figma Design has no connector tool. The Config 2026 announcements added Figma Motion, shaders, and agent features, but no connectors for design files, and requests for native flow arrows in design files are still open on the Figma forum.

What Figma Design does have are three things that look like arrows but behave differently.

• Line and Arrow tools (L and Shift + L): vector lines with endpoint caps such as line arrow and triangle arrow. Good for annotations, but they are free-floating vectors. Move a frame and the arrow stays where it was.
• Prototype connections: the blue noodles in the Prototype tab. They do link frames, but they only show while you're in the Prototype tab and don't appear in exports or presentations of the design.
• Pasted FigJam connectors: covered below. This is the only native way to get a connector that sticks to frames in a design file.

For a quick pointer on a mockup, the Arrow tool is enough. Pick it from the shape tools menu or press Shift + L, then click and drag. In the Stroke section of the right sidebar, open the advanced stroke settings to change the end points. You can set a cap for both ends at once, or press Enter to go into vector edit mode and give each endpoint its own cap. Hold Shift while dragging to lock the angle to 45 degree steps.

For a bent arrow, go into vector edit mode and add points, or draw with the Pen tool (P) and add an arrow cap to the last point. It works, but every time a screen moves you redraw the path. That's why user flows built this way are painful to maintain.

Connectors drawn in FigJam keep working when you paste them into a Figma Design file. The endpoints can snap to frames, components, and groups, and the line stretches and reroutes as you move them. Many designers keep a small FigJam file with a few pre-styled connectors just for copying.

1. In FigJam, press X (or Shift + L) for a bent connector, or L for a straight one. Curved lines are also available from the connector options.
2. Pick the endpoint style. FigJam offers none, solid arrow, line arrow, triangle, and diamond.
3. Add a label if you want one. Double-click the line and type. Labels can have a background color.
4. Copy the connector, paste it into your design file, and drag each end onto a frame until it attaches.

There are limits. Designers on the Figma forum report that snapping is less reliable in design files than in FigJam and only catches some layers, and connectors can't live inside a component's layers. Style the connector in FigJam before you copy it, so you're not fixing colors and arrowheads one by one in the design file.

The FigJam trick works, but for a 30-screen flow you're dragging 60 endpoints by hand and restyling each line. Plugins cut that down. Autoflow is the long-standing option that draws its own arrows between two selected layers. FlowConnect, our plugin, works with Figma's real connectors instead of custom vectors, so the result behaves like a pasted FigJam connector.

Select two frames. FlowConnect stores them and clears the selection so the paste lands on the page. Then paste one connector with Cmd/Ctrl + V. The plugin binds the start to the first frame and the end to the second, applies your current style, and scrolls the new connector into view. Repeat for the next pair.

• Line type: elbowed, straight, or curved.
• Stroke style: solid, dashed, dotted, or a custom dash pattern, plus stroke weight and opacity.
• Caps: six start and end caps, including arrow, filled triangle, diamond, and circle. Switch Caps reverses direction in one click.
• Labels: text on the connector with black or white text picked by contrast, and an optional colored background chip.
• Magnets: set where each end attaches (auto, top, bottom, left, right, center) on an existing connector without re-linking it.

Linking and styling are free. In free mode each paste gets one of eight colors at random; the premium tier keeps your chosen color and lets you save style presets. The full reference is in the FlowConnect docs. New to plugins? Here's how to install a Figma plugin.

• Use one line type per diagram. Elbowed lines read best for screen-to-screen flows laid out in a grid.
• Keep the happy path in one color and use a second color or a dashed style for error and edge-case paths.
• Label only the arrows that need it, like the action that causes the transition (Tap Save, Payment fails).
• Lay screens out left to right in the order people move through them, so most arrows point the same way.

If the flow needs notes on individual screens as well, see the guide on annotations in Figma.