Device-specific frames (mobile, desktop, tablet) in Figma - Step-by-Step Guide

Introduction

Device-specific frames in Figma help you design dashboards or reports tailored for mobile, desktop, and tablet screens. This ensures your business intelligence visuals look good and work well on different devices.

When you want your sales dashboard to be easy to read on a phone and a computer without redesigning everything.

When your marketing report needs to fit tablet screens during presentations.

When you want to preview how a KPI chart looks on different screen sizes before sharing.

When you create a BI app prototype that users will open on multiple devices.

When you need to test navigation and layout changes for mobile versus desktop users.

Steps

Step 1: Click

- Figma toolbar on the left, select the Frame tool (shortcut 'F')

The cursor changes to frame drawing mode, ready to create a new frame

Step 2: Look at the right sidebar under 'Design' panel

- Right sidebar, 'Frame' section

You see preset device sizes like Desktop, Tablet, and Mobile listed

Step 3: Click on the desired device preset (e.g., 'iPhone 13 Pro' for mobile)

- Right sidebar, 'Frame' section presets

A new frame appears on the canvas sized exactly for that device

Step 4: Repeat steps 1-3 to create frames for Desktop and Tablet

- Figma canvas and right sidebar

You have separate frames for mobile, tablet, and desktop side by side

Step 5: Design your BI dashboard or report inside each frame

- Inside each device-specific frame on the canvas

Each frame shows a version of your dashboard optimized for that device size

Step 6: Use the zoom and preview options

- Top-right corner, click 'Present' button

You see how your design looks on the selected device frame in full screen

Before vs After

Before

One large frame with a generic dashboard design that may not fit all devices

After

Three separate frames sized for mobile, tablet, and desktop, each showing a tailored dashboard layout

Settings Reference

Frame Presets

📍 Right sidebar under 'Design' when Frame tool is active

Choose device-specific frame sizes to design for different screens

Default: Custom size if manually drawn

Frame Resizing

📍 Right sidebar under 'Constraints' section

Control how elements inside frames adjust when frame size changes

Default: Left and Top

Presentation Mode

📍 Top-right corner 'Present' button

Preview how frames look on different devices

Default: Exit preview

Common Mistakes

Designing only one frame and expecting it to look good on all devices

Different devices have different screen sizes and aspect ratios, so one design may not fit well everywhere

Create separate frames using device presets and adjust layouts for each device

Ignoring the 'Constraints' settings inside frames

Without constraints, elements may not resize or reposition properly when frame size changes

Set constraints on key elements to control their behavior on different screen sizes

Summary

Device-specific frames let you design BI dashboards tailored for mobile, tablet, and desktop screens.

Use Figma's frame presets to quickly create frames with exact device sizes.

Remember to adjust layouts and constraints inside each frame for the best user experience.