Testing responsive designs in prototype in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working on a new business intelligence dashboard.

📋 Request: Your manager wants you to test how the dashboard prototype adapts to different screen sizes before development starts.

📊 Data: You have a Figma prototype of the dashboard with frames designed for desktop, tablet, and mobile views.

🎯 Deliverable: Produce a report showing the prototype's behavior on various screen sizes and identify any layout or usability issues.

Sample Data

Frame Name	Width (px)	Height (px)	Device Type	Key Components
Dashboard Desktop	1440	900	Desktop	Sidebar, Chart Area, Filters, Header
Dashboard Tablet	768	1024	Tablet	Collapsible Sidebar, Chart Area, Filters, Header
Dashboard Mobile	375	667	Mobile	Hamburger Menu, Chart Area, Filters, Header
Login Screen	375	667	Mobile	Login Form, Buttons
Settings Panel	768	1024	Tablet	Settings Options, Save Button

1

Step 1: Open the Figma prototype and select the Desktop frame (1440x900).

Use Figma's Prototype tab to start the prototype from the Desktop frame.

Expected Result

The dashboard displays fully with sidebar, charts, filters, and header visible.

2

Step 2: Resize the prototype window to Tablet size (768x1024) using Figma's device preview or manual resizing.

Switch the prototype start frame to Dashboard Tablet or resize the window accordingly.

Expected Result

Sidebar collapses, charts and filters adjust layout, header remains visible without overlap.

3

Step 3: Test the prototype on Mobile size (375x667) by selecting the Dashboard Mobile frame.

Start prototype from Dashboard Mobile frame or resize preview window to mobile dimensions.

Expected Result

Sidebar replaced by hamburger menu, charts stack vertically, filters accessible, header fits screen.

4

Step 4: Interact with navigation elements on each device size to check usability (e.g., open sidebar, use filters).

Click hamburger menu on mobile, toggle sidebar on tablet, use filters on desktop.

Expected Result

Navigation elements respond correctly without layout breaking or content clipping.

5

Step 5: Document any layout issues or usability problems found during testing for each screen size.

Note down issues such as overlapping text, hidden buttons, or difficult navigation.

Expected Result

A list of issues with screenshots or descriptions ready for the development team.

Final Result

Responsive Design Testing Report

+----------------+------------+-----------------------------+
| Device         | Screen Size| Observations                |
+----------------+------------+-----------------------------+
| Desktop        | 1440x900   | Full layout visible, no issues|
| Tablet         | 768x1024   | Sidebar collapses correctly, |
|                |            | filters accessible          |
| Mobile         | 375x667    | Hamburger menu works, charts|
|                |            | stack vertically, header OK |
+----------------+------------+-----------------------------+

✓The dashboard adapts well to desktop and tablet sizes with no major layout issues.

✓On mobile, the hamburger menu replaces the sidebar effectively, but some filter buttons are small and hard to tap.

✓Charts resize properly but some labels overlap on the smallest screen.

✓Navigation is intuitive across all devices, but accessibility improvements are needed for mobile touch targets.

Bonus Challenge

Create interactive prototype variants that simulate user errors like slow network or screen rotation to test responsiveness further.

Show Hint

Use Figma's interactive components and overlays to simulate loading states and add frames for landscape orientation.