Updating Our Web System For A New Era | Figma Blog (opens in new tab)

Figma refreshed its web design system to support the company’s evolution from a single design tool into a broader platform for product teams. The previous system had accumulated overly similar components, inflexible colors, and typography that no longer suited its content. By auditing real-world usage and simplifying its component library, Figma created a more focused, flexible foundation aligned with its new brand.

Why the Web System Needed to Change

• Figma’s 2020 website was designed primarily to introduce a new design tool.
• By 2024, Figma had expanded into a platform serving many kinds of product teams.
• The existing system had begun to create friction:
  • Many components differed only slightly, making selection difficult.
  • The color system could not accommodate the evolving brand palette.
  • Typography was not flexible enough for the range of content Figma now produced.
• The brand refresh—including Figma Sans, a new color palette, and a revised illustration style—created an opportunity to update the website system as well.

Auditing and Simplifying Components

• The Web Experience team created a script to measure:
  • Which components were being used
  • How frequently they appeared
  • Which pages used them
• The audit exposed unnecessary complexity and opportunities to consolidate similar options.
• The “Flex” component had grown to 48 variants over time.
• After reviewing actual usage, Figma reduced it to 24 variants while preserving its essential functionality.
• The team removed centered text as an option and established left alignment as the default across the web system.
• The resulting property panel was more focused, easier to navigate, and better aligned with the refreshed visual language.

Building a More Flexible System

• Simplifying the library gave designers and content builders a smaller set of stronger, more purposeful choices.
• Figma created templates for common page layouts.
• New “building block” components can be combined in different ways to produce on-brand pages.
• The system’s atomic elements include inputs, primitives, icons, and navigation components.

Figma’s approach demonstrates the value of auditing how a design system is actually used before expanding it further. Removing redundant variants, establishing consistent defaults, and providing reusable templates can make a system easier to use while keeping it flexible enough for future growth.