Find and replace across files in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a find operation in Figma.

Figma

figma.currentPage.findAll(n => n.[1] === 'Button')

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

Atype

Bname

Cstyle

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'type' instead of 'name' to find elements.

Use name to find nodes by their name in Figma.

2fill in blank

medium

Complete the code to replace text in all found nodes.

Figma

for (const node of nodes) { if (node.type === 'TEXT') { node.characters = [1]; } }

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

A'New Text'

Bnode.characters

Cnode.characters.replace('Old', 'New')

Dnode.text

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a fixed string instead of calling replace.

To replace text, use node.characters.replace('Old', 'New') to compute the new content and assign it back to node.characters.

3fill in blank

hard

Fix the error in the code to find and replace text across files.

Figma

const nodes = figma.root.findAll(n => n.type === 'TEXT' && n.characters.includes([1]));

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

A'newText'

BOldText

Cn.characters

D'OldText'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the search string.

The search string must be a quoted string literal like 'OldText'.

4fill in blank

hard

Fill both blanks to filter text nodes and replace their content.

Figma

const textNodes = figma.root.findAll(n => n.type === [1] && n.characters.includes([2]));

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

A'TEXT'

B'Old'

C'FRAME'

D'New'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'FRAME' instead of 'TEXT' for node type.

Use 'TEXT' to filter text nodes and 'Old' as the search string.

5fill in blank

hard

Fill all three blanks to find text nodes, check for old text, and replace it.

Figma

const nodes = figma.root.findAll(n => n.type === [1] && n.characters.includes([2]));
for (const node of nodes) {
  node.characters = node.characters.replace([3], 'NewText');
}

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

A'TEXT'

BOldText

C/OldText/g

D'OldText'

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of regex for replace.

Use 'TEXT' for node type, 'OldText' as string to check, and /OldText/g as regex to replace all occurrences.