Breakpoint-based design in Figma - Step-by-Step Guide

Introduction

Breakpoint-based design helps you create dashboards that look good on different screen sizes. It solves the problem of charts and tables being too big or small on phones, tablets, or desktops by adjusting layout at set screen widths.

When your sales dashboard needs to look good on both desktop and mobile devices

When you want to hide or show certain charts depending on screen size

When your report layout breaks or overlaps on smaller screens

When you want to test how your dashboard looks on tablets versus phones

When you want to create a responsive BI report that adapts automatically

Steps

Step 1: Open your dashboard file

- Figma main workspace

Your dashboard design appears on the canvas

Step 2: Select the frame containing your dashboard

- Layers panel or canvas

The frame is highlighted and its properties show in the right sidebar

Step 3: Click the 'Constraints' section in the right sidebar

- Right sidebar under Design tab

Constraint options for width and height appear

Step 4: Set horizontal constraints to 'Left and Right'

- Constraints section

The frame will resize horizontally with the screen width

Step 5: Click the 'Prototype' tab in the right sidebar

- Right sidebar

Prototype settings appear

Step 6: Add a new frame for a smaller screen size (e.g., mobile)

- Canvas

A new frame appears with your chosen smaller dimensions

Step 7: Adjust the layout inside the smaller frame to fit the screen

- Canvas inside the smaller frame

Charts and tables rearrange or resize to fit the smaller frame

Step 8: Link the main frame to the smaller frame using Prototype connections

- Prototype tab → drag node from main frame to smaller frame

You can preview how the design changes at different sizes

Before vs After

Before

Dashboard frame is fixed width 1200px showing all charts crowded on small screens

After

Dashboard frame resizes with screen width, charts rearranged or hidden on smaller frames for better readability

Settings Reference

Constraints

📍 Right sidebar under Design tab

Controls how elements resize or stay fixed when the frame size changes

Default: Left and Top

Frame size

📍 Properties panel at top when frame is selected

Sets the screen size for the design breakpoint

Default: Depends on initial frame size

Prototype connections

📍 Prototype tab in right sidebar

Allows previewing navigation or layout changes between breakpoints

Default: No connections

Common Mistakes

Not setting horizontal constraints to 'Left and Right'

The frame or elements will not resize properly on different screen widths

Always set horizontal constraints to 'Left and Right' for responsive resizing

Designing only one fixed frame size

Dashboard looks bad or unusable on devices with different screen sizes

Create multiple frames for different breakpoints and link them in prototype

Summary

Breakpoint-based design helps dashboards adapt to different screen sizes.

Use constraints and multiple frames to create responsive layouts.

Preview designs by linking frames in prototype mode.