To create a connection in Figma, you typically use the connection node that appears on a layer or object and drag an arrow to your desired destination frame.
Creating interactions between elements and frames is a fundamental part of prototyping in Figma. These connections, often represented by arrows, link a starting point (like a button or icon) to a destination (like another frame or component state), defining the user flow of your design.
Step-by-Step Guide to Creating a Connection
Based on common Figma workflow and the provided reference, here's how you create a connection, especially when dealing with nested elements:
-
Select the Starting Element: Navigate to the element you want to initiate the interaction. This could be a button, an icon, or any layer within your design.
- Practical Tip: If the element is inside a frame, group, or component instance (i.e., it's nested), you might need to double-click or triple-click to select the specific layer within the container. For example, to connect from a menu icon within a header component, you would double-click the icon itself to select it directly.
-
Locate the Connection Node: Once the desired layer or object is selected, a small circular connection node appears on its bounding box. This node is the starting point for your interaction arrow.
-
Initiate the Connection: Click the connection node on the selected element. An arrow will begin to trail from the node as you move your cursor.
-
Drag to the Destination: Drag the arrow over the destination frame or component state that you want the interaction to lead to. As you hover over potential destinations, they often highlight.
-
Complete the Connection: Release the mouse button when the arrow is over the target frame. This action completes the connection, and an interaction panel will typically pop up, allowing you to define the specific Interaction Details.
Defining Interaction Details
After creating the visual connection arrow, the interaction panel appears, allowing you to configure:
- Trigger: What action initiates the connection? (e.g.,
On Tap,On Click,On Drag,While Hovering,After Delay). - Action: What happens when the trigger occurs? (e.g.,
Navigate To,Open Overlay,Swap With,Scroll To,Back,Close Overlay,Set Variable,Change To). - Destination: The frame, overlay, or state you dragged the arrow to.
- Animation: How the transition between the start and destination occurs (e.g.,
Instant,Dissolve,Smart Animate,Move In,Push,Slide In).
| Step | Action | Key Detail (from reference) |
|---|---|---|
| 1. Select Element | Find and select the specific layer (e.g., icon, button). | Because the menu icon is nested, we need to double-click to select it. |
| 2. Find Connection Node | Look for the circle node on the selected element. | Once the connection node appears... |
| 3. Start Dragging | Click the node and drag. | ...click the connection icon to create an arrow and drag it... |
| 4. Target Destination | Hover the arrow over the frame or target you want to connect to. | ...over the destination frame. |
| 5. Release Mouse Button | Let go of the mouse to finalize the connection. | Release to complete the connection. |
By following these steps, you can successfully create connections in your Figma prototypes, bringing your static designs to life with interactive flows.
