Adaptive vs responsive strategy in Figma - Business Scenario Comparison

Scenario Mode

👤 Your Role: You are a UX designer working with the marketing team

📋 Request: Your manager wants a clear comparison of adaptive and responsive design strategies for the company website redesign project

📊 Data: You have data on user device types, screen sizes, and current website performance metrics

🎯 Deliverable: Create a Figma dashboard that visually compares adaptive and responsive strategies with examples, pros and cons, and recommended use cases

Sample Data

Device Type	Screen Width (px)	Current Load Time (s)	Current Bounce Rate (%)
Desktop	1920	2.5	30
Laptop	1366	2.8	35
Tablet	768	3.2	40
Mobile	375	4.0	50
Mobile	414	3.8	48
Tablet	1024	3.0	38
Desktop	2560	2.3	28
Laptop	1440	2.6	33

1

Step 1: Organize the data by device type and screen width to understand user distribution

Sort the sample data table by 'Device Type' ascending and 'Screen Width (px)' descending

Expected Result

Data sorted showing Desktop, Laptop, Tablet, Mobile devices grouped with their screen widths

2

Step 2: Create two frames in Figma: one for Adaptive Design and one for Responsive Design

Frame 1 titled 'Adaptive Design' and Frame 2 titled 'Responsive Design' with equal size

Expected Result

Two side-by-side frames ready for content and visuals

3

Step 3: In the Adaptive Design frame, add text blocks explaining that adaptive design uses fixed layouts for specific screen sizes

Add bullet points: 'Multiple fixed layouts', 'Detects device type', 'Loads layout matching device', 'Better control over design per device'

Expected Result

Clear explanation of adaptive design strategy visible

4

Step 4: In the Responsive Design frame, add text blocks explaining that responsive design uses flexible grids and media queries to adjust layout fluidly

Add bullet points: 'Single fluid layout', 'Uses CSS media queries', 'Adjusts to any screen size', 'Consistent experience across devices'

Expected Result

Clear explanation of responsive design strategy visible

5

Step 5: Add visual examples in each frame: for Adaptive, show fixed layout boxes for Desktop, Tablet, Mobile; for Responsive, show a fluid grid resizing across screen widths

Use rectangles and grids in Figma to illustrate fixed vs fluid layouts

Expected Result

Visual comparison of layout behavior for adaptive and responsive strategies

6

Step 6: Add a comparison table below the frames listing pros and cons of each strategy

Create a 3-column table with columns: 'Feature', 'Adaptive Design', 'Responsive Design'. Fill rows with pros and cons such as 'Performance', 'Design Control', 'Development Complexity', 'User Experience'

Expected Result

Table clearly showing strengths and weaknesses side by side

7

Step 7: Add a summary section recommending when to use each strategy based on device data and business needs

Add text: 'Use Adaptive when targeting specific devices with tailored experiences. Use Responsive for broad device coverage and easier maintenance.'

Expected Result

Summary guidance visible to help decision making

8

Step 8: Ensure the Figma dashboard uses accessible colors with good contrast and readable fonts

Check color contrast ratios and font sizes meet accessibility standards

Expected Result

Dashboard is easy to read and accessible for all users

Final Result

-------------------------------------------------------------
| Adaptive Design                 | Responsive Design        |
|-----------------------------------------------------------|
| - Multiple fixed layouts       | - Single fluid layout    |
| - Detects device type          | - Uses CSS media queries |
| - Loads layout per device      | - Adjusts to any screen  |
| - Better design control        | - Consistent experience  |
|                                                             |
| [Fixed boxes for Desktop, Tablet, Mobile]  [Fluid grid resizing] |
|                                                             |
| Feature           | Adaptive Design | Responsive Design       |
|-----------------------------------------------------------|
| Performance       | High (optimized) | Moderate                |
| Design Control    | High             | Moderate                |
| Development       | Complex          | Simpler                 |
| User Experience   | Tailored         | Consistent              |
|-----------------------------------------------------------|
| Summary: Use Adaptive for specific devices. Use Responsive for broad coverage. |
-------------------------------------------------------------

✓Adaptive design offers better performance and tailored experiences for specific devices.

✓Responsive design provides a consistent experience across all devices with simpler maintenance.

✓Current user data shows a mix of device types, suggesting responsive design covers more users easily.

✓Choosing the right strategy depends on business goals: control vs coverage.

Bonus Challenge

Create interactive prototypes in Figma demonstrating how the website layout changes with adaptive and responsive strategies on different device frames.

Show Hint

Use Figma's interactive components and device frames to simulate layout changes on click or resize.