Why responsive design serves all devices in Figma - Why Use It

Introduction

Responsive design helps your dashboards and reports look good and work well on any device. It solves the problem of charts and tables being too big or too small on phones, tablets, or desktops.

When your sales report needs to be viewed on both desktop and mobile phones without zooming or scrolling horizontally

When your marketing dashboard should adjust layout automatically for tablets and laptops

When you want your data visualizations to be clear and readable on different screen sizes

When users access your reports from different devices and you want a consistent experience

When you want to avoid creating separate versions of the same report for each device

Steps

Step 1: Open your report file

- Figma main workspace

Your report design appears on the canvas

Step 2: Select the frame containing your dashboard

- Layers panel or directly on canvas

Frame is highlighted and its properties show in the right sidebar

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

- Right sidebar under Design tab

Constraint options appear allowing you to set how elements resize

Step 4: Set horizontal and vertical constraints for each element to 'Left and Right' or 'Scale'

- Constraints section for each selected element

Elements will resize or move to fit different screen widths and heights

💡 Use 'Scale' to resize elements proportionally, 'Left and Right' to stretch between edges

Step 5: Preview your design on different device frames

- Use Figma's device preview or resize the frame manually

You see how your dashboard adjusts layout and size on phones, tablets, and desktops

Before vs After

Before

Dashboard frame fixed at 1200x800 pixels, charts overflow or get cut off on smaller screens

After

Dashboard frame resizes to 375x667 pixels for phone, charts and tables adjust width and height to fit without overflow

Settings Reference

Constraints

📍 Right sidebar under Design tab when a frame or element is selected

Controls how elements resize or move when the frame size changes

Default: Left and Top

Frame size

📍 Properties panel at the top when a frame is selected

Defines the canvas size for your design to simulate different devices

Default: Custom

Common Mistakes

Not setting constraints on elements

Elements stay fixed in size and position, causing layout issues on different devices

Set appropriate constraints like 'Left and Right' or 'Scale' so elements adapt when frame size changes

Using fixed pixel sizes for all elements

Fixed sizes do not adjust on smaller or larger screens, making content hard to read or clipped

Use relative sizing and constraints to allow elements to resize smoothly

Summary

Responsive design makes dashboards look good on any device by adjusting layout and size automatically

Use Figma's constraints settings to control how elements resize or move inside frames

Always preview your design on different device sizes to ensure readability and usability