Testing responsive designs in prototype in Figma - Dashboard Guide

Dashboard Mode - Testing responsive designs in prototype

Goal

How to test if a dashboard prototype adapts well to different screen sizes using Figma's responsive design features.

Sample Data

Screen Size	Width (px)	Height (px)	Expected Layout
Mobile	375	667	Single column, stacked cards
Tablet	768	1024	Two columns, cards side by side
Desktop	1440	900	Three columns, full dashboard
Large Desktop	1920	1080	Three columns with extra spacing
Small Desktop	1024	768	Two columns, compact layout

Dashboard Components

• KPI Cards: Show total sales, total customers, and average order value. Use auto layout with constraints to resize horizontally.
• Bar Chart: Monthly sales by region. Set to resize width with container.
• Filter Panel: Region and date slicers pinned to top-left, collapsible on small screens.
• Navigation Menu: Horizontal on desktop, hamburger menu on mobile.

Responsive Settings: Use Figma constraints and auto layout to make components adapt. For example, KPI cards stack vertically on mobile but align horizontally on desktop.

Dashboard Layout (ASCII Art)

+-----------------------------+
| Filter Panel    | Nav Menu   |
+-----------------------------+
| KPI Card 1 | KPI Card 2 | KPI Card 3 |
+-------------------------------------+
|           Bar Chart                 |
+-------------------------------------+

Responsive changes:
- Mobile: Filter Panel collapses, Nav Menu becomes hamburger
- KPI Cards stack vertically
- Bar Chart resizes to full width

Interactivity

Filters update the bar chart and KPI cards dynamically. On mobile, filter panel can be toggled to show or hide. Navigation menu changes layout based on screen size. Prototype uses Figma's device frames to preview responsiveness.

Self Check

Try resizing the prototype frame to tablet size (768x1024). Which components change layout? What happens to the navigation menu and filter panel?

Key Result

A Figma prototype dashboard that adapts layout and navigation for mobile, tablet, and desktop screen sizes using responsive design features.