Connectors
Connectors
Guidelines
Connectors represent relationships between nodes on the canvas.
![Connectors Header](/assets/images/guidelines/builder/connectors/Connectors_Hero@2x.png)
Introduction
Connectors are lines that connect nodes, representing relationships and movements between them
Design Resources
Download Sketch KitUsage
- 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](/assets/images/guidelines/builder/connectors/Workflow_Connectors_Base.png)
![A wireframe showing a connectors hover state](/assets/images/guidelines/builder/connectors/Workflow_Connector_Hover.png)
![A wireframe showing a connector focus state](/assets/images/guidelines/builder/connectors/Workflow_Connector_Focus.png)
![A wireframe showing a connector variant](/assets/images/guidelines/builder/connectors/Workflow_Connectors_Variant.png)
![A wireframe showing connector tracing](/assets/images/guidelines/builder/connectors/Workflow_Connectors_Tracing.png)
Next: Drag and Drop