Bird
Raised Fist0
Figmabi_tool~15 mins

Responsive grid systems 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 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
ComponentTypeContent
Sales ChartChartMonthly sales trend
Product TableTableTop 10 products by revenue
KPI CardsCardsRevenue, Profit, Growth
FiltersControlsDate 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
A 12-column grid appears on the desktop frame, guiding component placement.
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
Sales Chart occupies two-thirds of the width on the left side.
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
KPI Cards appear as a vertical column on the right side.
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
Product Table stretches full width below the chart.
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
Filters appear full width at the top.
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
Mobile frame shows a 4-column grid for responsive layout.
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
Components appear stacked vertically for easy scrolling on mobile.
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
Components adjust their width and position smoothly within the grid without overlap.
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
Use an additional grid area for the sidebar on desktop and hide or move it above the main content on mobile.

Practice

(1/5)
1. What is the main purpose of a responsive grid system in Figma for BI dashboards?
easy
A. To add animations to dashboard elements
B. To change font styles automatically
C. To create complex formulas for data calculations
D. To organize content so it looks good on all screen sizes

Solution

  1. Step 1: Understand responsive grids

    Responsive grids help arrange content so it adapts to different screen sizes.

  2. Step 2: Identify the main goal in BI dashboards

    BI dashboards need to look clear and organized on phones, tablets, and desktops.

  3. Final Answer:

    To organize content so it looks good on all screen sizes -> Option D

  4. Quick Check:

    Responsive grids = organize content for all screens [OK]
Hint: Responsive grids adapt layout to screen size [OK]
Common Mistakes:
  • Confusing grids with animations
  • Thinking grids create formulas
  • Assuming grids change fonts automatically
2. Which of the following is the correct way to add a 12-column grid in Figma for a responsive layout?
easy
A. Set Columns to 6, Type to Rows, Gutter to 12px, Margin to 24px
B. Set Rows to 12, Type to Rows, Gutter to 24px, Margin to 16px
C. Set Columns to 12, Type to Columns, Gutter to 16px, Margin to 24px
D. Set Columns to 12, Type to Rows, Gutter to 24px, Margin to 16px

Solution

  1. Step 1: Identify grid settings for columns

    A 12-column grid means Columns = 12 and Type = Columns.

  2. Step 2: Check gutter and margin values

    Common gutter is 16px and margin is 24px for spacing in responsive grids.

  3. Final Answer:

    Set Columns to 12, Type to Columns, Gutter to 16px, Margin to 24px -> Option C

  4. Quick Check:

    12 columns + gutter 16px + margin 24px = correct grid setup [OK]
Hint: Columns = 12 and Type = Columns for responsive grids [OK]
Common Mistakes:
  • Confusing rows with columns
  • Swapping gutter and margin values
  • Setting wrong grid type
3. Given a Figma frame with a 12-column grid, gutter 20px, and margin 40px, what happens if you resize the frame from 1200px wide to 600px wide?
medium
A. Columns stay the same width, margins and gutters shrink proportionally
B. Columns, gutters, and margins all shrink proportionally to fit the new width
C. Margins stay fixed, columns and gutters adjust to new width
D. Grid disappears and layout breaks

Solution

  1. Step 1: Understand responsive grid behavior on resize

    In responsive grids, columns, gutters, and margins adjust proportionally when frame size changes.

  2. Step 2: Apply to given sizes

    When width halves from 1200px to 600px, all grid parts shrink to keep layout consistent.

  3. Final Answer:

    Columns, gutters, and margins all shrink proportionally to fit the new width -> Option B

  4. Quick Check:

    Responsive grid parts shrink proportionally on resize [OK]
Hint: All grid parts resize proportionally in responsive grids [OK]
Common Mistakes:
  • Thinking margins stay fixed
  • Assuming columns keep same width
  • Believing grid disappears on resize
4. You set a 12-column grid in Figma but notice your dashboard elements overlap when resizing smaller screens. What is the most likely cause?
medium
A. Breakpoints are missing or not set properly
B. Margins are set to zero, leaving no space on edges
C. Grid type is set to Rows instead of Columns
D. Gutter size is too small, causing columns to merge

Solution

  1. Step 1: Analyze overlapping issue on small screens

    Overlapping usually happens if layout doesn't adjust at different screen sizes.

  2. Step 2: Check grid and breakpoint settings

    Without breakpoints, grid doesn't adapt, causing overlap on smaller screens.

  3. Final Answer:

    Breakpoints are missing or not set properly -> Option A

  4. Quick Check:

    Missing breakpoints cause overlap on small screens [OK]
Hint: Set breakpoints to adjust layout on different screen sizes [OK]
Common Mistakes:
  • Blaming gutter size for overlap
  • Ignoring breakpoints importance
  • Confusing grid type with overlap cause
5. You want to design a BI dashboard in Figma that looks good on desktop and mobile. Which combination of grid settings and breakpoints is best for a responsive layout?
hard
A. Desktop: 12-column grid with 24px margin; Mobile: 4-column grid with 16px margin and breakpoint at 600px
B. Desktop: 6-column grid with 16px margin; Mobile: 12-column grid with 24px margin and breakpoint at 800px
C. Desktop: 12-row grid with 24px margin; Mobile: 4-row grid with 16px margin and breakpoint at 600px
D. Desktop: 12-column grid with 0 margin; Mobile: 4-column grid with 0 margin and no breakpoints

Solution

  1. Step 1: Choose appropriate grid columns for desktop and mobile

    Desktop needs more columns (12) for detailed layout; mobile uses fewer (4) for simplicity.

  2. Step 2: Set margins and breakpoints for spacing and layout switch

    Margins of 24px desktop and 16px mobile provide good spacing; breakpoint at 600px switches layout properly.

  3. Final Answer:

    Desktop: 12-column grid with 24px margin; Mobile: 4-column grid with 16px margin and breakpoint at 600px -> Option A

  4. Quick Check:

    Proper columns, margins, and breakpoint = responsive layout [OK]
Hint: Use fewer columns and smaller margins on mobile with breakpoints [OK]
Common Mistakes:
  • Using rows instead of columns for grids
  • No breakpoints causing poor mobile layout
  • Zero margins causing cramped design