Find and replace across files in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a large design system in Figma.

📋 Request: Your design lead asks you to update the brand color name from 'Primary Blue' to 'Brand Blue' across all design files in the project.

📊 Data: You have multiple Figma files containing components, text layers, and styles using the color named 'Primary Blue'.

🎯 Deliverable: A report showing all instances where 'Primary Blue' was replaced with 'Brand Blue' across files, and updated design files reflecting the change.

Sample Data

File Name	Layer Name	Color Name	Usage Count
Design System.fig	Button/Primary	Primary Blue	15
Marketing.fig	Header Background	Primary Blue	5
Landing Page.fig	Call to Action	Primary Blue	8
Dashboard.fig	Sidebar	Primary Blue	10
Design System.fig	Link Text	Primary Blue	12

1

Step 1: Open the Figma desktop app and sign in to your account.

No formula needed.

Expected Result

You are logged in and ready to access your project files.

2

Step 2: Use the Figma search bar to find all files containing the color name 'Primary Blue'.

Search term: 'Primary Blue' in the project files list.

Expected Result

You see a list of files where 'Primary Blue' is used: Design System.fig, Marketing.fig, Landing Page.fig, Dashboard.fig.

3

Step 3: Open the first file 'Design System.fig'. Use the 'Find and Replace' feature to search for 'Primary Blue' in color styles.

In the file, press Ctrl+F (Cmd+F on Mac), enter 'Primary Blue', then select 'Replace' and type 'Brand Blue'.

Expected Result

All instances of 'Primary Blue' in color styles and layers are highlighted and ready to be replaced.

4

Step 4: Replace all occurrences of 'Primary Blue' with 'Brand Blue' in 'Design System.fig'.

Click 'Replace All' in the find and replace dialog.

Expected Result

15 instances in Button/Primary and 12 in Link Text layers are updated to 'Brand Blue'.

5

Step 5: Repeat steps 3 and 4 for the other files: Marketing.fig, Landing Page.fig, and Dashboard.fig.

Use find and replace for 'Primary Blue' to 'Brand Blue' in each file.

Expected Result

Marketing.fig updates 5 instances, Landing Page.fig updates 8 instances, Dashboard.fig updates 10 instances.

6

Step 6: Save all updated files and document the changes in a report.

Create a summary table listing file names and number of replacements made.

Expected Result

Report shows: Design System.fig - 27 replacements, Marketing.fig - 5, Landing Page.fig - 8, Dashboard.fig - 10.

Final Result

-----------------------------------------
| File Name       | Replacements Made    |
-----------------------------------------
| Design System.fig | 27                  |
| Marketing.fig     | 5                   |
| Landing Page.fig  | 8                   |
| Dashboard.fig     | 10                  |
-----------------------------------------

✓The color name 'Primary Blue' was successfully replaced with 'Brand Blue' across all project files.

✓Design System.fig had the highest number of replacements (27), indicating heavy usage of the color.

✓Consistent color naming improves design system clarity and brand consistency.

Bonus Challenge

Automate the find and replace process across multiple Figma files using Figma Plugins or API.

Show Hint

Explore Figma's Plugin API to write a script that searches for color styles named 'Primary Blue' and renames them to 'Brand Blue' programmatically.

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