Adding connectors in Figma is a straightforward process, allowing you to visually link different objects or elements in your designs, perfect for creating flowcharts, diagrams, and user flows.
Step-by-Step Guide to Adding Connectors
Connectors are essential tools for illustrating relationships between elements in a diagram or workflow. Here's how you add them:
- Access the Tools: Click the arrow icon in the toolbar at the top of the Figma interface. This icon typically represents various design tools.
- Select the Connector Tool: In the dropdown menu that appears, select the Connector tool.
- Choose Connector Shape: After selecting the Connector tool, you can choose between an elbow connector (which bends at right angles) or a straight line shape depending on your needs.
- Use Keyboard Shortcuts (Optional): For quicker access, you can use keyboard shortcuts:
- Press
Xor⇧ Shift Lto select the elbow connector. - Press
Lto select the straight line connector.
- Press
- Connect Objects: With the Connector tool active and your desired shape selected, click and drag your cursor from one object to another on your canvas. Figma will automatically create a connector line between them.
Connectors in Figma are smart; when you move the connected objects, the connector line automatically adjusts to stay attached.
Connector Types and Shortcuts
Figma offers two primary connector types, accessible via the toolbar or handy keyboard shortcuts:
| Connector Type | Description | Keyboard Shortcut(s) |
|---|---|---|
| Elbow | Bends at 90-degree angles. | X, ⇧ Shift L |
| Straight | A direct line between two points. | L |
Using these shortcuts can significantly speed up your diagramming workflow.
Practical Tips for Using Connectors
- Connecting to Specific Points: Connectors snap to anchor points on objects. Hover over an object to see available connection points.
- Styling Connectors: Like other strokes in Figma, you can customize the color, thickness, line style (solid, dashed), and add arrowheads to connectors using the Properties panel on the right.
- Detaching Connectors: To detach a connector from an object, simply drag one of its ends away from the object's connection point.
Adding connectors effectively helps clarify relationships and structure in your diagrams, making them easier to understand.
