Navigate to frame in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business analyst preparing a sales performance report in Figma.

📋 Request: Your manager wants you to quickly switch between different monthly sales dashboards within the Figma file to review and present data.

📊 Data: The Figma file contains multiple frames named by month, each with charts and KPIs for that month's sales data.

🎯 Deliverable: Create a simple navigation setup in Figma that allows you to jump directly to any monthly sales frame with a single click.

Sample Data

Frame Name	Description
January	Sales dashboard for January
February	Sales dashboard for February
March	Sales dashboard for March
April	Sales dashboard for April
May	Sales dashboard for May

1

Step 1: Create a new frame named 'Navigation Menu' on the left side of your Figma canvas.

Use the Frame tool (F) and name the frame 'Navigation Menu'.

Expected Result

A new frame called 'Navigation Menu' appears on the canvas.

2

Step 2: Inside the 'Navigation Menu' frame, create text buttons for each month frame you want to navigate to.

Use the Text tool (T) to write 'January', 'February', 'March', 'April', and 'May' stacked vertically with spacing.

Expected Result

Five text elements labeled with month names appear inside the 'Navigation Menu' frame.

3

Step 3: Select the 'January' text, then add an interaction to navigate to the 'January' frame on click.

In the Prototype tab, set 'On Click' action to 'Navigate To' and choose the 'January' frame.

Expected Result

Clicking the 'January' text navigates to the 'January' frame.

4

Step 4: Repeat the interaction setup for each month text button, linking them to their respective frames.

Set 'On Click' > 'Navigate To' for 'February' to 'February' frame, and so on for March, April, May.

Expected Result

Clicking any month text navigates to the corresponding monthly sales frame.

5

Step 5: Test the navigation by entering Prototype mode and clicking each month button to verify it jumps to the correct frame.

Click the Present button and interact with the navigation menu.

Expected Result

Each button correctly navigates to its monthly sales dashboard frame.

Final Result

Navigation Menu Frame
---------------------
| January           |
| February          |
| March             |
| April             |
| May               |
---------------------

Clicking any month name takes you directly to that month's sales dashboard frame.

✓Creating a navigation menu in Figma helps quickly switch between different report frames.

✓Using prototype links improves presentation flow and user experience.

✓This setup saves time during meetings by avoiding manual scrolling.

Bonus Challenge

Add a 'Home' button in the navigation menu that always takes you back to a main summary frame.

Show Hint

Create a frame named 'Summary' and link the 'Home' text button to it using the same 'Navigate To' interaction.