Illuminating dark mode | Figma Blog

Dark mode looked like a simple color swap, but Figma found it required a broad redesign of its UI architecture and engineering processes. The project aimed not only to satisfy user demand and improve accessibility, but also to create a scalable foundation for future themes. Figma ultimately treated dark mode as a systems problem involving product scope, shared components, edge cases, and maintainability.

Accessibility and User Demand

• Dark mode became Figma’s most requested feature after users complained about bright screens during late-night work.
• It could improve legibility for people with certain visual impairments and aligned with Figma’s mission of making design accessible.
• The team also considered WCAG contrast requirements rather than treating the feature as purely cosmetic.
• Figma shipped dark mode in May 2022 after months of product, design, and engineering work.

The Complexities of Color

• The initial idea was to replace light colors with dark ones, but this approach would not scale as the product evolved.
• Figma wanted a solution that:
  • Made new features support dark mode by default.
  • Simplified onboarding for engineers.
  • Reduced regressions when experimenting with themes.
  • Could support additional themes in Figma and FigJam.
• Some decisions were straightforward:
  • Light editor panels would become dark.
  • Text and icons would become light foreground elements.
  • Toolbars and menus already dark in light mode would remain dark.
• Other questions required product decisions:
  • Which parts of Figma should support dark mode?
  • Should user-created canvas content, such as the canvas background, change with the theme?
  • Should colors rendered by the C++ editor engine, including the transparency grid, also change?

Auditing the Product Surface

• Before coding began, team members audited Figma’s UI to estimate the work required for each surface.
• The project involved far more than the main editor:
  • Modals
  • Panels
  • Toolbars
  • Dropdowns and submodals
  • Hidden states and complex edge cases
• Each surface needed its full range of views and states considered, not just its most commonly seen appearance.

Building a Systematic Approach

• At kickoff, ten product engineering teams owned major parts of Figma’s interface.
• Shared UI components had to be refactored so they could support dark mode where appropriate while remaining unchanged on unsupported surfaces.
• The team recognized that a small central engineering group could not manually handle every component and state.
• This drove the need for a systematic, regression-resistant approach that could scale across teams and continue supporting future product development.

Figma’s experience shows that theme support should be designed as an extensible system, not implemented as a one-time recoloring exercise. Teams planning similar work should begin with a full product audit, define theme boundaries clearly, and invest in shared components and automation that make future themes easier to add.