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.