Mobile-first design workflow in Figma - Step-by-Step Guide

Introduction

Mobile-first design workflow helps you create dashboards and reports that look great on phones before scaling up to tablets and desktops. This approach ensures your key data is clear and easy to read on small screens, solving the problem of cluttered or unreadable visuals on mobile devices.

When your sales dashboard needs to be viewed clearly on smartphones during meetings.

When you want to prioritize essential KPIs for mobile users before adding extra details for desktop.

When your team accesses reports mostly on mobile devices while on the go.

When you want to test how your charts and tables behave on small screens early in the design.

When you need to create a responsive report that adapts smoothly from mobile to desktop.

Steps

Step 1: Create a new frame

- Figma toolbar → Frame tool

A new frame appears on the canvas

💡 Choose a mobile device preset like iPhone 14 to start with the correct screen size

Step 2: Design your dashboard layout inside the mobile frame

- Canvas inside the mobile frame

You see your charts, text, and visuals arranged for a small screen

💡 Keep elements large and simple for easy tapping and reading

Step 3: Create a new frame for tablet or desktop size

- Figma toolbar → Frame tool

A larger frame appears on the canvas

💡 Use a tablet or desktop preset to match common screen sizes

Step 4: Copy your mobile design into the larger frame

- Select all elements in mobile frame → Copy → Paste into larger frame

Your mobile design appears inside the bigger frame

💡 This keeps consistency and saves time

Step 5: Adjust layout and add details for larger screen

- Canvas inside the larger frame

Your dashboard expands with more charts or data visible

💡 Use grids and alignment tools to keep everything neat

Step 6: Preview your frames in Figma Mirror or Presentation mode

- Figma toolbar → Play icon or use Figma Mirror app on mobile

You see how your design looks on actual devices

💡 Check readability and interaction on real screens

Before vs After

Before

Dashboard designed only for desktop with small text and many charts crowded together

After

Dashboard designed first for mobile with large text and simple layout, then expanded for desktop with additional charts and details

Settings Reference

Frame size presets

📍 Right sidebar → Design panel → Frame section

Sets the canvas size to match common device screens

Default: Custom size

Layout grids

📍 Right sidebar → Layout grid section

Helps align and space elements consistently

Default: None

Constraints

📍 Right sidebar → Constraints section

Controls how elements resize or move when frame size changes

Default: Left and Top

Common Mistakes

Designing only for desktop and shrinking to mobile later

This often makes mobile views cluttered and hard to read

Start with mobile size frames and simple layouts, then scale up to larger screens

Ignoring constraints on elements when resizing frames

Elements may not adjust properly and overlap or disappear

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

Summary

Mobile-first design workflow starts your dashboard design on small screens to ensure clarity and usability.

Use Figma frames with device presets to create and test layouts for mobile, tablet, and desktop.

Set layout grids and constraints to keep your design consistent and responsive across devices.