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.

Practice

1. What is the main purpose of testing responsive designs in a Figma prototype?

easy

A. To add more colors and fonts to the design

B. To ensure the design adapts well to different screen sizes and devices

C. To create static images for presentations

D. To export the design as a PDF file

Solution

1. Step 1: Understand responsive design goals

   Responsive design means the layout changes smoothly on different screen sizes.

2. Step 2: Identify prototype testing purpose

   Testing ensures the prototype looks and works well on phones, tablets, and desktops.

3. Final Answer:

   To ensure the design adapts well to different screen sizes and devices -> Option B

4. Quick Check:

   Responsive design = adapt to devices [OK]

Hint: Responsive means design fits all screen sizes [OK]

Common Mistakes:

• Confusing responsive testing with adding colors
• Thinking prototypes are only for static images
• Believing exporting files is the main goal

2. Which Figma feature helps you test how your prototype looks on different devices without manually resizing?

easy

A. Device presets in prototype mode

B. Pen tool for drawing shapes

C. Text styles for fonts

D. Export options for images

Solution

1. Step 1: Identify prototype mode features

   Figma prototype mode includes device presets like iPhone, iPad, desktop.

2. Step 2: Understand device presets use

   These presets simulate screen sizes automatically without manual resizing.

3. Final Answer:

   Device presets in prototype mode -> Option A

4. Quick Check:

   Device presets = auto screen size test [OK]

Hint: Use device presets to avoid manual resizing [OK]

Common Mistakes:

• Confusing pen tool with prototype testing
• Thinking text styles affect responsiveness
• Believing export options help test layouts

3. In a Figma prototype, if a frame uses Auto Layout with horizontal direction and fixed width, what happens when you preview on a smaller screen?

medium

A. The prototype shows an error and stops

B. The content automatically stacks vertically

C. The frame resizes to fit the screen width

D. The content overflows and may be cut off

Solution

1. Step 1: Understand Auto Layout with fixed width

   Fixed width means the frame size does not change with screen size.

2. Step 2: Predict behavior on smaller screen

   Since width is fixed, content won't shrink or stack, causing overflow.

3. Final Answer:

   The content overflows and may be cut off -> Option D

4. Quick Check:

   Fixed width + small screen = overflow [OK]

Hint: Fixed width frames don't resize on small screens [OK]

Common Mistakes:

• Assuming Auto Layout always stacks content
• Thinking fixed width frames resize automatically
• Believing prototype crashes on overflow

4. You notice your prototype frame does not resize on mobile preview despite using constraints. What is the likely cause?

medium

A. The frame has a fixed width set instead of 'Fill container' constraint

B. Auto Layout is not enabled on the frame

C. You forgot to add interactions in prototype mode

D. The prototype is set to desktop device preset

Solution

1. Step 1: Check constraints settings

   Fixed width prevents resizing; 'Fill container' allows flexible width.

2. Step 2: Understand effect on mobile preview

   Fixed width frames stay same size, ignoring smaller screen width.

3. Final Answer:

   The frame has a fixed width set instead of 'Fill container' constraint -> Option A

4. Quick Check:

   Fixed width blocks resizing [OK]

Hint: Use 'Fill container' for responsive width [OK]

Common Mistakes:

• Thinking Auto Layout alone fixes resizing
• Confusing interactions with resizing issues
• Ignoring device preset impact on resizing

5. You want your Figma prototype to adapt fluidly on all devices, stacking elements vertically on narrow screens and horizontally on wide screens. Which combination helps achieve this?

hard

A. Use only constraints without Auto Layout and rely on device presets

B. Set fixed widths on all frames and manually resize for each device preset

C. Use Auto Layout with horizontal direction and add a component variant for vertical layout triggered by screen width

D. Create separate prototypes for each device size without responsive features

Solution

1. Step 1: Understand layout direction control

   Auto Layout direction controls stacking horizontally or vertically.

2. Step 2: Use component variants for responsiveness

   Variants can switch layouts based on screen width or user interaction.

3. Step 3: Combine Auto Layout and variants for fluid design

   This allows dynamic switching between horizontal and vertical stacking as screen size changes.

4. Final Answer:

   Use Auto Layout with horizontal direction and add a component variant for vertical layout triggered by screen width -> Option C

5. Quick Check:

   Auto Layout + variants = fluid responsive design [OK]

Hint: Combine Auto Layout and variants for flexible layouts [OK]

Common Mistakes:

• Relying only on fixed widths and manual resizing
• Ignoring Auto Layout's power for stacking
• Creating multiple prototypes instead of responsive design