Skip to main content

Overview

The create_connections tool creates connector lines between nodes using the style defined by set_default_connector. Each connection visually represents a relationship (e.g., navigation, overlay trigger) and can include optional text labels. Prerequisite: A default connector must be set using set_default_connector before calling this tool.

Parameters

array
required
Array of connection objects. Each object defines a single connector line:

Returns

JSON response with creation summary:

Example Usage

Basic connector between two frames

Multiple connections from reactions data

Visualizing user journey flows

Complete Workflow: Prototype Noodle Visualization

This tool is part of a three-step workflow to visualize Figma prototype flows:

Step 1: Set default connector style

Step 2: Extract prototype reactions

Step 3: Process reactions and create connectors

Use Cases

Prototype flow documentation

Automatically generate visual flowcharts showing how users navigate through a prototype.

Sitemap generation

Create a hierarchical site map by connecting parent pages to child pages with labeled connectors.

User journey mapping

Visualize end-to-end user journeys across multiple screens with annotated transition labels.

Design handoff

Provide developers with clear visual indicators of navigation flows and interaction triggers.

Notes

  • Empty array check: If connections array is empty, returns "No connections provided" message
  • Batch processing: All connections are created in a single operation for performance
  • Text labels: Optional but highly recommended for clarity—include trigger type and action
  • Connector style: Inherits all visual properties from the default connector (color, weight, arrows)
  • Node validation: Ensure both startNodeId and endNodeId exist on the current page

Error Handling

No default connector set

If set_default_connector hasn’t been called, you’ll receive an error. Resolve by:
  1. Copying a FigJam connector to the page
  2. Running set_default_connector({ connectorId: "..." })

Invalid node IDs

If a node ID doesn’t exist, that specific connection will fail. Check the response for failed count.