Breakpoint-based design in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working with the BI team

📋 Request: Your manager wants a dashboard design that looks good on desktop, tablet, and mobile devices using breakpoint-based design

📊 Data: You have a dashboard layout with charts, filters, and summary cards that need to adapt to different screen sizes

🎯 Deliverable: Create a Figma design file with three breakpoint layouts: desktop (1200px+), tablet (768px-1199px), and mobile (below 768px)

Sample Data

Component	Desktop Layout	Tablet Layout	Mobile Layout
Header	Full width, horizontal menu	Full width, horizontal menu	Full width, hamburger menu
Filters	Left sidebar vertical	Top horizontal bar	Collapsible dropdown
Charts	3 columns grid	2 columns grid	1 column stacked
Summary Cards	Row below charts, 4 cards	Row below charts, 2 cards per row	Stacked cards

1

Step 1: Create a new Figma file and set up three frames named Desktop, Tablet, and Mobile with widths 1440px, 1024px, and 375px respectively

Frame sizes: Desktop=1440x900, Tablet=1024x768, Mobile=375x667

Expected Result

Three frames sized correctly for each breakpoint

2

Step 2: Design the Header component in Desktop frame with full width and horizontal menu items spaced evenly

Use Auto Layout with horizontal direction, spacing 24px, padding 16px

Expected Result

Header spans full width with menu items aligned horizontally

3

Step 3: Copy Header to Tablet frame and adjust menu spacing to fit smaller width, keep horizontal layout

Reduce spacing to 16px, keep Auto Layout horizontal

Expected Result

Header fits Tablet width with horizontal menu

4

Step 4: Copy Header to Mobile frame and replace menu with hamburger icon on right side

Use icon component for hamburger, align right with padding 16px

Expected Result

Mobile header shows hamburger menu aligned right

5

Step 5: Design Filters as vertical sidebar on left in Desktop frame

Sidebar width 250px, vertical Auto Layout with filter controls stacked

Expected Result

Filters appear as vertical sidebar on left

6

Step 6: Move Filters to top horizontal bar in Tablet frame

Horizontal Auto Layout with filter controls spaced evenly, height 60px

Expected Result

Filters appear as horizontal bar on top

7

Step 7: Convert Filters to collapsible dropdown in Mobile frame

Use a dropdown component with label 'Filters', collapsed by default

Expected Result

Filters hidden under dropdown on mobile

8

Step 8: Arrange Charts in Desktop frame as 3 columns grid with equal spacing

Grid layout with 3 columns, gap 24px

Expected Result

Charts arranged in 3 columns

9

Step 9: Adjust Charts in Tablet frame to 2 columns grid

Grid layout with 2 columns, gap 16px

Expected Result

Charts arranged in 2 columns

10

Step 10: Stack Charts vertically in Mobile frame with full width

Vertical Auto Layout with gap 16px

Expected Result

Charts stacked in single column

11

Step 11: Place Summary Cards below charts in Desktop frame in a single row with 4 cards

Horizontal Auto Layout with 4 cards spaced 24px

Expected Result

Summary cards in one row below charts

12

Step 12: Arrange Summary Cards in Tablet frame as 2 rows with 2 cards each

Grid layout with 2 columns and 2 rows, gap 16px

Expected Result

Summary cards arranged in 2x2 grid

13

Step 13: Stack Summary Cards vertically in Mobile frame

Vertical Auto Layout with gap 16px

Expected Result

Summary cards stacked in single column

14

Step 14: Review all frames for consistent spacing, alignment, and accessibility (use proper labels and contrast)

Check color contrast ratios, add ARIA labels in design notes

Expected Result

Accessible and visually consistent designs across breakpoints

Final Result

Desktop Frame - 1440px

↓

Tablet Frame - 1024px

↓

Mobile Frame - 375px

Bonus Challenge

Add interactive prototype links in Figma to simulate switching between breakpoints

Show Hint

Use Figma's Prototype tab to link frames and add device frames for preview