Batch operations and selection in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all layers on the current page.

Figma

figma.currentPage.selection = figma.currentPage.[1]();

Drag options to blanks, or click blank then click option'

AfindAll

BselectAll

CgetSelection

DgetAll

Attempts:

3 left

💡 Hint

Common Mistakes

Using getSelection() returns only currently selected layers, not all layers.

selectAll() is not a valid method in Figma plugin API.

The findAll() method returns all nodes on the current page. Assigning the result to selection selects all layers.

2fill in blank

medium

Complete the code to remove all locked nodes from the current selection.

Figma

figma.currentPage.selection = figma.currentPage.selection.filter(node => node.[1] !== true);

Drag options to blanks, or click blank then click option'

AisLocked

Bvisible

Cremoved

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'removed' property which does not exist.

Filtering by 'visible' does not remove locked nodes.

The isLocked property indicates if a node is locked. Filtering out locked nodes removes them from selection.

3fill in blank

hard

Complete the code to batch rename selected layers by adding a prefix.

Figma

figma.currentPage.selection.forEach(node => { node.name = '[1]' + node.name; });

Drag options to blanks, or click blank then click option'

Alayer_

Bnode_

Cprefix_

Dselected_

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of string literals.

Forgetting to add the underscore for clarity.

Adding the prefix prefix_ before each node's name correctly renames the layers.

4fill in blank

hard

Fill both blanks to batch hide all selected layers and then clear the selection.

Figma

figma.currentPage.selection.forEach(node => { node.[1] = false; });
figma.currentPage.selection = [2];

Drag options to blanks, or click blank then click option'

Avisible

B[]

Cnull

DisHidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'isHidden' which is not a valid property.

Assigning null instead of an empty array to clear selection.

Setting visible to false hides the layers. Assigning an empty array [] clears the selection.

5fill in blank

hard

Fill all three blanks to batch duplicate selected layers, rename duplicates with suffix, and select duplicates.

Figma

const duplicates = figma.currentPage.selection.map(node => {
  const dup = node.[1]();
  dup.name = node.name + '[2]';
  node.parent.appendChild(dup);
  return dup;
});
figma.currentPage.selection = [3];

Drag options to blanks, or click blank then click option'

Aclone

B_copy

Cduplicates

Dduplicate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'duplicate()' which is not a Figma node method.

Assigning the wrong variable to selection.

The clone() method creates a copy of a node. Adding _copy suffix renames it. Assigning duplicates array selects the new nodes.

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