Mobile-first design workflow in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer at a startup company.

📋 Request: Your manager wants you to create a mobile-first design workflow for a new sales dashboard app. The goal is to ensure the dashboard is easy to use on smartphones before scaling up to tablets and desktops.

📊 Data: You have access to user research data showing that 70% of users access sales data on mobile devices. You also have sample sales data to visualize, including monthly sales, regions, and product categories.

🎯 Deliverable: A step-by-step mobile-first design workflow in Figma that includes wireframes for mobile screens, scaling strategies for larger screens, and a prototype demonstrating key dashboard features.

Sample Data

Month	Region	Product Category	Sales Amount
January	North	Electronics	12000
January	South	Clothing	8500
February	North	Electronics	15000
February	East	Clothing	7000
March	South	Electronics	13000
March	East	Clothing	9000
April	North	Clothing	11000
April	South	Electronics	14000

1

Step 1: Create a new Figma file and set the frame size to a common mobile screen size (e.g., 375x812 pixels for iPhone X).

In Figma, click 'Frame' tool and select 'iPhone X' preset or set custom size 375x812.

Expected Result

A blank mobile-sized frame ready for design.

2

Step 2: Design a simple wireframe for the sales dashboard focusing on key metrics: total sales, sales by region, and sales by product category.

Use rectangles and text to create placeholders for charts and numbers. Arrange vertically for easy scrolling.

Expected Result

A clean mobile wireframe showing placeholders for total sales, a region sales bar chart, and a product category pie chart.

3

Step 3: Add interactive prototype links between dashboard elements and detail screens for regions and product categories.

Use Figma's 'Prototype' tab to link the region bar chart to a detailed region sales frame, and the product category chart to its detail frame.

Expected Result

Clickable prototype that navigates from summary dashboard to detailed views on tap.

4

Step 4: Test the prototype on a mobile device using Figma Mirror or share a mobile-friendly link to stakeholders for feedback.

Open Figma Mirror app on phone or share prototype link with 'View on mobile' option enabled.

Expected Result

Stakeholders can interact with the prototype on their phones and provide feedback.

5

Step 5: Create additional frames for tablet and desktop sizes, scaling up the mobile design by adding more charts and rearranging layout for larger screens.

Duplicate mobile frame, resize to tablet (e.g., 768x1024) and desktop (e.g., 1440x1024), rearrange elements into grid layout.

Expected Result

Responsive design frames showing how the dashboard adapts to bigger screens with more data visible at once.

6

Step 6: Document the mobile-first workflow steps and design decisions in a Figma page or external document for team reference.

Add text blocks describing each step and rationale for mobile-first approach.

Expected Result

Clear documentation that explains the workflow and supports future design updates.

Final Result

┌───────────────────────────────┐
│       Sales Dashboard          │
├───────────────────────────────┤
│ Total Sales: $89,500           │
│                               │
│ [Bar Chart: Sales by Region]   │
│  North |███████               │
│  South |█████                 │
│  East  |████                  │
│                               │
│ [Pie Chart: Sales by Category] │
│  Electronics 60%              │
│  Clothing 40%                 │
└───────────────────────────────┘

Bonus Challenge

Add accessibility features to your Figma prototype, such as color contrast checks and keyboard navigation hints.

Show Hint

Use Figma plugins like 'Able' or 'Contrast' to test color contrast. Add notes on keyboard focus order and ARIA roles in your design documentation.