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.

Practice

1. What is the main purpose of Prototype presentation mode in Figma?

easy

A. To export images and assets

B. To edit vector shapes and colors

C. To write code for your design

D. To interact with your design like a real app

Solution

1. Step 1: Understand Prototype presentation mode

   This mode allows you to click through your design as if it were a working app.

2. Step 2: Compare with other Figma features

   Editing shapes or exporting assets are done in other modes, not prototype presentation.

3. Final Answer:

   To interact with your design like a real app -> Option D

4. Quick Check:

   Prototype presentation mode = interact like app [OK]

Hint: Prototype mode = test design interaction [OK]

Common Mistakes:

• Confusing prototype mode with design editing
• Thinking prototype mode is for coding
• Mixing export features with prototype mode

2. Which of the following is the correct way to start Prototype presentation mode in Figma?

easy

A. Press Ctrl + E to export the file

B. Click the Play button in the top-right corner

C. Double-click a frame to edit it

D. Right-click and select 'Duplicate'

Solution

1. Step 1: Locate the Prototype presentation mode start

   The Play button in the top-right corner starts the prototype presentation.

2. Step 2: Eliminate other options

   Exporting, editing, or duplicating are unrelated to starting prototype mode.

3. Final Answer:

   Click the Play button in the top-right corner -> Option B

4. Quick Check:

   Play button = start prototype [OK]

Hint: Play button starts prototype mode [OK]

Common Mistakes:

• Confusing export shortcut with prototype start
• Trying to edit instead of present
• Using right-click for prototype start

3. In Prototype presentation mode, if you set a link from Frame A to Frame B on a button, what happens when you click that button during presentation?

medium

A. The prototype navigates to Frame B

B. Nothing happens because links don't work in presentation

C. The button edits the frame content

D. The prototype closes automatically

Solution

1. Step 1: Understand link behavior in prototype mode

   Links between frames allow navigation when clicked during presentation.

2. Step 2: Analyze other options

   Links do work, buttons don't edit content, and prototype does not close automatically.

3. Final Answer:

   The prototype navigates to Frame B -> Option A

4. Quick Check:

   Click linked button = go to linked frame [OK]

Hint: Click linked button = navigate frame [OK]

Common Mistakes:

• Thinking links don't work in presentation
• Confusing prototype with design editing
• Expecting prototype to close on click

4. You set up a prototype but clicking a button during presentation does nothing. What is the most likely cause?

medium

A. The frame is locked

B. The prototype mode is off

C. The button has no interaction link set

D. The file is not saved

Solution

1. Step 1: Check interaction setup

   If clicking does nothing, likely no link or interaction is assigned to the button.

2. Step 2: Consider other causes

   Prototype mode must be on to test; frame locking or saving does not block clicks in presentation.

3. Final Answer:

   The button has no interaction link set -> Option C

4. Quick Check:

   No click response = no interaction link [OK]

Hint: No click action? Check interaction link [OK]

Common Mistakes:

• Assuming prototype mode is off without checking
• Thinking locked frames block prototype clicks
• Believing saving affects prototype interaction

5. You want to test a user flow where clicking a menu opens a submenu and then clicking an item navigates to a detail page. How should you set this up in Prototype presentation mode?

hard

A. Link the menu to the submenu frame, then link submenu items to detail frames

B. Create one big frame with all menus and detail pages visible

C. Use the Design mode to group all elements without links

D. Export each frame separately and test outside Figma

Solution

1. Step 1: Set up navigation links between frames

   Link the menu frame to the submenu frame to simulate opening the submenu.

2. Step 2: Link submenu items to their detail frames

   Each submenu item should link to its corresponding detail page frame for navigation.

3. Step 3: Avoid incorrect setups

   One big frame or design mode grouping won't simulate user flow; exporting frames separately is not prototype testing.

4. Final Answer:

   Link the menu to the submenu frame, then link submenu items to detail frames -> Option A

5. Quick Check:

   Sequential links = user flow test [OK]

Hint: Chain frame links to test user flows [OK]

Common Mistakes:

• Trying to put all screens in one frame
• Not linking submenu items to detail pages
• Confusing design mode with prototype mode