Inside Figma’s Find & Replace: Design Challenges and Solutions

Background

Figma launched a native Find and Replace feature in October of the previous year, accessible via ⌘+F (Mac) or Ctrl+F (Windows). The article shares the design challenges and solutions the team encountered while building this capability for both FigJam and Figma.

Intuitive Building

The team began with a brainstorming session, forming a cross‑functional group that included product developers, project managers, UX writers, and product marketers. They gathered examples of excellent search experiences from other tools and created a prototype demo using a previously built plugin to simulate search behavior.

Core Experience

The team first focused on FigJam to perfect the core experience—searching text and browsing matches—before extending to Figma, where the variety of object types and complexity increase.

Sorting Logic

FigJam’s canvas is multi‑dimensional, unlike linear web pages. The team needed a sorting algorithm that felt natural across varied layouts. An initial horizontal‑first sorting worked for slide‑like arrangements but failed with scattered sticky notes and shapes.

Section Feature

With FigJam’s “Section” feature, documents became more structured, allowing the team to sort results by section groups. A spatial sorting algorithm was implemented to group elements by proximity when sections were not applicable.

Zoom and Pan

When a match is selected, the canvas automatically zooms to focus on it. The team defined an acceptable “effective font size” (font size × zoom level) to decide whether to zoom in or out. To avoid excessive panning when multiple matches appear, an invisible central zone was created; the view only pans when a match falls outside this zone.

Beyond Text Search

Figma’s files can contain virtually unlimited pages and layers. The team identified three primary search scenarios: text search, quick navigation to pages and top‑level frames, and layer‑name search.

Search Bar Exploration

Two UI options were evaluated: a floating search bar (lightweight, good for text) and a sidebar search field (better for layer names). Mixed designs were tested but none satisfied both use cases. Ultimately, the team prioritized layer and page search, placing the search bar in the layer panel and removing the floating bar.

Details and Reflections

Keyboard shortcuts were a major focus. The team discovered users often press

Enter

to step through matches in FigJam. After weighing consistency across products, they decided to use

Enter

for “next match” in text/layer searches and “open page” for page searches.

Learning from the Plugin

Insights from the earlier plugin guided the native implementation. For example, the “preserve original case” option was removed in favor of a smarter rule that handles most cases automatically, reducing user friction.

Conclusion

The project highlighted the need for continuous trade‑offs, iterative testing, and blending intuition with data. The final design delivers a fast, lightweight, and familiar search experience that scales from FigJam’s simple canvas to Figma’s complex, multi‑object files.