How To Create Connections in Figma

Congratulations! You got to the aspect that makes Figma a special and helpful software: Prototyping. In this tutorial, we will explain How To Create Connections in Figma and how you can have fun during this process. Let’s go!

The Magic of Connections

Take the title in its metaphorical and literal way. Prototyping comes to life when we create connections. It is what makes all the processes come together and defines the flow of the User Journey. 

NOTE: We suggest checking How to Create Flows and Starting Points in Figma to learn more about it.

Therefore, a connection in Figma can be defined as the action of linking elements within frames to create interaction between them, so if we click a button in the prototype, it will take us somewhere in the application design, just like an actual running app. 

dSJ QF7 ySbKxP45M4ryTG5q1q8fwNMIeCEAgcDSvbjHF8k7lqw9 2ybx UXL8EihvXIlsxDfC5mvzSf9VbVPUHQJYjBHm6WoJuXqbL 3jBoFOYc3dQoVMJIrQuerNX0aCGkqOvD6YAwTcgMjDdklZ4GVBI8P37i4fQlPOkMYfOo TpW52vX4MygTN8QZl6D

How to Create a Connection in Figma

Once you have finished the design phase, it is time to switch to the prototype tab. Next is to select the hotspot for the connection. The example shows the exercise button, which we will link to the exercise page. 

kpBZcyBxvdJlV YY5FHiNdOghGo1AiAhhxPR4YvSeltP0CLVP5NE8xHC2eGJCvbkUxhZAJ3 7s hc0oKuuRoKnFtMktSRqIxUm

Press the + option that shows over the icon and draw the connection to the page the exercise button must lead to, and immediately a menu will display.

M6kzjBswRJIRF Sp6do3d8TrZ1jsOPPDUARGe P0gS Ezj7jzV5df3OcIQES4Tcz4VfLWiJP9ugF6kR2JcMuEMO5bgCDNO18qhmMWWaGXvp7u35MGlV5KucBjFVXU2wz7kZRpB

This menu shows how is going the user interacts with the connection we just made and what happens when you press on it. The Interaction details depend on the application design. We want to ensure the option Navigate to goes to the right place. Once you finish making the connections, the prototype must look something like the image of reference.

QZ13D684IBBXdDYXZewsWa16YoHw676rSnqUf84ggvZ5SNLZEs2bC6LxcWgQ Fc8 b8qH BtwAgDGzZIvijwjmpI1hbWt2Zm2aSgpsxGpgzAZyRydDrc1Q6VssD55q4q3lwcie2cKSqan

Finally, with each connection you make, Figma will establish a flow for the frames of the prototype and get ready to see it come to life by pressing the arrow-looking icon next to the Share option top right of the screen. That’s it, have fun with Figma, and stay tuned!