Dashboard Mode - Navigate to frame
Goal
Help users quickly jump to a specific frame in a Figma design file to review or present data visuals.
0
0
Navigate to frame in Figma - Dashboard Guide
Sample Data
| Frame Name | Description |
|---|---|
| Dashboard Overview | Main summary of sales KPIs |
| Sales by Region | Bar chart showing sales per region |
| Monthly Trends | Line chart of sales over months |
| Product Breakdown | Pie chart of sales by product category |
| Customer Feedback | Text and sentiment analysis visuals |
Dashboard Components
- Frame List Panel: A sidebar listing all frame names for navigation.
- Current Frame View: The main area showing the selected frame's content.
- Navigation Buttons: Next and Previous buttons to move between frames sequentially.
Navigation Action: Clicking a frame name or navigation button triggers the figma.viewport.scrollAndZoomIntoView([frame]) method to focus on that frame.
Dashboard Layout
+----------------------+----------------------------+ | Frame List Panel | Current Frame View | | (Frame names list) | (Selected frame content) | | | | | | | | | | | | | | | | | | | +----------------------+----------------------------+ | Navigation Buttons (Prev / Next) | +-----------------------------------------------------------------------------+
Interactivity
When a user clicks a frame name in the Frame List Panel, the viewport scrolls to that frame. The Current Frame View updates to show that frame's content.
Navigation Buttons allow moving to the previous or next frame in the list, updating the Current Frame View and viewport accordingly.
Self Check
If you click the "Sales by Region" frame in the Frame List Panel, which components update?
- The Current Frame View updates to show the "Sales by Region" frame content.
- The viewport scrolls to bring the "Sales by Region" frame into view.
Key Result
A Figma navigation panel to jump between frames showing different BI visuals.