figmaMar 27, 2023

Little Big Outtakes | Figma Blog (opens in new tab)

Figma’s “Little Big Outtakes” shares the behind-the-scenes decisions that shaped 30+ small product updates. The stories show how difficult edge cases, team feedback, and disciplined scoping often produced better outcomes than simply adding more functionality. Across search, prototyping, and previews, the teams improved features by making complexity visible, validating ideas collaboratively, and prioritizing achievable impact. ## Multi-select Search: Designing for Edge Cases - Multi-select search extended Figma’s find-and-replace feature, allowing users to select specific results with `Shift + Click` or `Cmd/Ctrl + Click`. - The team discovered a major complication: users cannot independently select a parent layer and one of its children. - Selecting multiple search results could therefore include unexpected descendants, especially in deeply nested files. - To clarify the behavior, the designers added: - A visual hierarchy in the search sidebar showing parent-child relationships. - Hover-selection previews when users hold `Command` or `Shift`. - Highlights for indirectly selected items and outlines for directly selected children. - The team concluded that edge cases were not peripheral to the feature—they fundamentally defined how multi-selection needed to work. ## Overlay Blur: Turning Ideas into a Concrete Fix - Figma’s prototyping viewer previously struggled to render background blur on overlays because overlays do not have ordinary content directly beneath them. - Engineer Brandon Lin documented his proposed approaches, potential problems, and solution before implementing the fix. - Teammates suggested passing the overlay’s position into the rendering code so it could identify the correct area to blur. - The final changes associated overlays with their respective frames and ensured that multiple overlays were drawn and layered in the correct positions. - Team feedback gave Brandon confidence that his initial reasoning was sound while helping make the implementation more precise. ## On-Canvas Previews: The Value of Scoping Down - On-canvas previews let users hover over design-panel options—such as blend modes, effects, and color blend modes—to preview changes before applying them. - The original concept considered a much broader scope, including boolean operations, component properties, and font selection. - Rather than attempting to support everything, the team audited dropdown-based editor properties and assessed each option for feasibility and performance risk. - They prioritized features that would not require major geometry changes or substantial canvas modifications. - The smaller release proved powerful enough to be useful while allowing the team to deliver and refine it more quickly. Figma’s examples suggest that strong product work often comes from embracing complexity selectively: expose confusing relationships, seek feedback early, and narrow ambitious ideas to the highest-value implementation.

find-and-replacefigmaprototypingfigjam+2

figmaOct 5, 2022

Behind the feature: find and replace | Figma Blog (opens in new tab)

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.

find-and-replacefigmafigjamuser-interface-design+2