Skip to content

What is a Prototype?

Prototypes are interactive mockups that demonstrate how your product will look when it is built. They serve as a bridge between the design and development phases, and allow designers to gather feedback before investing resources in production. This page will discuss how to create, connect and animate your prototypes in Figma.

Why use Protoypes?

Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs.

Prototypes are a fantastic way to:

  • Preview interactions and user flows.
  • Share and iterate on ideas.
  • Get feedback from collaborators.
  • Test interactions with users.
  • Present your designs to stakeholders.

What is a User Flow?

With prototyping in Figma, you can create multiple user flows for your prototype in one page. A user flow creates an example of your users journey, and demonstrates how the different screens in your project are connected. When you click a button, Figma takes you to the next step in the process, just like your user would see in your final product. This allows you to preview a user's full experience while using your design .

For example: Home Screen -> Tap Shop Now -> Products Page -> Select an item -> Cart Page

Each of these steps is part of a flow, showing how users navigate through your app or website. It helps designers test ideas before writing any code, making sure everything works smoothly!

Flow Starting Points

Figma creates a flow starting point when you add your first connection between two frames. There are a few other ways to add a flow starting point to your prototype:

  • With the starting frame selected, click + in the Flow starting point section of the right sidebar.
  • Right-click on the frame, then click Add starting point.
  • Duplicate a frame with an existing starting point.

When it's time to test your designs, you can share the entire prototype or copy the link to a flow starting point.

⚠️ Note: In Figma, a top-level frame is the main page of your app or website.

This main page can be part of different flows, but it can only have one starting point. However, inside this main page, you can have buttons or links that lead to different experiences.

For example: A Log In and Sign Up button can both be inside the same starting screen. Clicking Log In will take the user to the start of one flow, while clicking Sign Up will take them to the start of a different journey. Even though they start in the same place, they lead to different end points!

Frames nested within a top-level starting page can have connections that navigate the user towards multiple flows.

Create Connections

  1. Select the button that you would like to react.
  2. Click + to create the connection.
  3. Drag it to the destination.
  4. If there are no existing connections, Figma will make the first frame a starting point.
⚠️ Tip: You can create connections from multiple objects to the same destination frame at the same time—saving you time and effort when building out your prototype flows.

To do so:

  • Select multiple starting points on your canvas.
  • Click and drag the + icon to the destination.

Grid Example

Create Interactions and Animations

  1. Open the Prototype tab in the right sidebar.
  2. Add interactions.
  3. Set interaction details.
  4. Apply an animation.
  5. Preview your animation.

Grid Example

Adjust Prototype Settings

  1. Select a Device and Model.
  2. Preview your prototype.
  3. Select Background color.
  4. Set the prototype's Starting Frame.

Grid Example

Next Steps

Having created your new prototype, you can now read more about presenting it to clients or colleagues. Visit presenting prototypes for more information on showcasing your design!