Prototype presentation mode in Figma - Step-by-Step Guide

Introduction

Prototype presentation mode in Figma lets you show your design as a clickable demo. It helps you share how your app or website will work without writing code.

When you want to show your app design to a client and get feedback on navigation.

When you need to test user flows before development starts.

When you want to demonstrate how buttons and links behave in your design.

When you want to share a working demo with your team without exporting files.

When you want to practice a presentation of your design with interactive screens.

Steps

Step 1: Click

- Prototype tab in the right sidebar

The prototype settings panel opens showing interaction options

Step 2: Select

- Frame or element with a prototype link

The interaction details appear in the Prototype tab

Step 3: Click

- Play icon (Present) in the top-right corner

The prototype opens in presentation mode in a new window

Step 4: Click or tap

- Interactive elements in the prototype window

The prototype navigates between frames as designed

Step 5: Press

- Escape key or Close button in the prototype window

The presentation mode closes and returns to the Figma editor

Before vs After

Before

Figma file shows static frames with no interactive preview

After

Prototype window opens showing clickable frames that navigate as designed

Settings Reference

Starting Frame

📍 Prototype tab > Starting Frame dropdown

Sets which frame the prototype opens on when presented

Default: First frame in the file

Device Frame

📍 Prototype tab > Device dropdown

Shows the prototype inside a device frame for realistic preview

Default: None

Background Color

📍 Prototype tab > Background color picker

Sets the background color behind the prototype frames

Default: Transparent

Interaction Trigger

📍 Prototype tab > Interaction details

Defines how the user triggers the prototype interaction

Default: On Click

Common Mistakes

Not setting a starting frame before presenting

The prototype may open on an unintended frame or show a blank screen

Always select the correct starting frame in the Prototype tab before clicking Present

Forgetting to create interaction links between frames

Clicking in presentation mode does nothing and navigation fails

Use the Prototype tab to drag connections from buttons to target frames

Summary

Prototype presentation mode lets you show your design as a clickable demo.

You must set a starting frame and create interaction links for navigation.

Use the Play icon to open and test your prototype in a new window.