Grid and column layout 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 and organized sales dashboard that adapts well to different screen sizes. They ask you to use grid and column layouts to arrange charts and tables neatly.

📊 Data: You have sales data by region, product category, and month. You will display total sales, sales trends, and top products.

🎯 Deliverable: Create a dashboard layout in Figma using grid and column layouts to arrange the visual components clearly and responsively.

Sample Data

Region	Product 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	9000
South	Electronics	Feb	16000
South	Clothing	Feb	7500

1

Step 1: Open Figma and create a new frame sized for desktop (e.g., 1440x1024).

Set frame size to 1440 width and 1024 height.

Expected Result

A blank desktop-sized frame is ready for design.

2

Step 2: Add a grid layout to the frame with 12 columns, 20px gutter, and 24px margin on each side.

In Layout Grid settings, choose Columns, set count to 12, type to 'Stretch', gutter to 20px, margin to 24px.

Expected Result

The frame shows a 12-column grid with consistent spacing for placing elements.

3

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

Draw a rectangle or text box spanning columns 1 to 12, height about 80px.

Expected Result

A header area is placed across the full width of the grid.

4

Step 4: Place a total sales card spanning 4 columns below the header on the left side.

Draw a rectangle or frame spanning columns 1 to 4, height about 150px.

Expected Result

A card area for total sales is positioned on the left side under the header.

5

Step 5: Place a sales trend line chart spanning 8 columns next to the total sales card.

Draw a frame spanning columns 5 to 12, height about 150px.

Expected Result

A wide area for the sales trend chart is placed to the right of the total sales card.

6

Step 6: Below these, add a table for top products spanning all 12 columns.

Draw a frame spanning columns 1 to 12, height about 300px, positioned below the first row of cards.

Expected Result

A large area for the top products table is placed below the cards, spanning full width.

7

Step 7: Ensure spacing between elements uses the grid gutters and margins for consistent alignment.

Use snapping to grid columns and gutters when positioning elements.

Expected Result

All elements align neatly with consistent spacing and margins.

8

Step 8: Test responsiveness by resizing the frame width and adjusting columns to stack cards vertically on smaller widths.

At smaller widths, set cards to span all 12 columns stacked vertically.

Expected Result

Dashboard layout adapts to smaller screens by stacking cards and charts vertically.

Final Result

┌───────────────────────────────────────────────────────────────┐
│                          Dashboard Title                      │
├───────────────┬───────────────────────────────────────────────┤
│ Total Sales   │               Sales Trend Chart                │
│   (4 cols)    │                  (8 cols)                      │
├───────────────┴───────────────────────────────────────────────┤
│                      Top Products Table (12 cols)             │
│                                                               │
│                                                               │
└───────────────────────────────────────────────────────────────┘

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

✓Cards and charts align neatly with consistent spacing.

✓Responsive design stacks elements vertically on smaller screens for readability.

Bonus Challenge

Add a sidebar navigation panel using a 2-column width on the left and adjust the main content accordingly.

Show Hint

Reduce main content columns to 10 and place sidebar in columns 1-2, main content in columns 3-12.