Grid styles in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants a clean, organized dashboard layout using grid styles to display sales KPIs clearly.

📊 Data: You have sales data by region, product category, and month. The dashboard will show total sales, sales growth, and top products.

🎯 Deliverable: Create a dashboard layout in Figma using grid styles to arrange charts and KPI cards neatly and responsively.

Sample Data

Region	Category	Month	Sales
North	Electronics	Jan	12000
North	Clothing	Jan	8000
South	Electronics	Jan	15000
South	Clothing	Jan	7000
North	Electronics	Feb	13000
North	Clothing	Feb	8500
South	Electronics	Feb	16000
South	Clothing	Feb	7500

1

Step 1: Open Figma and create a new frame sized 1200px wide by 800px tall for the dashboard.

Set frame size: Width=1200px, Height=800px

Expected Result

A blank frame of 1200x800 pixels appears.

2

Step 2: Apply a 12-column grid to the frame for flexible layout.

Select frame > Layout Grid > Add Grid > Change grid type to Columns > Set count=12, Gutter=20px, Margin=40px

Expected Result

The frame shows 12 vertical columns with 20px gutters and 40px margins on sides.

3

Step 3: Create a header area spanning all 12 columns at the top for the dashboard title.

Draw a rectangle at top, width=frame width minus margins, height=80px, spanning columns 1 to 12

Expected Result

A header bar appears across the top full width inside margins.

4

Step 4: Add three KPI cards below the header, each spanning 4 columns with 20px gutters between them.

Create 3 rectangles side by side, each width=(frame width - 2*margins - 2*gutters)/3, height=120px, aligned to columns 1-4, 5-8, 9-12

Expected Result

Three equally sized KPI cards appear in a row below the header with consistent spacing.

5

Step 5: Place a sales trend line chart below the KPI cards spanning 8 columns on the left side.

Draw a rectangle spanning columns 1 to 8, height=300px, positioned below KPI cards

Expected Result

A large area for the sales trend chart appears on the left below KPI cards.

6

Step 6: Add a top products bar chart spanning 4 columns on the right side next to the sales trend chart.

Draw a rectangle spanning columns 9 to 12, height=300px, aligned with sales trend chart top

Expected Result

A smaller chart area appears on the right side next to the sales trend chart.

7

Step 7: Ensure all elements align to the grid columns and gutters for consistent spacing.

Use snapping to grid columns and gutters for all shapes and text

Expected Result

All dashboard elements line up perfectly with the grid, creating a clean layout.

8

Step 8: Make the layout responsive by setting constraints on elements to resize or stay fixed when frame width changes.

Set header and KPI cards to scale horizontally, charts to scale or stay fixed width as needed

Expected Result

Dashboard layout adjusts gracefully when frame width changes.

Final Result

┌──────────────────────────────────────────────────────────────┐
│                      Dashboard Title                         │
├──────────────┬──────────────┬──────────────┬───────────────┤
│ KPI Card 1   │ KPI Card 2   │ KPI Card 3   │               │
├──────────────┴──────────────┴──────────────┤               │
│ Sales Trend Chart (8 cols)                  │ Top Products  │
│                                            │ Bar Chart (4) │
│                                            │               │
└────────────────────────────────────────────┴───────────────┘

✓Using a 12-column grid helps organize dashboard elements evenly.

✓Consistent gutters and margins create balanced spacing.

✓Responsive constraints keep layout neat on different screen sizes.

✓Grid styles improve readability and user experience.

Bonus Challenge

Add a filter panel on the left side spanning 2 columns that allows users to filter data by region and month.

Show Hint

Use the grid to place the filter panel to the left of the sales trend chart, adjusting chart width accordingly.