Dashboard Mode - Device-specific frames (mobile, desktop, tablet)
Dashboard Goal
Create a dashboard design that adapts to different devices: mobile, tablet, and desktop. This helps users see data clearly no matter what device they use.
0
0
Device-specific frames (mobile, desktop, tablet) in Figma - Dashboard Guide
Sample Data
| Device | Screen Width (px) | Screen Height (px) | Typical Use |
|---|---|---|---|
| Mobile | 375 | 667 | On the go, quick checks |
| Tablet | 768 | 1024 | Portable, more space |
| Desktop | 1440 | 900 | Full workspace, detailed view |
Dashboard Components
- KPI Card: Shows total sales. Formula:
Total Sales = SUM(Sales). Displays a big number for quick insight. - Bar Chart: Sales by Region. Uses sample sales data grouped by region.
- Line Chart: Sales over Time. Shows trend of sales across months.
- Data Table: Detailed sales data with columns: Date, Region, Sales.
- Device Frames: Three frames sized for Mobile (375x667 px), Tablet (768x1024 px), Desktop (1440x900 px) to preview dashboard layout on each device.
Dashboard Layout
+----------------------+----------------------+--------------------------+ | Desktop Frame | Tablet Frame | Mobile Frame | | (1440x900 px) | (768x1024 px) | (375x667 px) | | +------------------+ | +----------------+ | +---------------------+ | | | KPI Card | | | KPI Card | | | KPI Card | | | +------------------+ | +----------------+ | +---------------------+ | | +------------------+ | +----------------+ | +---------------------+ | | | Bar Chart | | | Bar Chart | | | Bar Chart | | | +------------------+ | +----------------+ | +---------------------+ | | +------------------+ | +----------------+ | +---------------------+ | | | Line Chart | | | Line Chart | | | Line Chart | | | +------------------+ | +----------------+ | +---------------------+ | | +------------------+ | +----------------+ | +---------------------+ | | | Data Table | | | Data Table | | | Data Table | | | +------------------+ | +----------------+ | +---------------------+ | +----------------------+----------------------+--------------------------+
Interactivity
Filters and slicers apply across all device frames. For example, selecting a region updates the Bar Chart, Line Chart, KPI Card, and Data Table in all frames simultaneously. This shows how the dashboard adapts and remains consistent on mobile, tablet, and desktop views.
Self Check
Add a filter for Region = 'East'. Which components update in the Mobile frame? Answer: The KPI Card, Bar Chart, Line Chart, and Data Table all update to show data only for the East region.
Key Result
A responsive dashboard design previewed in device-specific frames for mobile, tablet, and desktop showing sales KPIs and charts.