Form-like interactions in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with the BI team

📋 Request: Your manager wants you to design a form-like interaction in a BI dashboard to collect user input for filtering sales data by region and date range

📊 Data: You have sales data by region, date, and revenue. The form will let users select a region from a dropdown and pick start and end dates.

🎯 Deliverable: Create a Figma prototype showing the form with dropdown and date pickers, and a filtered sales summary area that updates based on user input.

Sample Data

Date	Region	Revenue
2024-01-01	North	1000
2024-01-02	South	1500
2024-01-03	East	1200
2024-01-04	West	1300
2024-01-05	North	1100
2024-01-06	South	1400
2024-01-07	East	1250
2024-01-08	West	1350

1

Step 1: Create a dropdown component in Figma with options: North, South, East, West

Use Figma's dropdown component. Label it 'Select Region'. Add four options: North, South, East, West.

Expected Result

A dropdown menu labeled 'Select Region' with four region options.

2

Step 2: Add two date picker components labeled 'Start Date' and 'End Date'

Use Figma's date picker components or create input fields with calendar icons for date selection.

Expected Result

Two date input fields labeled 'Start Date' and 'End Date' allowing date selection.

3

Step 3: Design a button labeled 'Apply Filter' that users will click to filter data

Create a button with accessible color contrast and label it 'Apply Filter'.

Expected Result

A clearly visible button labeled 'Apply Filter'.

4

Step 4: Create a text area or card below the form to display filtered sales summary

Add a text box that will show total revenue for the selected region and date range.

Expected Result

An area that will show filtered sales revenue summary.

5

Step 5: Prototype the interaction: when user selects region and dates and clicks 'Apply Filter', update the summary area with total revenue

Use Figma's prototyping links and overlays to simulate filtering. Show total revenue calculated from sample data for chosen filters.

Expected Result

Interactive prototype where selecting filters updates the revenue summary accordingly.

Final Result

┌───────────────────────────────┐
│ Select Region: [North ▼]       │
│ Start Date:   [2024-01-01]    │
│ End Date:     [2024-01-05]    │
│ [Apply Filter]                │
├───────────────────────────────┤
│ Filtered Sales Summary:       │
│ Total Revenue: $2100          │
└───────────────────────────────┘

✓Users can easily select a region and date range using the form controls.

✓The Apply Filter button triggers an update to show total revenue for the selected filters.

✓This interaction helps users quickly analyze sales data for specific regions and periods.

Bonus Challenge

Add a multi-select dropdown to allow filtering by multiple regions at once.

Show Hint

Use Figma's multi-select components or simulate with checkboxes inside a dropdown menu.