Figma on Figma: Our Approach to Designing UI3 | Figma Blog (opens in new tab)
UI3 is Figma’s two-year effort to make the interface less distracting and keep designers focused on their work. The redesign explored bold changes, including floating panels and a new way to minimize interface elements, but user feedback and performance data led Figma to reverse some decisions. The result balances a long-term vision for a cleaner canvas with practical adjustments based on how people actually work. ## Designing Around Focus and Flow - Figma’s central goal was to put users’ creative work “center stage” and minimize distractions. - The team relied on craft, intuition, feature-adoption data, performance metrics, and extensive user feedback. - Figma emphasizes that redesigning for designers requires establishing a clear destination while bringing users along through iteration. - UI3 was scheduled for general availability on October 10, 2024. ## Docked Panels: Experimentation and Reversal - The team explored unconventional navigation and properties-panel designs: - Panels appearing only on hover - Panels floating above the canvas - A simplified floating-panel system shared across Figma products - Floating panels initially seemed promising but created practical problems for frequent users: - Reduced available canvas space, especially on smaller screens - Made designs appear to sit behind the panels - Increased distraction - Made rulers less useful by moving them farther from the design - Slowed users down, conflicting with Figma’s goal that “speed is a feature” - For the full UI3 rollout, Figma reattached the navigation and properties panels in Figma Design. - The panels remain resizable for flexibility. - Floating UI continues in specific contexts, including: - Minimize UI mode in Figma Design - Grid view in Figma Slides - Default views in FigJam - Bottom toolbars across Figma products ## Minimize UI: Making the Canvas the Center - Figma’s redesign was guided by the belief that work should remain the primary focus of the canvas, even as interface conventions evolve. - The existing Hide UI feature was considered too rigid and “blunt.” - Minimize UI offers a more flexible alternative: - Collapses side panels for distraction-free work - Keeps tools readily accessible - Works better in small windows and split-screen setups - The interface hierarchy was reorganized to accommodate future features more cleanly. - The navigation panel now follows a linear structure: - File name - Branch name - Project name - Pages - Layers - This structure gives future navigation capabilities a logical place without requiring disruptive layout compromises. ## Updating Familiar Interface Conventions - UI3 also examines established interaction patterns, such as keyboard shortcuts, scrollbars, and blend modes. - Figma describes these as “training wheels” or conventions that may no longer match how modern interfaces are used. - The redesign aimed to balance newer interaction trends with users’ existing habits and expectations. UI3 demonstrates that successful redesign is not simply about pursuing a cleaner or more ambitious vision. Figma’s experience suggests that bold experiments should be tested in real workflows, with usability and performance data ultimately determining which ideas remain.