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.

Practice

1. What is the main difference between adaptive and responsive design strategies in BI dashboards?

easy

A. Adaptive uses fixed layouts for specific screen sizes, responsive adjusts smoothly.

B. Adaptive adjusts smoothly, responsive uses fixed layouts.

C. Adaptive only works on desktop, responsive only on mobile.

D. Adaptive and responsive are the same with different names.

Solution

1. Step 1: Understand adaptive design

   Adaptive design uses fixed layouts tailored for specific screen sizes, like separate versions for phone and tablet.

2. Step 2: Understand responsive design

   Responsive design uses flexible layouts that smoothly adjust to any screen size by resizing and rearranging elements.

3. Final Answer:

   Adaptive uses fixed layouts for specific screen sizes, responsive adjusts smoothly. -> Option A

4. Quick Check:

   Adaptive = fixed, Responsive = flexible [OK]

Hint: Adaptive = fixed sizes, Responsive = flexible resizing [OK]

Common Mistakes:

• Confusing which strategy uses fixed layouts
• Thinking adaptive works only on desktop
• Believing adaptive and responsive are identical

2. Which of the following is a correct way to describe a responsive layout in Figma?

easy

A. Using fixed width frames for each device size

B. Using constraints and auto-layout to adjust elements fluidly

C. Creating separate pages for desktop and mobile

D. Locking element positions to prevent resizing

Solution

1. Step 1: Identify responsive layout features in Figma

   Responsive layouts use constraints and auto-layout to let elements resize and reposition fluidly as the frame size changes.

2. Step 2: Eliminate incorrect options

   Fixed width frames and separate pages are adaptive strategies; locking positions prevents responsiveness.

3. Final Answer:

   Using constraints and auto-layout to adjust elements fluidly -> Option B

4. Quick Check:

   Responsive = constraints + auto-layout [OK]

Hint: Responsive uses constraints and auto-layout in Figma [OK]

Common Mistakes:

• Choosing fixed width frames as responsive
• Confusing separate pages with responsive design
• Locking elements disables responsiveness

3. Consider a BI dashboard designed with adaptive strategy for three screen sizes: mobile (320px), tablet (768px), and desktop (1440px). What happens if a user opens the dashboard on a 500px wide device?

medium

A. The desktop layout (1440px) is shown, cropped to fit 500px.

B. The dashboard automatically resizes smoothly to 500px width.

C. The mobile layout (320px) is shown, possibly with horizontal scrolling.

D. The tablet layout (768px) is shown, scaled down to 500px.

Solution

1. Step 1: Understand adaptive layout behavior

   Adaptive design uses fixed layouts for specific sizes. For 500px width, no exact layout exists, so the closest smaller layout (mobile 320px) is used.

2. Step 2: Consider user experience on 500px device

   Since the layout is fixed at 320px, the user may see horizontal scrolling or clipped content, not smooth resizing.

3. Final Answer:

   The mobile layout (320px) is shown, possibly with horizontal scrolling. -> Option C

4. Quick Check:

   Adaptive shows closest fixed layout [OK]

Hint: Adaptive picks closest fixed layout, no smooth resize [OK]

Common Mistakes:

• Assuming adaptive layouts resize smoothly
• Thinking tablet layout scales down automatically
• Believing desktop layout crops content

4. You designed a responsive BI dashboard in Figma using auto-layout and constraints, but on small screens, some elements overlap. What is the most likely cause?

medium

A. Constraints are not set properly, causing elements to ignore resizing rules.

B. Fixed width frames were used instead of auto-layout.

C. Adaptive layouts were applied instead of responsive.

D. The dashboard was exported incorrectly.

Solution

1. Step 1: Analyze overlapping in responsive design

   Overlapping usually happens when constraints are missing or incorrect, so elements don't resize or reposition properly.

2. Step 2: Rule out other causes

   Using fixed width frames or adaptive layouts would not cause overlapping in a responsive setup; export issues don't affect layout behavior.

3. Final Answer:

   Constraints are not set properly, causing elements to ignore resizing rules. -> Option A

4. Quick Check:

   Incorrect constraints cause overlap [OK]

Hint: Check constraints first when elements overlap in responsive design [OK]

Common Mistakes:

• Blaming fixed width frames when auto-layout is used
• Confusing adaptive with responsive issues
• Assuming export errors cause layout overlap

5. You need to design a BI dashboard that works well on desktop, tablet, and mobile. You want smooth resizing on all devices but also want to optimize layout for common screen widths. Which strategy should you choose and why?

hard

A. Design only for desktop and let mobile users zoom manually.

B. Use responsive design only, relying on flexible layouts that adjust fluidly.

C. Use adaptive design only, creating fixed layouts for each device size.

D. Combine adaptive and responsive strategies: fixed layouts for key sizes plus flexible elements inside.

Solution

1. Step 1: Understand the requirements

   The dashboard must resize smoothly on all devices but also optimize layout for common screen widths.

2. Step 2: Evaluate strategies

   Adaptive alone lacks smooth resizing; responsive alone may not optimize for key sizes perfectly.

3. Step 3: Choose combined approach

   Combining adaptive fixed layouts for common sizes with responsive flexible elements inside gives best of both worlds.

4. Final Answer:

   Combine adaptive and responsive strategies: fixed layouts for key sizes plus flexible elements inside. -> Option D

5. Quick Check:

   Combine adaptive + responsive for best results [OK]

Hint: Combine fixed layouts with flexible elements for best BI dashboard [OK]

Common Mistakes:

• Choosing only adaptive and missing smooth resizing
• Choosing only responsive and missing layout optimization
• Ignoring mobile users by designing desktop only