Prototype mode overview in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working on a new app interface.

📋 Request: Your manager wants you to create a clickable prototype to demonstrate the app's user flow.

📊 Data: You have the app's wireframes and design screens ready in Figma.

🎯 Deliverable: A clickable prototype in Figma that shows the main user interactions and navigation.

Sample Data

Screen Name	Description	Interaction
Login	User enters credentials	Click 'Login' button
Home	Main dashboard	Click menu items
Profile	User profile details	Click 'Edit' button
Settings	App settings options	Toggle switches
Help	FAQ and support	Click links

1

Step 1: Open your Figma file containing the app screens.

No formula needed. Just open the file.

Expected Result

You see all the app screens arranged in your Figma workspace.

2

Step 2: Switch to Prototype mode in Figma by clicking the 'Prototype' tab on the right panel.

No formula needed. Just click the 'Prototype' tab.

Expected Result

The right panel changes to show prototyping options.

3

Step 3: Select the 'Login' screen frame, then drag the circular node from the 'Login' button to the 'Home' screen frame to create a link.

Interaction: On Click, Navigate To: Home screen

Expected Result

Clicking the 'Login' button in prototype will navigate to the Home screen.

4

Step 4: Repeat linking for other navigation points: from Home to Profile, Profile to Settings, and Settings to Help using the same drag-and-link method.

Interactions: On Click, Navigate To respective screens

Expected Result

All main navigation flows are linked for user interaction.

5

Step 5: Set the transition animation for each link to 'Instant' for quick navigation.

Transition: Instant

Expected Result

Screen changes happen immediately when clicking buttons.

6

Step 6: Click the 'Present' button at the top-right corner to preview your clickable prototype.

No formula needed. Just click 'Present'.

Expected Result

A new window opens showing the interactive prototype where you can test navigation.

Final Result

Login

→Home

↓

Profile

Profile

↓

Settings

Settings

↓

Help

Help

✓Prototype mode in Figma allows linking screens with simple drag-and-drop.

✓You can set interactions like 'On Click' to navigate between screens.

✓Transition animations can be customized for smooth user experience.

✓The 'Present' mode lets you test the prototype as if it were a real app.

Bonus Challenge

Add a back navigation link from each screen to the previous screen to simulate user going back.

Show Hint

Use the same drag-and-link method in Prototype mode, set interaction to 'On Click' and navigate to the previous screen.