Bird
Raised Fist0
Figmabi_tool~15 mins

Grid and column layout in Figma - Real Business Scenario

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.
Progress0 / 8 steps
Sample Data
RegionProduct CategoryMonthSales
NorthElectronicsJan12000
NorthClothingJan8000
SouthElectronicsJan15000
SouthClothingJan7000
NorthElectronicsFeb13000
NorthClothingFeb9000
SouthElectronicsFeb16000
SouthClothingFeb7500
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.

Practice

(1/5)
1. What is the main purpose of using a grid or column layout in a Figma dashboard design?
easy
A. To make the dashboard load faster
B. To add random colors to the dashboard
C. To organize content clearly and keep alignment consistent
D. To remove all text from the dashboard

Solution

  1. Step 1: Understand grid and column layout purpose

    Grids and columns help arrange elements neatly and keep alignment consistent.

  2. Step 2: Eliminate unrelated options

    Adding colors, speeding load, or removing text do not relate to layout structure.

  3. Final Answer:

    To organize content clearly and keep alignment consistent -> Option C

  4. Quick Check:

    Grid layout = clear organization [OK]
Hint: Think about how to keep things neat and aligned [OK]
Common Mistakes:
  • Confusing layout with color or speed
  • Ignoring alignment importance
  • Thinking layout removes content
2. Which of the following is the correct way to add a 12-column layout grid in Figma?
easy
A. Set Layout Grid > Columns > Count: 12 > Type: Columns
B. Set Layout Grid > Rows > Count: 12 > Type: Rows
C. Set Layout Grid > Columns > Count: 6 > Type: Rows
D. Set Layout Grid > Rows > Count: 6 > Type: Columns

Solution

  1. Step 1: Identify correct grid settings for columns

    To create columns, choose Columns type and set count to 12.

  2. Step 2: Check other options for errors

    Rows type or wrong counts do not create a 12-column layout.

  3. Final Answer:

    Set Layout Grid > Columns > Count: 12 > Type: Columns -> Option A

  4. Quick Check:

    Columns count 12 = Set Layout Grid > Columns > Count: 12 > Type: Columns [OK]
Hint: Columns need 'Columns' type, not Rows [OK]
Common Mistakes:
  • Choosing Rows instead of Columns
  • Setting wrong count number
  • Mixing Rows type with column count
3. Given a Figma frame with a 4-column layout grid, if each column is 100px wide with 20px gutter, what is the total width covered by the columns and gutters?
medium
A. 480px
B. 420px
C. 440px
D. 460px

Solution

  1. Step 1: Calculate total column width

    4 columns x 100px = 400px total column width.

  2. Step 2: Calculate total gutter width

    There are 3 gutters between 4 columns, 3 x 20px = 60px.

  3. Step 3: Add columns and gutters

    400px + 60px = 460px total width covered.

  4. Final Answer:

    460px -> Option D

  5. Quick Check:

    4x100 + 3x20 = 460px [OK]
Hint: Gutters are one less than columns count [OK]
Common Mistakes:
  • Counting gutters equal to columns
  • Forgetting to add gutters
  • Multiplying gutters by columns
4. You set a 3-column layout grid in Figma but the columns overlap each other. What is the most likely cause?
medium
A. The gutter width is set to zero or too small
B. The column count is set to 1 instead of 3
C. The layout grid is set to Rows instead of Columns
D. The frame width is too large

Solution

  1. Step 1: Understand column overlap cause

    If gutters are zero or very small, columns will touch or overlap.

  2. Step 2: Check other options for relevance

    Wrong column count or grid type causes different issues, not overlap. Large frame width won't cause overlap.

  3. Final Answer:

    The gutter width is set to zero or too small -> Option A

  4. Quick Check:

    Small gutter = overlap [OK]
Hint: Check gutter size if columns overlap [OK]
Common Mistakes:
  • Ignoring gutter size
  • Confusing column count with gutter
  • Blaming frame size for overlap
5. You want to design a dashboard in Figma with a 12-column grid where each column is 58px wide and gutters are 24px. If the frame width is 1200px, what should be the left and right margins to center the grid perfectly?
hard
A. No margins needed
B. 120px margins on each side
C. 72px margins on each side
D. 96px margins on each side

Solution

  1. Step 1: Calculate total column width

    12 columns x 58px = 696px.

  2. Step 2: Calculate total gutter width

    11 gutters x 24px = 264px.

  3. Step 3: Total grid width

    696px + 264px = 960px.

  4. Step 4: Calculate margins to center

    (1200px - 960px) / 2 = 120px on each side.

  5. Final Answer:

    120px margins on each side -> Option B

  6. Quick Check:

    12x58 + 11x24 = 960px; (1200-960)/2 = 120px [OK]
Hint: Margin = (Frame width - Grid width) ÷ 2 [OK]
Common Mistakes:
  • Ignoring gutters in total width
  • Using wrong gutter count
  • Forgetting to divide margin by 2