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!
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.
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.
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.
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.
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!
