Prototype presentation mode in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with the marketing team

📋 Request: Your manager wants you to create a clickable prototype to present the new dashboard design to stakeholders

📊 Data: You have the dashboard screens designed in Figma with interactive components like buttons and filters

🎯 Deliverable: A fully linked prototype in Figma that simulates user navigation and interactions for the dashboard

Sample Data

Screen Name	Elements	Interactions
Home	Menu, Sales Chart, Filter Button	Click Filter Button opens Filter Panel
Filter Panel	Date Picker, Region Selector, Apply Button	Apply Button updates Sales Chart
Details	Sales Table, Back Button	Back Button returns to Home

1

Step 1: Open your Figma file with the dashboard screens

No formula needed. Just open the file containing your designs.

Expected Result

You see all your dashboard screens ready for prototyping.

2

Step 2: Switch to the Prototype tab in Figma

Click the 'Prototype' tab next to 'Design' at the top of the Figma interface.

Expected Result

You can now create links between frames and set interactions.

3

Step 3: Create a link from the Filter Button on the Home screen to the Filter Panel screen

Select the Filter Button, drag the node to the Filter Panel frame, set interaction to 'On Click' and action to 'Navigate To'.

Expected Result

Clicking the Filter Button in prototype mode will open the Filter Panel.

4

Step 4: Link the Apply Button on the Filter Panel back to the Home screen with updated filters

Select Apply Button, drag node to Home frame, set 'On Click' to 'Navigate To' with 'Smart Animate' transition.

Expected Result

Clicking Apply returns to the Home screen with a smooth transition simulating filtered data.

5

Step 5: Link the Back Button on the Details screen to return to the Home screen

Select Back Button, drag node to Home frame, set 'On Click' to 'Navigate To'.

Expected Result

Clicking Back returns user to Home screen in prototype.

6

Step 6: Start the prototype presentation mode to test all interactions

Click the Play icon in the top-right corner of Figma to launch the prototype window.

Expected Result

You can click buttons and navigate screens as if using the real dashboard.

Final Result

Home

[Filter Btn]

→Filter Panel

↓

Details

[Back Btn]

✓Prototype presentation mode lets you simulate user clicks and navigation.

✓Linking buttons to frames creates interactive flows.

✓Smart Animate transitions make the prototype feel smooth.

✓Stakeholders can experience the dashboard before development.

Bonus Challenge

Add hover effects and overlay panels in your prototype to enhance realism.

Show Hint

Use 'While Hovering' interactions and 'Open Overlay' actions in Figma prototype settings.