How to Create Flows and Starting Points in Figma

Writer
Updated on: November 21, 2022

Congratulations! You got to the fun part of UX/UI design: Prototyping. In this tutorial, we will explain How to Create Flows and Starting Points in Figma and how you can have fun during this process. Let’s go!

Letting the Prototype Flow

Yes, let it flow. Create the flow. What we mean by it is how the user will smoothly navigate through the application. For this process is important that you previously mapped the User Journey; this way, we can create Flows within our projects that support the user experience. We call Flows to the network of connections and frames on a single page.

xYZBKiH2gwcvjDopubKeNSdqFe3AG520AQHTBl TMR473sADvH1SOjEbISMUD 29RLrv wUJ8xfYkCOmQ6Nx

How to Create a Flow in Figma

A Flow is a point of connection between frames on a single page. The flow starting point menu is located at the right sidebar. There are a few ways to create a Flow starting point:

  • You can right-click on the frame and then click Add Starting Point
  • Another way is to select the frame and click + in the Flow Starting Point Section
  • Finally, you can simply duplicate the frame with an existing starting point.

Prototypes can map out the entire User Journey or simply one aspect of it. For example, you want to prototype just the chat section of a messenger application to show how it flows instead of prototyping the whole interface of the application. The prototype will contain the flow and starting points of each user interaction in this section, typing, sending the message, displaying the emoticons menu, and so on. 

aXCSgdN29KTmifICcStU5et4mpIusgP0MWw79yqVTgu3jSPjFJkiD31raWOVlpFsuSf5gx7UqGk

This is how the finishing process of generating the flow and starting points of frames should look, and get ready to see that prototype in action! Prototyping is what makes Figma a complete game changer, so go on and have fun using the software.

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram