Scenario Mode

👤 Your Role: You are a BI dashboard designer at a retail company.

📋 Request: Your manager wants a dashboard layout that looks good on both desktop and mobile screens using a responsive grid system.

📊 Data: You have a set of dashboard components: sales chart, product table, KPI cards, and filters.

🎯 Deliverable: Create a responsive grid layout in Figma that arranges these components clearly on desktop and stacks them neatly on mobile.

Progress0 / 8 steps

Sample Data

Component	Type	Content
Sales Chart	Chart	Monthly sales trend
Product Table	Table	Top 10 products by revenue
KPI Cards	Cards	Revenue, Profit, Growth
Filters	Controls	Date range, Region

1

Step 1: Create a 12-column grid layout in Figma for the desktop view.

In Figma, select the frame for desktop size (e.g., 1440px width). Add Layout Grid with 12 columns, 20px gutter, and 24px margin on sides.

Expected Result

2

Step 2: Place the Sales Chart spanning 8 columns on the left side of the grid.

Position the Sales Chart component to cover columns 1 to 8 horizontally and full height needed.

Expected Result

3

Step 3: Place the KPI Cards stacked vertically spanning 4 columns on the right side.

Arrange KPI Cards in a vertical stack within columns 9 to 12.

Expected Result

4

Step 4: Place the Product Table below the Sales Chart spanning all 12 columns.

Position Product Table component below Sales Chart, spanning columns 1 to 12 horizontally.

Expected Result

5

Step 5: Place Filters above the Sales Chart spanning all 12 columns.

Position Filters component at the top of the frame spanning columns 1 to 12.

Expected Result

6

Step 6: Create a mobile frame (e.g., 375px width) and add a 4-column grid with 16px gutters.

In Figma, create a new frame for mobile size. Add Layout Grid with 4 columns, 16px gutter, and 16px margin.

Expected Result

7

Step 7: Stack all components vertically in the mobile frame, each spanning all 4 columns.

Arrange Filters, Sales Chart, KPI Cards, and Product Table one below another, each spanning columns 1 to 4.

Expected Result

8

Step 8: Test the layout by resizing the desktop frame to smaller widths and observe grid responsiveness.

Use Figma's resizing tools to shrink desktop frame width and check if components align properly within the grid.

Expected Result

Final Result

-----------------------------------------
| Filters (full width)                   |
-----------------------------------------
| Sales Chart (8 cols) | KPI Cards (4)  |
|                     |                |
|                     |                |
-----------------------------------------
| Product Table (full width)             |
-----------------------------------------

Mobile View:
-----------------------------------------
| Filters (full width)                   |
-----------------------------------------
| Sales Chart (full width)               |
-----------------------------------------
| KPI Cards (full width)                 |
-----------------------------------------
| Product Table (full width)             |
-----------------------------------------

✓Using a 12-column grid for desktop allows flexible component placement.

✓Stacking components vertically on mobile improves readability and usability.

✓Consistent gutters and margins maintain visual balance across devices.

✓Responsive grids help dashboards adapt smoothly to different screen sizes.

Bonus Challenge

Add a sidebar navigation that collapses on mobile and integrates with the grid layout.

Show Hint