Behind the feature: find and replace | Figma Blog
Find and replace in Figma and FigJam proved far more complex than adding a search bar. The team had to design an intuitive experience for navigating a multidimensional canvas, develop reliable result-ordering logic, and adapt the feature across two different products. They combined prototyping, experimentation, internal testing, and lessons from an earlier plugin to create a native tool. ## Building an Intuitive Search Experience - The team began with a brainstorm involving design, engineering, product management, UX writing, and product marketing. - They studied search experiences in other applications and established three principles: - Fast and lightweight - Smooth when navigating across the canvas - Familiar, like search in a browser - Jackie Chui built an early prototype based on her 2019 Find and Replace plugin. - Engineers continuously iterated on working designs, while Figma employees tested the feature in daily work, participated in bug bashes, and provided feedback. ## Establishing the Core Experience in FigJam - The team launched the work in FigJam first to focus on the fundamentals: - Finding text - Highlighting matches - Navigating through results - FigJam provided a simpler starting point before tackling Figma’s broader range of objects and file structures. ## The Challenge of Sorting Search Results - Unlike web pages or documents, Figma and FigJam canvases are multidirectional and multidimensional. - Search results needed a predictable order so navigation would feel coherent rather than jumping randomly across the canvas. - The team had to account for the user-defined spatial structure of each file. ### Reusing Existing Sorting Logic - The first solution reused row-by-row sorting from Figma’s prototyping engine. - This worked for orderly layouts such as presentation slides. - It was less effective for FigJam boards, where stickies, shapes, and other objects may be scattered across the canvas. ### Using Sections and Spatial Grouping - The introduction of FigJam sections gave files clearer structure. - Results could be sorted within each section, producing an order that better matched visual groupings. - The team observed that users commonly clustered stickies around themes, next steps, or threaded discussions. - To handle groups outside sections, an engineer created a spatial-sorting algorithm that groups nearby elements together. ### Developing Heuristics - The team mapped heuristics for determining how section shapes should influence sorting direction. - These rules helped the system infer a natural reading and navigation order from the canvas layout. The broader lesson is that seemingly simple productivity features often require product-specific interaction models. Building prototypes early, testing with real files, and combining existing logic with new spatial heuristics helped Figma create find and replace that felt natural across both structured and free-form canvases.
Read original(opens in new tab)