Connectors

Connectors

Connectors represent relationships between nodes on the canvas.

Connectors Header

Introduction

Connectors are lines that connect nodes, representing relationships and movements between them

Start using our Design Kits

Open in Figma

Usage

  • Use connectors to connect to nodes horizontally or vertically.
  • Avoid 45° and freeform connectors.
  • Use the badge component to label connectors.

In testing mode, a user can choose a path through a workflow, then see it reflected in color and line-weight changes to the connector path.

A wireframe showing a connector base
Connector base
A wireframe showing a connectors hover state
Connector hover
A wireframe showing a connector focus state
Connector focus
A wireframe showing a connector variant
Connector variant
A wireframe showing connector tracing
Connector tracing
Connector tracing animation

Next: Drag and Drop