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.

Practice

1. What is the main benefit of using Find and Replace across files in Figma?

easy

A. It creates new files automatically.

B. It updates multiple files at once, saving time.

C. It deletes unused files from the project.

D. It exports files to different formats.

Solution

1. Step 1: Understand the purpose of find and replace

   Find and replace across files is designed to update content in many files simultaneously.

2. Step 2: Identify the main benefit

   By updating many files at once, it saves time compared to editing files one by one.

3. Final Answer:

   It updates multiple files at once, saving time. -> Option B

4. Quick Check:

   Benefit = Saves time by updating many files [OK]

Hint: Remember: It saves time by changing many files at once [OK]

Common Mistakes:

• Thinking it creates or deletes files
• Confusing it with export features
• Assuming it only works in one file

2. Which of the following is the correct way to start a find and replace across files operation in Figma?

easy

A. Click on the 'Prototype' tab.

B. Right-click on a file and select 'Export'.

C. Open the file menu and choose 'New File'.

D. Use the shortcut Ctrl + Shift + F or Cmd + Shift + F.

Solution

1. Step 1: Recall the shortcut for find and replace across files

   In Figma, the shortcut Ctrl + Shift + F (Windows) or Cmd + Shift + F (Mac) opens the find and replace across files dialog.

2. Step 2: Eliminate incorrect options

   Exporting, creating new files, or prototype tab do not start find and replace.

3. Final Answer:

   Use the shortcut Ctrl + Shift + F or Cmd + Shift + F. -> Option D

4. Quick Check:

   Shortcut = Ctrl/Cmd + Shift + F [OK]

Hint: Use Ctrl/Cmd + Shift + F to open find and replace across files [OK]

Common Mistakes:

• Confusing export with find and replace
• Looking in the prototype tab
• Trying to create a new file instead

3. You want to replace the color named 'Primary Blue' with 'Secondary Green' across all your Figma files. After running find and replace, what will happen?

medium

A. Only the current file's 'Primary Blue' colors will change.

B. Nothing will change until you manually edit each file.

C. All files in your project will update 'Primary Blue' to 'Secondary Green'.

D. The colors will be replaced only in selected frames.

Solution

1. Step 1: Understand the scope of find and replace across files

   This feature updates the specified item in all files within the project or workspace, not just one file or frame.

2. Step 2: Apply to the color replacement scenario

   Replacing 'Primary Blue' with 'Secondary Green' will update all instances across all files automatically.

3. Final Answer:

   All files in your project will update 'Primary Blue' to 'Secondary Green'. -> Option C

4. Quick Check:

   Scope = All files updated [OK]

Hint: Find and replace across files updates all files, not just one [OK]

Common Mistakes:

• Thinking it only affects current file
• Assuming manual edits are still needed
• Believing it only works on selected frames

4. You tried to replace a style name across files but the changes did not apply. What is the most likely reason?

medium

A. All of the above.

B. The style name was misspelled in the find box.

C. You do not have permission to edit those files.

D. You forgot to preview and confirm the changes before applying.

Solution

1. Step 1: Check common reasons for no changes

   Not confirming changes, misspelling the style name, or lacking permissions can all cause no updates.

2. Step 2: Combine all possible causes

   Since all these reasons can prevent changes, the correct answer includes all.

3. Final Answer:

   All of the above. -> Option A

4. Quick Check:

   Reasons combined = All of the above [OK]

Hint: Always preview, check spelling, and permissions before replacing [OK]

Common Mistakes:

• Ignoring permission issues
• Skipping preview confirmation
• Overlooking typos in find text

5. You want to replace the text 'Q2 Report' with 'Q3 Report' across multiple Figma files but only in files created after January 2024. How can you achieve this?

hard

A. Find and replace across files does not support filtering by file date.

B. Manually open each file and replace text one by one.

C. Use find and replace across files and filter files by date before applying.

D. Export files, edit text in a text editor, then re-import.

Solution

1. Step 1: Check if find and replace supports filtering

   Figma's find and replace across files does not currently support filtering files by properties like creation date.

2. Step 2: Alternative methods

   Since filtering by date is not supported, manual replacement or other workflows are needed.

3. Final Answer:

   Find and replace across files does not support filtering by file date. -> Option A

4. Quick Check:

   No filtering support = Find and replace across files does not support filtering by file date. [OK]

Hint: Find and replace across files cannot filter files by date [OK]

Common Mistakes:

• Assuming filtering is possible
• Trying manual replacement for many files
• Using export-import instead of built-in tools