We refreshed Figma's UI: An inside look at our process | Figma Blog

Figma’s 2019 UI refresh aimed to modernize the product without disrupting users. Rather than redesigning its structure, the team focused on visual inconsistencies in typography, layout, color, and iconography, using extensive research and internal discussion to guide decisions. The process began by cataloging problems, then organizing them into broader themes.

Why Figma Needed a Refresh

• The interface had evolved piecemeal as the product expanded.
• Teams created custom components when existing patterns no longer fit, producing inconsistent:
  • Tables, buttons, and input controls
  • Shades of gray, red, and blue
  • Visual and interaction patterns
• The original UI foundation predated major features such as Multiplayer and Components.
• Both users and employees increasingly noticed the inconsistencies.

Step One: Brainstorming the Problems

• Figma held a two-hour session with the entire design team.
• Designers explored the product firsthand, documenting quirks, shortcomings, and successful patterns with notes and screenshots.
• Findings were collected in a shared Figma file and text document.
• Strong group reactions—such as an “oh shit, that’s bad” response—helped identify issues likely to have broad impact.
• The team deliberately paused for several days afterward, allowing opinions to settle and new insights to emerge.

Step Two: Organizing and Synthesizing Findings

• The team revisited the brainstorm after the reflection period and debated which problems mattered most.
• Designers converted detailed observations into broader post-it themes. For example:
  • Several notification inconsistencies became “We need a system for how we handle notifications.”
• Notes were grouped by similarity, such as:
  • Color
  • Legibility
  • White space
  • Notifications
• This clustering reduced noise and revealed larger systemic issues, including typography, icons, dialogs, toolbars, sharing, layers, components, and file browsing.
• Figma found that grouping was useful but overly complex classification was not.
• The team abandoned an additional “visual to foundational” axis because it made the framework harder to use.

Lessons from the Process

• A visual refresh often becomes necessary gradually rather than because of one decisive moment.
• Broad, understandable categories are more useful than abstract or overly narrow ones.
• Time between brainstorming and synthesis helps teams reassess initial reactions.
• The refresh prioritized surface-level improvements so users could benefit from a more coherent interface without learning an entirely new product.