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.

Practice

1. What is the main benefit of using batch selection in Figma?

easy

A. It automatically groups all items into one frame.

B. It allows you to select multiple items quickly to edit them together.

C. It changes the color of all items without selecting them.

D. It locks all items so they cannot be moved.

Solution

1. Step 1: Understand batch selection purpose

   Batch selection is used to pick many items at once instead of one by one.

2. Step 2: Identify the benefit of batch selection

   By selecting multiple items quickly, you can apply changes to all of them together, saving time.

3. Final Answer:

   It allows you to select multiple items quickly to edit them together. -> Option B

4. Quick Check:

   Batch selection = select many items fast [OK]

Hint: Batch selection means picking many items at once [OK]

Common Mistakes:

• Confusing batch selection with grouping
• Thinking batch selection changes items automatically
• Assuming batch selection locks items

2. Which keyboard shortcut in Figma lets you select all items on the current frame?

easy

A. Ctrl + G (Cmd + G on Mac)

B. Ctrl + S (Cmd + S on Mac)

C. Ctrl + D (Cmd + D on Mac)

D. Ctrl + A (Cmd + A on Mac)

Solution

1. Step 1: Recall common selection shortcuts

   Ctrl + A (or Cmd + A) is the standard shortcut to select all items in many programs, including Figma.

2. Step 2: Match shortcut to action

   Ctrl + S saves, Ctrl + D duplicates, Ctrl + G groups. Only Ctrl + A selects all.

3. Final Answer:

   Ctrl + A (Cmd + A on Mac) -> Option D

4. Quick Check:

   Select all shortcut = Ctrl + A [OK]

Hint: Remember Ctrl + A means select all [OK]

Common Mistakes:

• Mixing save shortcut with select all
• Confusing duplicate with select all
• Using group shortcut instead of select all

3. Given you have 5 rectangles selected in Figma and you apply a batch operation to change their fill color to blue, what will be the result?

medium

A. Only the first rectangle will change color to blue.

B. The rectangles will be grouped but colors stay the same.

C. All 5 rectangles will have their fill color changed to blue.

D. An error will occur because batch color change is not allowed.

Solution

1. Step 1: Understand batch operation effect

   Batch operations apply the same change to all selected items simultaneously.

2. Step 2: Apply color change to all selected rectangles

   Changing fill color while multiple rectangles are selected updates each one to the new color.

3. Final Answer:

   All 5 rectangles will have their fill color changed to blue. -> Option C

4. Quick Check:

   Batch operation = change all selected items [OK]

Hint: Batch changes affect all selected items equally [OK]

Common Mistakes:

• Thinking only one item changes color
• Confusing grouping with color change
• Assuming batch color change causes error

4. You tried to batch select items in Figma but only one item got selected. What is the most likely mistake?

medium

A. You clicked instead of dragging or using Ctrl/Cmd to multi-select.

B. You grouped the items before selecting.

C. You locked the items before selecting.

D. You used the wrong color fill.

Solution

1. Step 1: Identify batch selection methods

   Batch selection requires dragging a selection box or holding Ctrl/Cmd while clicking multiple items.

2. Step 2: Recognize why only one item was selected

   Clicking a single item without modifiers selects only that item, not multiple.

3. Final Answer:

   You clicked instead of dragging or using Ctrl/Cmd to multi-select. -> Option A

4. Quick Check:

   Batch select needs drag or Ctrl/Cmd click [OK]

Hint: Use drag or Ctrl/Cmd click to select many [OK]

Common Mistakes:

• Thinking grouping affects selection method
• Assuming locked items cause single selection
• Confusing color fill with selection

5. You want to batch rename 10 layers in Figma to have a prefix "Icon-" followed by their original name. Which approach correctly applies this batch operation?

hard

A. Select all 10 layers, then use the rename feature with "Icon-" prefix and keep original names.

B. Group the layers and rename the group to "Icon-".

C. Rename one layer and expect all others to change automatically.

D. Select layers one by one and rename each manually.

Solution

1. Step 1: Understand batch renaming in Figma

   Figma allows batch renaming by selecting multiple layers and applying a rename pattern that can add prefixes or suffixes.

2. Step 2: Apply prefix while preserving original names

   Using the rename feature with a prefix "Icon-" adds it to each selected layer's existing name.

3. Final Answer:

   Select all 10 layers, then use the rename feature with "Icon-" prefix and keep original names. -> Option A

4. Quick Check:

   Batch rename = select all + rename pattern [OK]

Hint: Select all layers, then batch rename with prefix [OK]

Common Mistakes:

• Renaming group instead of individual layers
• Expecting one rename to affect all without selection
• Renaming layers one by one instead of batch