Batch operations and selection in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product designer working on a dashboard for a sales team.

📋 Request: Your manager wants you to create a design that allows users to select multiple sales regions at once and apply batch operations like filtering and highlighting to analyze sales data quickly.

📊 Data: You have a list of sales regions with their monthly sales figures and want to enable easy multi-selection and batch actions in the dashboard design.

🎯 Deliverable: A Figma prototype showing how users can select multiple regions and apply batch filters or highlights to the sales data visualization.

Sample Data

Region	Month	Sales ($)
North	January	12000
South	January	15000
East	January	13000
West	January	11000
North	February	14000
South	February	16000
East	February	13500
West	February	11500
North	March	13000
South	March	17000
East	March	14000
West	March	12000

1

Step 1: Create a list component in Figma showing all sales regions as selectable buttons.

Add four buttons labeled 'North', 'South', 'East', and 'West'. Style them with default colors and add a hover effect.

Expected Result

A visible list of four region buttons that can be clicked.

2

Step 2: Enable multi-selection on the region buttons using Figma's interactive components.

Set each button to toggle its selected state on click, allowing multiple buttons to be selected simultaneously.

Expected Result

Users can click multiple region buttons and see their selected state visually (e.g., color change).

3

Step 3: Design a batch operation control panel with options like 'Filter' and 'Highlight'.

Add two buttons labeled 'Filter Selected' and 'Highlight Selected' below the region buttons.

Expected Result

Control panel with two batch operation buttons visible.

4

Step 4: Prototype the 'Filter Selected' button to show only sales data for the selected regions.

Create an interaction that, when 'Filter Selected' is clicked, updates the sales chart to display data only for the selected regions.

Expected Result

Sales chart updates to show filtered data matching selected regions.

5

Step 5: Prototype the 'Highlight Selected' button to visually emphasize sales data for the selected regions.

Create an interaction that, when 'Highlight Selected' is clicked, changes the color or style of the sales data bars for selected regions in the chart.

Expected Result

Sales chart highlights bars corresponding to selected regions without hiding other data.

6

Step 6: Test the prototype by selecting multiple regions and applying batch operations.

Select 'North' and 'East' regions, then click 'Filter Selected' and 'Highlight Selected' to verify interactions.

Expected Result

Filtering shows only North and East sales data; highlighting emphasizes North and East bars.

Final Result

North

↓

Filter Selected

Bonus Challenge

Add a 'Clear Selection' button that resets all region selections and batch operations.

Show Hint

Use a button that resets the toggle states of all region buttons and returns the sales chart to show all data.