Device-specific frames (mobile, desktop, tablet) in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer working with your marketing team.

📋 Request: Your manager wants you to create device-specific dashboard frames in Figma for mobile, desktop, and tablet views to ensure the dashboard looks good on all devices.

📊 Data: You have the dashboard wireframe and need to create three frames sized for mobile (375x812 px), tablet (768x1024 px), and desktop (1440x900 px).

🎯 Deliverable: A Figma file with three frames named 'Mobile View', 'Tablet View', and 'Desktop View' sized correctly and containing the dashboard layout adapted for each device.

Sample Data

Device	Width (px)	Height (px)
Mobile	375	812
Tablet	768	1024
Desktop	1440	900

1

Step 1: Create a new frame in Figma for the Mobile View.

Set frame size to Width=375 px and Height=812 px. Name the frame 'Mobile View'.

Expected Result

A frame named 'Mobile View' sized 375x812 px appears in your Figma file.

2

Step 2: Create a new frame in Figma for the Tablet View.

Set frame size to Width=768 px and Height=1024 px. Name the frame 'Tablet View'.

Expected Result

A frame named 'Tablet View' sized 768x1024 px appears in your Figma file.

3

Step 3: Create a new frame in Figma for the Desktop View.

Set frame size to Width=1440 px and Height=900 px. Name the frame 'Desktop View'.

Expected Result

A frame named 'Desktop View' sized 1440x900 px appears in your Figma file.

4

Step 4: Copy the dashboard wireframe into each frame and adjust layout elements to fit each device size.

For Mobile View, stack elements vertically and use larger touch targets. For Tablet View, arrange elements in two columns. For Desktop View, use full width with multiple columns.

Expected Result

Each frame shows the dashboard layout optimized for its device size, ensuring readability and usability.

5

Step 5: Add labels and titles to each frame for clarity.

Add text labels 'Mobile View', 'Tablet View', and 'Desktop View' at the top of each frame.

Expected Result

Each frame is clearly labeled with its device type for easy identification.

Final Result

┌───────────────────────────────┐   ┌───────────────────────────────┐   ┌───────────────────────────────┐
│        Mobile View (375x812)   │   │        Tablet View (768x1024)  │   │       Desktop View (1440x900) │
│  [Stacked dashboard elements]  │   │  [Two-column dashboard layout]│   │  [Multi-column dashboard layout]│
│                               │   │                               │   │                               │
└───────────────────────────────┘   └───────────────────────────────┘   └───────────────────────────────┘

✓Mobile frame uses vertical stacking for easy scrolling and touch interaction.

✓Tablet frame balances space with two columns for better content display.

✓Desktop frame uses wide layout with multiple columns for full data visibility.

Bonus Challenge

Create interactive prototype links in Figma to switch between device views.

Show Hint

Use Figma's Prototype tab to link frames with 'On Click' interactions for smooth device view switching.